Vue UI框架——Element UI的使用

Element UI一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库

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

1.安装 cnpm i element-ui -S      -S表示 --save

    注意，这个过程中，电脑上的安全防护软件，可能会提示你继续安装会有安全问题，不用管，允许运行就好，不然无法安装。

2.在main.js中引入element UI的css 和 插件（这里说的是全部引入，下篇文章说一下按需引入）

    import ElementUI from 'element-ui';

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

    Vue.use(ElementUI);

这时候运行项目的话，会报错：

img1

意思是，无法法解析element-ui的字体文件element-icons.ttf文件，需要我们进行配置。

3.配置字体解析

    （1）检查有没有安装file-loader ，打开package.json文件查看有没有划线处的代码，没有的话，就安装file-loader，命令是cnpm install file-loader --save-dev，安装完成进行下一步。如果有的话，直接进行下一步。

img2

    （2）在webpack.config.js文件中粘贴如下代码即完成配置，然后，重新运行项目：

        {

            test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/,

            loader: 'file-loader'

        }

img3

4.查看文档，直接使用