Vuejs實例-02Vue.js項目集成ElementUI

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組件官網，寫的很不錯。若是項目中遇到有什麼不明白的地方，多看兩遍，也許會驚喜的發現問題答案。

7：源碼

Vuejs實例-Vuejs2.0全家桶結合ELementUI製做後臺管理系統
git項目源碼