组件库

1. 什么是 vue 组件库

在实际开发中，前端开发者可以把自己封装的 .vue 组件整理、打包、并发布为 npm 的包，从而供其他人下载和使用。

这种可以直接下载并在项目中使用的现成组件，就叫做 vue 组件库。

2. 最常用的 vue 组件库

1. PC 端
   Element UI
   View UI
2. 移动端
   Mint UI
   Vant

（以 Element UI 为例）

3. Element UI

Element UI 是饿了么前端团队开源的一套 PC 端 vue 组件库。支持在 vue2 和 vue3 的项目中使用：

vue2 的项目使用旧版的 Element UI

vue3 的项目使用新版的 Element Plus

3.1 在 vue2 的项目中安装 element-ui

npm i element-ui -S

3.2 引入 element-ui

开发者可以一次性完整引入所有的 element-ui 组件，或是根据需求，只按需引入用到的 element-ui 组件：

完整引入：操作简单，但是会额外引入一些用不到的组件，导致项目体积过大

按需引入：操作相对复杂一些，但是只会引入用到的组件，能起到优化项目体积的目的

(Vue3 网页进不去，以Vue2为例)

引入 element-ui

4. 把组件的导入和注册封装为独立的模块

在 src 目录下新建 element-ui/index.js 模块。

import Vue from 'vue'
// 按需导入element-ui组件
import { Button, Input } from 'element-ui'
// 注册需要的组件
Vue.use(Button)
Vue.use(Input)

在main.js中导入

import './element/index.js'