VUE 集成 element-ui

项目偏管理类型，没有太复杂的交互设计。因此就选用了element-ui框架进行页面开发。
简单说下，首先第一步搭建vue工程。从vue官网，用命令搭建，记得配置node环境。

---

启动之后，修改 HelloWorld.vue

<template>
  <div>
  </div>
</template>

---

主要是体现element-ui---
项目中引入：

npm i element-ui -S

然后再 main.js

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

---

修改 HelloWorld.vue

<template>
  <div>
    <el-button type="success">测试</el-button>
  </div>
</template>

---

看到页面

---

element 插件较大，我们项目也就引用一些常用组件。可以只引入需要的组件，以达到减小项目体积的目的
例如：我们只引用 button 组件：
修改main.js
import {Button} from 'element-ui'
Vue.use(Button)

---

这个时候，页面虽然有button 标签，但是没有button 样式，
引入：

npm install babel-plugin-component -D

加载样式：
修改 .babelrc 文件 plugins 属性

  "plugins": ["transform-vue-jsx", "transform-runtime", [
    "component",
    {
      "libraryName": "element-ui",
      "styleLibraryName": "theme-chalk"
    }
  ]],

然后刷新下 界面 button 按钮 有样式了！

---