vue组件库(Element UI)

 

目录

1. 什么是 vue 组件库

2. vue 组件库和 bootstrap 的区别 

3. 最常用的 vue 组件库 

4. Element UI 

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

4.2 引入 element-ui

4.3 完整引入

4.4 按需引入 

步骤1，安装babel-plugin-component：​编辑

步骤2，修改根目录下的babel.config.js 配置文件，新增plugins 节点如下：​编辑 

步骤3，如果你只希望引入部分组件，比如Button，那么需要在 main.js 中写入以下内容：​编辑 

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

---

1. 什么是 vue 组件库

在实际开发中，前端开发者可以把自己封装的.vue 组件整理、打包、并发布为npm 的包，从而供其他人下载 和使用。这种可以直接下载并在项目中使用的现成组件，就叫做vue 组件库。 

2. vue 组件库和 bootstrap 的区别 

二者之间存在本质的区别：

bootstrap 只提供了 纯粹的原 材 料 （ css 样式、 HTML 结构以及 JS 特效），需要由开发 者 做 进 一 步的 组 装 和 改造

vue 组件库 是 遵循 vue 语法 、 高度定制 的现成 组 件， 开 箱 即 用

 

3. 最常用的 vue 组件库 

①  PC 端

Element UI （https://element.eleme.cn/#/zh-CN）

View UI （ View Design - 基于 Vue.js 3 的企业级 UI 组件库和前端解决方案 ）

②  移动端

Mint UI （ http://mint-ui.github.io/#!/zh-cn ）

Vant （https://vant-contrib.gitee.io/vant/#/zh-CN/）

 

4. Element UI 

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

vue2 的项目使 用 旧版 的 Element UI （https://element.eleme.cn/#/zh-CN）

vue3 的项目使 用 新版 的 Element Plus （https://element-plus.gitee.io/#/zh-CN）

 

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

运行如下的终端命令：

4.2 引入 element-ui

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

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

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

 

4.3 完整引入

在 main.js 中写入以下内容：

 

4.4 按需引入 

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

步骤1，安装babel-plugin-component：

步骤2，修改根目录下的babel.config.js 配置文件，新增plugins 节点如下： 

步骤3，如果你只希望引入部分组件，比如Button，那么需要在 main.js 中写入以下内容： 

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

在 src 目录下新建element-ui/index.js 模块，并声明如下的代码：