Vuejs實例-02Vue.js項目集成ElementUI
0：前言
vue.js的UI組件庫，在git上有多個項目，我見的使用者比較多的是iView和Element.兩個組件庫，組件都很豐富。
官網的介紹
-
iView: 一套基於 Vue.js 的高質量 UI 組件庫
-
Element，一套為開發者、設計師和產品經理准備的基於 Vue 2.0 的組件庫，提供了配套設計資源，幫助你的網站快速成型。
兩者各有優缺點，不多評論，根據自己的需求，我最后使用了Element。
1：安裝
推薦使用 npm 的方式安裝，它能更好地和 webpack打包工具配合使用。我系統使用了淘寶鏡像，所以需要安裝的情況下，一般用cnpm代替npm
$ cnpm i element-ui -S
安裝完成之后，package.json文件會增加element-ui依賴。
"dependencies": {
"element-ui": "^1.3.3",
"vue": "^2.2.6",
"vue-router": "^2.3.1"
},
2：配置
配置文件，可以使用默認的。因為，在使用vue-cli腳手架生成工具，生成項目的時候，已經幫我們配置好了。
3：引入
引入有兩種方式，
1：完整引入。這種方法使用方便，但是會增大項目體積。
2：按需引入。這種方法需要安裝插件，修改配置文件。使用的時候只需要引入需要的組件，減少項目體積。
完整引入
在main.js中寫入以下內容：
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-default/index.css'
Vue.use(ElementUI)
以上代碼便完成了Element的引入。需要注意的是，樣式文件需要單獨引入。
按需引入
借助 babel-plugin-component，我們可以只引入需要的組件，以達到減小項目體積的目的。
首先，安裝 babel-plugin-component：
$ cnpm install babel-plugin-component -D
這個命令，會將babel-plugin-component保存在開發環境的依賴包
"devDependencies": {
"autoprefixer": "^6.7.2",
"babel-core": "^6.22.1",
"babel-loader": "^6.2.10",
"babel-plugin-component": "^0.9.1",
...
}
然后，將.babelrc修改為：
{
"presets": [
["env", { "modules": false }],
["es2015", { "modules": false }],
"stage-2"
],
"plugins": [["component", [
{
"libraryName": "element-ui",
"styleLibraryName": "theme-default"
}
]],"transform-runtime"],
"comments": false,
"env": {
"test": {
"presets": ["env", "stage-2"],
"plugins": [ "istanbul" ]
}
}
}
這是增加了Element-ui和默認樣式的類庫插件
接下來，如果只需要引入部分組件，比如Button 和 InputNumber, 那么需要在main.js中寫入以下內容：
import { Button, InputNumber } from 'element-ui'
Vue.use(Button)
Vue.use(InputNumber)
4：使用
至此，一個基於 Vue 和 Element 的開發環境已經搭建完畢，現在就可以編寫代碼了。
安裝依賴：
$ cnpm install
啟動開發模式：
$ npm run dev
如果要編譯的話，使用：
$ npm run build
之后，就可以正常使用了。
5：測試
修改文件App.vue
通過增加三個按鈕和input-number，來測試用例。
<template>
<div id="app">
<img src="./assets/logo.png">
<router-view></router-view>
<el-button>默認按鈕</el-button>
<el-button type="primary">主要按鈕</el-button>
<el-button type="text">文字按鈕</el-button>
<el-input-number v-model="num1" @change="handleChange" :min="1" :max="10"></el-input-number>
<br />
<el-input placeholder="elinput輸入框">a</el-input>
<input placeholder="input輸入框">b</input>
</div>
</template>
<script>
export default {
name: 'app',
data() {
return {
num1: 1
};
},
methods: {
handleChange(value) {
console.log(value);
}
}
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
啟動
$npm run dev
顯示效果：
按需引入的效果。
完全引入的效果
這樣說明，我們可以在項目中，正常使用了。
6：總結
ElementUI組件官網，寫的很不錯。如果項目中遇到有什么不明白的地方，多看兩遍，也許會驚喜的發現問題答案。