vue 설치 및 요소 UI 가져오기

먼저 Vue 프로젝트의 터미널에 다음과 같이 입력합니다. 성공적인)

그런 다음 main.js를 추가합니다.

'element-ui'에서 ElementUI 가져오기; 
import 'element-ui/lib/theme-chalk/index.css'; 

Vue.use(ElementUI);

위 단계를 완료한 후 설치 여부를 확인할 수 있습니다. package.json에서 Element UI 관련 정보를 볼 수 있습니다.

 마지막으로 테스트할 수 있습니다.다음은 공식 문서의 경우입니다.

<템플릿> 
  <el-form ref="form" :model="form" label-width="80px"> 
    <el-form-item label="활동 이름"> 
      <el-input v-model="form. name"></el-input> 
    </el-form-item> 
    <el-form-item label="활성 지역"> 
      <el-select v-model="form.region" placeholder="활성 지역을 선택하십시오 지역 "> 
        <el-option label="Area One" value="상하이"></el-option> 
        <el-option label="Area Two" value="베이징"></el-option> 
      </el - 선택> 
    </el-form-item> 
    <el-form-item label="활동 시간"> 
      <el-col :span="11">
        <el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width: 100%;"></el-date-picker> 
      </el-col>
      <el-col class="line" :span="2">-</el-col> 
      <el-col :span="11"> 
        <el-time-picker placeholder="시간 선택" v-model= "form.date2" style="width: 100%;"></el-time-picker> 
      </el-col> 
    </el-form-item> 
    <el-form-item label="즉시 배송"> 
      <el-switch v-model="form.delivery"></el-switch> 
    </el-form-item> 
    <el-form-item label="활동 특성"> 
      <el-checkbox-group v-model ="form.type"> 
        <el-checkbox label="미식/레스토랑 온라인 이벤트" name="type"></el-checkbox> 
        <el-checkbox label="로컬 푸시 이벤트"name="type"></el-checkbox> 
        <el-checkbox label="오프라인 활동" name="type"></el-checkbox> 
        <el-checkbox label="순수 브랜드 노출" name=" type" ></el-확인란>
      </el-checkbox-group> 
        이름: '', 
    </el-form-item> 
    <el-form-item label="특별 자원">
      <el-radio-group v-model="form.resource"> 
        <el-radio label="온라인 브랜드 후원"></el-radio> 
        <el-radio label="오프라인 장소는 무료입니다">< /el -radio> 
      </el-radio-group> 
    </el-form-item> 
    <el-form-item label="활성 양식"> 
      <el-input type="textarea" v-model="form.desc" ></el-input> 
    </el-form-item> 
    <el-form-item> 
      <el-button type="primary" @click="onSubmit">지금 만들기</el-button> 
      <el -button >취소</el-button> 
    </el-form-item> 
  </el-form> 

</template> 

<script>
내보내기 기본 { 
  데이터() { 
    반환 { 
      양식: { 
        날짜1: '',
        region: '', 
        date2: '', 
        delivery: false, 
        type: [], 
        resource: '', 
        desc: '' 
      } 
    } 
  }, 
  방법: { 
    onSubmit() { 
      console.log('submit!'); 
    } 
  } 
} 

</스크립트>

작업 결과는 다음과 같습니다.