element-ui组件库

PC端组件库参考: www.jianshu.com/p/669d3e41d…
element 官网 element.eleme.cn/#/zh-CN

1, 下载安装组件库

cnpm i element-ui 

2, 两种引入方式: 完整引入: 在main.js文件中引入如下三句代码

import ElementUI from 'element-ui';
	import 'element-ui/lib/theme-chalk/index.css';
	Vue.use(ElementUI);

按需引入: 下载安装插件 babel-plugin-component

cnpm i babel-plugin-component --save

在balbel.config.js文件中添加plugins字段

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

在main.js中按需导入需要的组件

import { Button, Switch } from 'element-ui';
	Vue.use(Button);
	Vue.use(Switch);

在组件中直接使用组件标签即可

<el-button type="danger" icon="el-icon-delete" circle></el-button>

注意: 有几个特殊的使用如下

Vue.use(Loading.directive);

Vue.prototype.$loading = Loading.service; 
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;