原文地址:https://blog.csdn.net/crazy_jialin/article/details/80435213
本文講述一下在vue項目中搭建element-ui框架,並實現模塊的按需加載。
準備工作:在此之前,需要大家搭建一個簡單的vue+webpack項目,本文講述的操作是基於這個項目的,所以,需要大家準備一下,具體操作步驟請參考博客( https://blog.csdn.net/crazy_jialin/article/details/80422964 )。
第一步:安裝element-ui
$ npm install -S element-ui
第二步:使用babel-plugin-component來實現element-ui模塊按需加載
$ npm install babel-plugin-component -D
然後,在 .babelrc的plugins中添加element-ui組件配置:
[
"component",
{
"libraryName": "element-ui",
"styleLibraryName": "theme-chalk"
}
]
使用:
經過以上配置之後,我們就可以按照自己需求來引用element-ui的組件了(具體配置項選項請參考element-ui官方文檔:http://element-cn.eleme.io/#/zh-CN/component/quickstart)
這裏使用幾個模塊作爲示例:
1. 在main.js引用需要的模塊(你也可以在你需要的組件內部引用)
import Vue from 'vue'
import {Row,Col,Button,Notification,Message} from 'element-ui' //按需引用element-ui組件
//將element組件內容掛載到Vue上
Vue.use(Row);
Vue.use(Col);
Vue.use(Button);
Vue.prototype.$notify = Notification;
Vue.prototype.$message = Message;
import App from './App'
import router from './router/index.js'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
2、 在APP.vue中使用引用的模塊(可以在APP.vue以及內部其他組件使用)
<template>
<div id="app">
<img src="./assets/logo.png">
<!-- 使用col和button組件 -->
<el-row>
<el-button>默認按鈕</el-button>
<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>
</el-row>
<router-view/>
</div>
</template>
<script>
export default {
name: 'App',
mounted(){
//使用Message組件
this.$message({
type:'success',
message:'element-ui安裝成功'
});
//使用Message組件
this.$notify({
title: '成功',
message: 'element-ui安裝成功',
type: 'success'
});
}
}
</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>
3、這樣,把項目跑起來($ npm run dev)後,瀏覽器打開localhost:8080,看到如下畫面,logo下的button組件,提示和通知的Message、Notification組件,說明配置成功了