文章會講到如何在Vue框架中引入Element

那我們先來說一下Vue框架：Vue是漸進式，JavaScript框架。很多人不理解什麽是漸進式，簡單點講就是易用、靈活、高效（沒有太多限制）

這裏介紹npm安裝方式：

打開cmd，找到你Vue項目的路徑

運行

npm i element-ui -S

然後在main.js裏寫入以下內容：

import Vue from ‘vue‘;
import ElementUI from ‘element-ui‘;
import ‘element-ui/lib/theme-chalk/index.css‘;
import App from ‘./App.vue‘;

Vue.use(ElementUI);
 
　　//不要忽略

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

以上代碼便完成了 Element 的引入。需要註意的是，樣式文件需要單獨引入。

按需引入

借助 babel-plugin-component，我們可以只引入需要的組件，以達到減小項目體積的目的。

首先，安裝 babel-plugin-component：

npm install babel-plugin-component -D

然後，將 .babelrc 修改為：

{
  "presets": [["es2015", { "modules": false }]],
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}
 

Element官網有很多例子，這裏我隨便挑一兩個給大家做示範。

在Vue.app裏面寫入以下內容：

1.

<el-row>
  <el-button round>圓角按鈕</el-button>
  <el-button type="primary" round>主要按鈕</el-button>
  <el-button type="success" round>成功按鈕</el-button>
  <el-button type="info" round>信息按鈕</el-button>
 

  <el-button type="warning" round>警告按鈕</el-button>
  <el-button type="danger" round>危險按鈕</el-button>
</el-row>

結果：

2.

<div class="block">
  <span class="demonstration">有默認值</span>
  <el-color-picker v-model="color1"></el-color-picker>
</div>
<div class="block">
  <span class="demonstration">無默認值</span>
  <el-color-picker v-model="color2"></el-color-picker>
</div>

<script>
  export default {
    data() {
      return {
        color1: ‘#409EFF‘,
        color2: null
      }
    }
  };
</script>

結果：

3.

<el-pagination
  background
  layout="prev, pager, next"
  :total="1000">
</el-pagination>

結果：

在Vue框架中引入Element