Vue项目按需引入element-ui组件

参照vue按需引入Element UI的方法 - gitByLegend - 博客园这篇博客自己重新做了一遍

在做vue项目的时候我们一般搭配框架来写，element-ui是一个不错的前端框架的，但是为了项目轻量化，我们一般只按需引入局部的element-ui组件，以达到减小项目体积的目的

参考element-ui官网的按需引入

第一步输入如下命令

vue add element

这一步是让我们选择全部引入还是按需引入，选择 Import on demand

选择zh-CN

 

 安装好后src下多了一个plugins文件夹，并多了一个element.js

element.js

babel.config.js也自动添加了如下红框代码 

main.js里也多了如下红框引用 

第二步我们需要对element.js稍作修改

element.js代码

// element-ui按需加载
import Vue from 'vue';
import {Notification,CarouselItem,Carousel,Message,MessageBox,Button,Form,FormItem,Select,Option,
OptionGroup,Input,Tree,Dialog,Row,Col} from 'element-ui';

const element = {
  install:function(Vue){
    Vue.use(Select)
    Vue.use(Option)
    Vue.use(OptionGroup)
    Vue.use(Input)
    Vue.use(Tree)
    Vue.use(Dialog)
    Vue.use(Row)
    Vue.use(Col)
    Vue.use(Form)
    Vue.use(FormItem)
    Vue.use(Button)
    Vue.use(Carousel)
    Vue.use(CarouselItem)
  }
}
Vue.prototype.$alert = MessageBox.alert;
Vue.prototype.$msgbox = MessageBox;
Vue.prototype.confirm = MessageBox.confirm;
Vue.prototype.$prompt = MessageBox.prompt;
Vue.prototype.$notify = Notification;
Vue.prototype.$message = Message;
export default element

同时在main.js也稍作改动

main.js代码

import Vue from "vue";
import "element-ui/lib/theme-chalk/index.css"; //element样式文件必须引入
import element from "@/plugins/element";

Vue.use(element);

在测试的cs.vue文件中

 this.$alert('hhh！','error',{
          confirmButtonText:'ok'
        })

页面效果

此时代表element组件按需引入成功