vue学习笔记（五）之 Vue UI组件库

一提到组件库，需要考虑两个问题：
1、基于哪个框架？ Vue、React。。。
2、PC端还是移动端？

移动端常用 UI 组件库

1. Vant ：https://youzan.github.io/vant
2. Cube UI： https://didi.github.io/cube-ui
3. Mint UI ：http://mint-ui.github.io

PC 端常用 UI 组件库

1. Element UI： https://element.eleme.cn
2. IView UI： https://www.iviewui.com

Element使用

安装：npm i element-ui

1、引入

（1）完整引入

在main.js中：

		// 引入vue
		import Vue from 'vue'
		// 引入App
		import App from './App.vue'
		// 引入ElementUI组件库
		import ElementUI from 'element-ui';
		// 引入ElementUI的全部样式
		import 'element-ui/lib/theme-chalk/index.css';
		// 关闭生产提示
		Vue.config.productionTip = false
		// 应用ElementUI
		Vue.use(ElementUI);
		
		// 创建vm
		new Vue({
		    el:'#app',
		    render: h => h(App),
		})

但是这种方式是把 所有element UI的全部样式和全部组件都引入了，内存消耗大

（2）按需引入

借助 babel-plugin-component，我们可以只引入需要的组件，以达到减小项目体积的目的。

1. 安装：npm install babel-plugin-component -D
2. 修改babel.config.js：

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

3. 引入

	// 引入vue
	import Vue from 'vue'
	// 引入App
	import App from './App.vue'
	// 按需引入
	import { Button, Row,DatePicker } from 'element-ui';	
	// 关闭生产提示
	Vue.config.productionTip = false
	// 应用ElementUI
	// Vue.use(ElementUI);
	Vue.component(Button.name, Button);
	Vue.component(Row.name, Row);
	Vue.component(DatePicker.name, DatePicker);
	// 创建vm
	new Vue({
	    el:'#app',
	    render: h => h(App),
	})

4. 在打包时（npm run serve）,可能会提示 cannot find XXX.
   此时只要 npm i XXX 即可

2、使用

	<template>
	  <div>
	   <button>原生按钮</button>
	   <input type="text">
	   <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>
	   <el-date-picker
	      type="date"
	      placeholder="选择日期">
	    </el-date-picker>
	  </div>
	</template>