vue 2.0 프로젝트 에서 element-ui 를 어떻게 도입 하 는 지 상세 하 게 설명 합 니 다.

머리말
본 고 는 주로 vue 2.0 프로젝트 에 element-ui 를 도입 하 는 것 에 관 한 내용 을 소개 하 였 으 며,새로운 vue 프로젝트 부터 구성 요소 Element 도입 까지 매우 상세 하 게 소개 하 였 으 며,다음은 더 이상 말 하지 않 겠 습 니 다.상세 한 소 개 를 살 펴 보 겠 습 니 다.
새 항목
1.node 와 npm 에 명령 이 설치 되 어 있 는 지 확인 합 니 다node -v npm -v(설치 되 어 있 지 않 은 선 설치 환경);
2. npm install -g cnpm --registry=https://registry.npm.taobao.org (국내 타 오 바 오 미 러 파일 을 설치 하고 뒤쪽 설치 npm 는 모두 cnpm 로 변경 할 수 있 습 니 다)
3.vue-cli 설치
    1、 cnpm install -g vue    2、 cnpm install -g vue-cli
4.설치webpack   cnpm install -g webpack5.cd 실행 디 렉 터 리
6.새 vue 항목      vue init webpack vuedemo7.항목 목록 에 들 어가 기     cd vuedemo8.설치 의존        cnpm install9.실행 항목        cnpm run dev10.프로젝트 발표       cnpm run build주:mac 컴퓨터 는 타 오 바 오 미 러 를 설치 하기 전에 실행 해 야 합 니 다sudo chown -R $USER /usr/local2.element-ui 를 사용 하기 전에 수 정 된 설정 을 설치 해 야 합 니 다.
1.로 더 모듈 설치:


 cnpm install style-loader -D
 cnpm install css-loader -D
 cnpm install file-loader -D

2.Element-UI 모듈 설치


 cnpm install element-ui --save

3.webpack.base.conf.js 의 설정 을 수정 합 니 다.위치:다음 그림:

다음은 추가 할 코드 입 니 다:


 {
 test: /\\\\\\\\.css$/,
 loader: "style!css"
 },
 {
 test: /\\\\\\\\.(eot|woff|woff2|ttf)([\\\\\\\\?]?.*)$/,
 loader: "file"
 }

3.Element 를 도입 합 니 다.앞 에 element-ui 가 설치 되 어 있 습 니 다.Vue 프로젝트 에 만 도입 하면 됩 니 다.
1.항목 열기:src/main.js,아래 세 가 지 를 추가 합 니 다.


 import ElementUI from 'element-ui'
 import 'element-ui/lib/theme-default/index.css'
 Vue.use(ElementUI)

4.그리고 vue 파일 에서 바로 사용 할 수 있 습 니 다.
예 를 들 어 수정 을 하고 element-button 단 추 를 추가 합 니 다.


<template>
<div class="login">
 <form name = 'form' action="">
 <input id="username" type="text" placeholder="           " />
 <input id='pwd' type="password" placeholder="     " />
 <button onclick="login()">  </button>
 </form>
 <div class="account">
 <p class="forget" style="float:right">    ?</p>
 <div class="register">
  <span>     ?</span>
  <a href="#" rel="external nofollow" >    </a>
 </div>
 </div>
 <el-button>    </el-button>
 <el-button type="primary">    </el-button>
 <el-button type="text">    </el-button>
 </div>
</template>

5.성공 후의 캡 처:

총결산
이상 은 이 글 의 전체 내용 입 니 다.본 논문 의 내용 이 여러분 의 학습 이나 업무 에 어느 정도 도움 이 되 기 를 바 랍 니 다.궁금 한 점 이 있 으 시 면 댓 글 을 남 겨 주 셔 서 저희 에 대한 지지 에 감 사 드 립 니 다.

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

Vue, element-ui의resetFields() 메서드 재설정 폼이 잘못되었습니다.

2. 폼 항목el-form-item은prop 속성을 추가하지 않았습니다.prop 속성은 input 상자와 연결된 속성과 일치해야 합니다 3. 이런 문제가 자주 발생하는 장면은 vuex를 사용할 때 새 폼과 편집 폼을...

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

vue 2.0 프로젝트 에서 element-ui 를 어떻게 도입 하 는 지 상세 하 게 설명 합 니 다.

좋은 웹페이지 즐겨찾기