在Vue框架中引入Element

文章會講到如何在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>

結果：