vue+elementUI部分引入組件

由於最近公司開發一個很小的後臺項目，因此考慮部分引入element的組件，由於第一次單獨引入沒有經驗，網上看了不少都有這樣那樣的問題，我的感受官網也沒把我說明白（也許本身水平過低了），因此本身研究了一下親測有效，若有錯誤歡迎指出。css

1. 安裝vue-cli
   npm install -g vue-clivue

2. 建立項目projectName是你項目的名字
   npm install webpack projectNamewebpack

3. 進入項目目錄
   cd projectNameweb

4. 初始化項目安裝依賴
   npm installvue-cli

5. 安裝elementui
   npm install element-ui --save -devnpm

6. 首先肯定項目是否有style-loader和babel-plugin-component 若沒有npm一個
   npm install xxx --save -develement-ui

7. 簡單粗暴點，找到.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了