【Vue UI组件库】

1 移动端常用UI组件库

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

2 PC端常用UI组件库

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

2.1 Element UI

• npm安装：npm i element-ui -S
• 引入ElementUI：
  1> 完整引入：在 main.js 中写入以下内容
  import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
  
  2> 按需引入：借助 babel-plugin-component，我们可以只引入需要的组件，以达到减小项目体积的目的。
  ① 首先，安装 babel-plugin-component：npm install babel-plugin-component -D
  ② 然后，将 babel.config.js 文件修改为：
  
  ③ 接下来，如果你只希望引入部分组件，比如 Button、Row、DatePicker，那么需要在 main.js 中写入以下内容：
  // 按需引入
import { Button, Row, DatePicker } from 'element-ui';
// 使用
Vue.component(Button.name, Button);
Vue.component(Row.name, Row);
Vue.component(DatePicker.name, DatePicker);
// 或写为
Vue.use(Button)
Vue.use(Row)
Vue.use(DatePicker)
  ④ 报错Error: Cannot find module ‘babel-preset-es2015’
  
  解决方法：把 babel.config.js 文件中的 es2015 改为 @babel/preset-env 即可。（ 原因是旧版本的脚手架用的是 es2015，新版本不再适用，而官网没有及时更新。）
  
• 使用ElementUI：