由於最近公司開發一個很小的後臺項目,因此考慮部分引入element的組件,由於第一次單獨引入沒有經驗,網上看了不少都有這樣那樣的問題,我的感受官網也沒把我說明白(也許本身水平過低了),因此本身研究了一下親測有效,若有錯誤歡迎指出。css
安裝vue-cli
npm install -g vue-clivue
建立項目projectName是你項目的名字
npm install webpack projectNamewebpack
進入項目目錄
cd projectNameweb
初始化項目安裝依賴
npm installvue-cli
安裝elementui
npm install element-ui --save -devnpm
首先肯定項目是否有style-loader和babel-plugin-component 若沒有npm一個
npm install xxx --save -develement-ui
簡單粗暴點,找到.babelrc 把原文件內容所有刪除,粘貼下面代碼babel
{ "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"] } } }
8.在webpack.base.conf.js加入下面一句ui
{ test: /\.css$/, loader: 'style-loader' },
9.在mian.js中引入code
import { Button,Input } from 'element-ui' Vue.use(Button) Vue.use(Input)
10.而後就能夠使用Button和Input了