집 > 기사 > 웹 프론트엔드 > vue+elementUI 부분을 활용한 컴포넌트 도입 구현 방법

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

小云云원래의: 2018-01-16 09:16:072777검색

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

5 , elementui

npm install

6을 설치합니다. 먼저 프로젝트에 style-loader 및 babel-plugin-comment가 있는지 확인합니다. npm one

npm install element-ui --save -dev

7이 없으면 .babelrc를 찾으세요. , 원본 파일 내용을 모두 삭제하고 다음 코드를 붙여넣습니다.

npm install xxx --save -dev

8. webpack.base.conf.js

 { "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"]
  }
  }
 }

9에 다음 문장을 추가합니다. main.js에

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

를 추가합니다. 버튼과 입력을 사용할 수 있습니다

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

main.js에 import 'element-ui/lib/theme-default/index.css'를 도입하면 오류가 보고되어 프로젝트를 시작할 수 없습니다. package.json의 webpack을 "webpack": "beta"로 변경하고 다시 시작하기만 하면 설치하기만 하면 시작할 수 있습니다

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

관련 기사