在Vue項目中使用ElementUI(一)

初始化一個Vue項目

F:\Test>vue init webpack Test1
? Project name test1
? Project description A Vue.js project
? Author Selience <*********@qq.com>
? Vue build standalone
? Install vue-router? No
? Use ESLint to lint your code? No
? Set up unit tests No
? Setup e2e tests with Nightwatch? No
? Should we run `npm install` for you after the project has been created? (recommended) npm
 vue-cli · Generated "Test1".

版本說明 vue: ^2.5.2 webpack: ^3.6.0,

啓動Vue項目

cd Test1
npm run dev

下載ElementUI

npm install --save element-ui

按需引入ElementUI

有時候項目中只用到ElementUI中的幾個組件，全局引入會增長項目體積，因此按需引入更合適

引入

在 main.js中引入並註冊組件

import Vue from 'vue';
//引入按鈕組件（Button）和下拉選擇器組件（Select）
import { Button, Select } from 'element-ui';
import App from './App.vue';
//注意：樣式文件須要單獨引入
import 'element-ui/lib/theme-chalk/index.css';
//將引入的組件註冊爲全局Vue組件
Vue.component(Button.name, Button);
Vue.component(Select.name, Select);

/* 或寫爲
 * Vue.use(Button)
 * Vue.use(Select)
 */

new Vue({
  el: '#app',
  render: h => h(App)
});

使用

在上面，咱們已經將 Elementui組件註冊爲了 Vue組件，就能夠在 Vue頁面中使用組件，可是，須要注意的是，樣式文件須要單獨引入，上面已經引入了樣式文件，下面咱們就在 Vue頁面中使用一下吧！

在 app.vue中按照官網的例子使用 按鈕組件

<template>
  <div id="app">
        <el-button type="primary">主要按鈕</el-button>
        <el-button type="success">成功按鈕</el-button>
        <el-button type="info">信息按鈕</el-button>
        <el-button type="warning">警告按鈕</el-button>
        <el-button type="danger">危險按鈕</el-button>
  </div>
</template>

其餘組件基本與上面引入方法相似，不過也有區別，官網也有介紹，大部分組件都是以 import { XXXX } from 'element-ui'的方式引入，而後以 Vue.component(XXX.name, XXX);或者 Vue.use(XXX)的方式註冊，固然也有例外，

例如：Message消息提示組件

在 main.js引入

import {  Message } from 'element-ui

在 main.js註冊，這裏是掛在在 Vue原型上的

Vue.prototype.$message = Message;

使用

<template>
  <div id="app">
        <el-button type="primary" @click='clickBtn'>主要按鈕</el-button>
  </div>
</template>
<script>
export default {
  name: 'App',
  components: {
  },
  methods:{
    clickBtn:function(){
      this.$message({
          message:'這是一條提示信息'
        });
    }
  }
}
</script>

例如：MessageBox系列彈框

這一系列彈窗都依賴於 MessageBox組件

在 main.js引入

import {  MessageBox } from 'element-ui'

在 main.js註冊，這裏都是掛在在 Vue原型上的

Vue.prototype.$msgbox = MessageBox;
Vue.prototype.$alert = MessageBox.alert;
Vue.prototype.$confirm = MessageBox.confirm;
Vue.prototype.$prompt = MessageBox.prompt;

消息提示彈框--當用戶進行操做時會被觸發，該對話框中斷用戶操做，直到用戶確認知曉後纔可關閉。

clickBtn:function(){
      this.$alert('這是一段內容', '標題名稱', {
          confirmButtonText: '肯定',
          //點擊肯定後的回調函數
          callback: action => {
         
          }
      });
    }

確認消息彈框--提示用戶確認其已經觸發的動做，並詢問是否進行此操做時會用到此對話框。。

clickBtn:function(){
      this.$confirm('這是用戶提示語', '這是標題', {
          //肯定按鈕文本
          confirmButtonText: '肯定',
          //取消按鈕文本
          cancelButtonText: '取消',
          //彈框類型（success、error、info）
          type: 'warning'
        })
        //點擊肯定後的回調函數
        .then(() => {     })
        // 點擊取消後的回調函數
        .catch(() => {     });
    }

提交內容彈框--當用戶進行操做時會被觸發，中斷用戶操做，提示用戶進行輸入的對話框

clickBtn:function(){
      this.$prompt('提示語', '標題', {
          confirmButtonText: '肯定',
          cancelButtonText: '取消',
        })
        //肯定回調函數
        .then(() => { })
        //取消回調函數
        .catch(() => { });
    }

彈框--可自定義配置不一樣內容。

clickBtn:function(){
      this.$msgbox({
          title: '標題',
          message: '提示信息',
          // 彈框類型
          type:'error',
          //右上角是否顯示關閉按鈕
          showCancelButton: true,     
          confirmButtonText: '肯定',
          cancelButtonText: '取消',
          //彈窗關閉前回調函數
          beforeClose: (action, instance, done) => {   }
        })
        //肯定回調函數
        .then(action => { });
    }

固然以上航都是比較簡單的例子，還有以HTML片斷爲彈出內容的，還有這種屬性和方法已經周期函數，更多用法請參考 ElementUI官網

注意點

2019.07.20更新：以前在按需引入 elementui的時候，沒有注意到官網的介紹，漏了一部分

雖然漏了上面那部分，沒有使用 babel-plugin-component插件，可是按需引入的組件也可正常使用，這我就鬱悶了，難道是由於這是針對 3.0的？可是我又把官網文檔調到2.0版本的，仍是這麼介紹的，emmmmmm..........,後又一想，既然按需引入是爲了減少體積，那會不會是這個 babel-plugin-component是打包的時候才按需打包引入組件的資源，在 npm run dev時是看不出效果的，因而，實驗了一下

不使用babel-plugin-component插件打包

使用babel-plugin-component插件打包

首先下載 babel-plugin-component插件

npm install babel-plugin-component --dev

配置 .babelrc文件，這裏注意不要直接複製官網的配置覆蓋原有配置，正確的作法是將官網配置添加到原有配置,配置完後記得重啓項目哦

{
  "presets": [
    ["env", {
      "modules": false,
      "targets": {
        "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
      }
    }],
    "stage-2"
  ],
  "plugins": [
    "transform-vue-jsx",
    "transform-runtime",
    //添加以下部分
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}

打包

能夠看到大小差異仍是很大的

全局引入

當咱們在項目使用 ElementUI組件比較多時，就能夠全局引入，方便省事兒

引入

在 main.js中添加如下代碼全局引入

//引入elementui
import ElementUI from 'element-ui'
//樣式須要單獨引入
import 'element-ui/lib/theme-chalk/index.css'
//掛載
Vue.use(ElementUI)

使用

在 app.vue中

<template>
  <div id="app">
        <el-button type="primary" @click='clickBtn'>主要按鈕</el-button>
  </div>
</template>

相比按需引入，全局引入確實方便不少