【Vue】使用 vue-cli 时添加 Element UI 框架

最近在学习vue和基于vue的一个国产ui框架-element ui的使用。

在通过vue-cli组织代码时，直接执行npm install element-ui，然后 npm run dev的话，会报错，打开网页后可以发现相关的css文件并没有打包进去，因此必须先进行下列流程安装必要的插件。

1.安装相关的loader模块

npm install style-loader -D

npm install css-loader -D

npm install file-loader -D

2.安装Element UI

npm install element-ui -S

3.引入Element UI

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)

【重点】在网上很多教程中，上面第二行的路径是

import 'element-ui/lib/theme-default/index.css'

然而这样使用会提示找不到css，因为实际上Element UI已在版本迭代中，将主题包的名字从default改为chalk，务必要留意这一点

4.配置webpack.base.conf.js

  {
    test: /\.css$/,
    loader: 'style-loader!css-loader'
  },
  {
    test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/,
    loader: 'file-loader'
  }

然后就可以正常执行

npm run build
npm run dev