vue+elementUI 부분을 활용한 컴포넌트 도입 구현 방법

vue.js의 UI 구성 요소 라이브러리에는 git에 여러 프로젝트가 있습니다. 더 많은 사용자가 보는 것은 iView와 Element입니다. 이번 글에서는 주로 vue+elementUI를 사용하여 일부 import된 컴포넌트를 구현하는 것에 대한 관련 정보를 소개하고, vue에서 elementUI를 도입할 때 발생하는 오류에 대한 해결책을 소개합니다. 필요한 친구들이 참고할 수 있도록 예시 코드를 통해 자세히 소개하고 있습니다. 아래는 작은 내용을 함께 배워보겠습니다.

공식 웹사이트 소개

• iView: Vue.js 기반의 고품질 UI 구성 요소 라이브러리 세트

• Element, 개발자, 디자이너 및 제품 관리자를 위해 준비된 Vue 2.0 기반 구성 요소 라이브러리 세트 , 귀하의 웹 사이트가 신속하게 형성될 수 있도록 지원 디자인 리소스가 제공됩니다.

둘 다 장점과 단점이 있으므로 너무 많은 언급은 하지 않겠습니다. 개인적 필요에 따라 Element를 사용하게 되었습니다. 최근 회사에서 소규모 백엔드 프로젝트를 개발했기 때문에 엘리먼트의 일부 컴포넌트를 도입하는 것을 고려했습니다. 처음으로 단독으로 도입한 경험이 없어서 인터넷에서 많이 읽어봤는데 개인적으로 이런저런 문제점이 있습니다. 공식 홈페이지에서는 명확하게 설명하지 않아서(레벨이 너무 낮을 수도 있음) 제가 직접 공부하고 테스트해 본 결과, 틀린 부분이 있으면 지적해 주시기 바랍니다.

구현 방법

1. vue-cli를 설치합니다.

npm install -g vue-cli

2. 프로젝트 이름은 프로젝트 이름입니다

npm install webpack projectName

3. 프로젝트 설치 종속성을 초기화합니다.

cd projectName

npm install

npm install element-ui --save -dev

npm install xxx --save -dev

 { "presets": [["env", {
     "modules": false,
     "targets": {"browsers": ["> 1%", "last 2 versions", "not ie <= 8"]}
    }],
    "stage-2"],
  "plugins": [
     "transform-runtime",
     ["component",[
     {
     "libraryName":"element-ui",
     "styleLibraryName":"theme-default" //1.4的老项目用这个，2.0的用theme-chalk，假设没效果看看官网又把默认的主题改 成那个了 跟着改一下应该就可以了
     }
     ]]
     ],
  "comments":false,   
  "env": {
  "test": {
   "presets": ["env", "stage-2"],
   "plugins": ["istanbul"]
  }
  }
 }

{
 test: /\.css$/,
 loader: 'style-loader'
},

vue는 오류를 보고하기 위해 elementUI를 도입합니다

Vue2.0, 테이블 페이지 넘김을 실현하는 ElementUI

vue Element- ui 입력 원격 검색 예시 자세한 설명

VUE element-ui를 사용하여 Reuse Table 컴포넌트 작성

위 내용은 vue+elementUI 부분을 활용한 컴포넌트 도입 구현 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!