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 按鈕 有樣式了！