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 按钮 有样式了！