目录
步骤1,安装babel-plugin-component:编辑
步骤2,修改根目录下的babel.config.js 配置文件,新增plugins 节点如下:编辑
步骤3,如果你只希望引入部分组件,比如Button,那么需要在 main.js 中写入以下内容:编辑
1. 什么是 vue 组件库
在实际开发中,前端开发者可以把自己封装的.vue 组件整理、打包、并发布为npm 的包,从而供其他人下载 和使用。这种可以直接下载并在项目中使用的现成组件,就叫做vue 组件库。
2. vue 组件库和 bootstrap 的区别
二者之间存在本质的区别:
bootstrap
只提供了
纯粹的原
材
料
(
css
样式、
HTML
结构以及
JS
特效),需要由开发
者
做
进
一
步的
组
装
和
改造
vue
组件库
是
遵循
vue
语法
、
高度定制
的现成
组
件,
开
箱
即
用
3. 最常用的 vue 组件库
① PC 端
② 移动端
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 模块,并声明如下的代码: