Element-UI 入门

               https://element.eleme.c[官网：]

基本用法

1.初始化项目

                vue create element-test

2.安装

                npm i element-ui -S

3.Vue 插件

		        import ElementUI from 'element-ui'
		        Vue.use(ElementUI)

4.引用样式

       import 'element-ui/lib/theme-chalk/index.css'

5.element-ui 案例

按需加载

对项目进行打包：

                     npm run build

发现 vendors 库高达 789KB

-rw-r--r--  1 sam  staff   789518 10 27 20:40 chunk-vendors.cd583f5b.js

这是由于我们未使用按需加载，所以对 element-ui 进行全量打包的结果，按需加载的用法如下：

	1.安装 babel-plugin-component  npm install 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.按需引入 Button 和 Message  （style引用可以去掉）
	
		import { Button, Message } from 'element-ui'
		Vue.component(Button.name, Button)
		Vue.prototype.$message = Message     

重新构建，vendors 体积减小到 113KB

 -rw-r--r--  1 sam  staff  113282 10 27 20:50 chunk-vendors.3d7d02b2.js

插件引用

                   vue add element