vue按需引入element-ui组件

vue按需引入element-ui组件

1.安装 cnpm i babel-plugin-component -D // 开发依赖
2.在babel.config.js中添加代码,如下:

	module.exports = {
	  presets: ["@vue/cli-plugin-babel/preset"],
	  plugins: [
	    [
	      "component",
	      {
	        libraryName: "element-ui",
	        styleLibraryName: "theme-chalk"
	      }
	    ]
	  ]
	};

3.在src文件夹里新建一个utils文件夹,在utils文件夹中新建一个index.js

	import Vue from "vue";
	import {
	  Pagination,
	  Dialog,
	  MessageBox,
	  Notification,
	  Message
	} from "element-ui";
	
	Vue.use(Pagination);
	Vue.use(Dialog);
	
	Vue.prototype.$msgbox = MessageBox;
	Vue.prototype.$alert = MessageBox.alert;
	Vue.prototype.$confirm = MessageBox.confirm;
	Vue.prototype.$prompt = MessageBox.prompt;
	Vue.prototype.$notify = Notification;
	Vue.prototype.$message = Message;

4.在main.js文件引入index.js以及element样式

	import "./utils/index";
	import "element-ui/lib/theme-chalk/index.css";

完成按需引入element组件,绝对纯手打,谢谢!~

你可能感兴趣的:(vue)