---

组件库

1. 什么是 vue 组件库

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

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

2. 最常用的 vue 组件库

1. PC 端
   
   
2. 移动端
   
   

（以 Element UI 为例）

3. Element UI

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

3.1 在 vue2 的项目中安装

npm i element-ui -S
1

3.2 引入 element-ui

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

完整引入：操作简单，但是会额外引入一些用不到的组件，导致项目体积过大
按需引入：操作相对复杂一些，但是只会引入用到的组件，能起到优化项目体积的目的

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

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

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

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

在main.js中导入

import './element/index.js'
1