Vue UI 组件库（移动端常用 UI 组件库，PC 端常用 UI 组件库，Element UI基本使用，Element UI按需引入）

Vue UI 组件库

UI 组件库 就是给我们提供一些常用的布局，按钮，下拉框等等一些常用的元素，把这些元素以组件的方式给我们

7.1 移动端常用 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

7.2 PC 端常用 UI 组件库

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

7.3 Element UI基本使用

查阅官网文档 https://element.eleme.cn/#/zh-CN/component/installation

1. 安装 npm i element-ui

2. 在main.js 里面添加

   // 引入ElementUI组件库
   import ElementUI from 'element-ui';
   // 引入ElementUI全部样式
   import 'element-ui/lib/theme-chalk/index.css';
   
   // 应用
   Vue.use(ElementUI);
   
   1
   2
   3
   4
   5
   6
   7
   8

3. 在官方文档里面找到自己想要的部分

按钮写起来比较容易，如果复杂一点的自己可能就没别人提供的写得好

不需要把整个文档看完，用的时候去查就可以

7.4 Element UI按需引入

按照刚刚的引入方式，把所有的样式都引入进来了，会造成文件大的离谱

解决办法？—按需引入

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

2. 首先，安装 babel-plugin-component：npm install babel-plugin-component -D

3. 然后，将 .babelrc （(我们这里就是babel.config.js文件)）修改为：（不是全部替换）

{
  "presets": [["es2015", { "modules": false }]],
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}
1
2
3
4
5
6
7
8
9
10
11
12

写好的代码：

4. 接下来，如果你只希望引入部分组件，比如 Button 和 Select，那么需要在 main.js 中写入以下内容：

import Vue from 'vue';
import { Button, Select } from 'element-ui';
import App from './App.vue';

Vue.component(Button.name, Button);
Vue.component(Select.name, Select);
/* 或写为
 * Vue.use(Button)
 * Vue.use(Select)
 */

new Vue({
  el: '#app',
  render: h => h(App)
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

平时可以大致看看文档里面提供了我们哪些样式，以后要去用的时候就有印象可以去顺利找到直接cv使用

vue2结束？？？并没有，还需要码大量的代码支撑
vue3学习也会开始！！！先处理好vue2，晚安
🤗🤩🤔🤨😮😥😣😪😴