vue element-ui组件的安装

官网：http://element-cn.eleme.io/#/zh-CN

tips:最好安装cnpm，npm太慢了

1.安装vue-cli

> cnpm i -g vue-cli
> mkdir my-project && cd my-project
> vue init webpack

2.安装css识别工具和element-ui组件：

>cnpm i style-loader -D
>cnpm i css-loader -D
>cnpm i file-loader -D
> cnpm i element-ui -D

3.在main.js文件中加入

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI)

4.在.babelrc文件中配置(可直接复制)：

{ "presets": [["env", {
    "modules": false,
    "targets": {"browsers": ["> 1%", "last 2 versions", "not ie <= 8"]}
   }],
   "stage-2"],
 "plugins": [
    "transform-runtime",
    ["component",[
    {
    "libraryName":"element-ui",
    "styleLibraryName":"theme-chalk" 
    }
    ]]
    ],
 "comments":false,   
 "env": {
 "test": {
  "presets": ["env", "stage-2"],
  "plugins": ["istanbul"]
 }
 }
}

此文件为vue脚手架中的babel配置文件，用来将es6代码转换成浏览器能够识别的代码。
5.build文件夹下的webpack.base.conf.js增加多这两项:

image

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