Vue组件库

什么是vue组件库

在实际开发中，由开发者自己封装的.vue组件经过整理、打包并发布成npm包，这种现成的组件就叫vue组件库。

vue组件库和bootstrap的区别

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

• vue组件库是遵循vue语法，高度定制的现成组件

哪些是vue组件库

1. PC端

• Element UI

• View UI

2. 移动端

• Mint UI

• Vant

Element-UI

1. vue2vue3的区别

• vue2使用旧版Element-UI

• vue3使用新版Element-Plus

2. vue2下安装

npm i element-ui -S

3. 完整引入

import ElementUI from 'element-ui';

import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

4. 按需引入

1. 安装babel-plugin-component

npm i babel-plugin-component -D

2. 在babel.config.js中进行配置

plugins: [

[

"component",

{

libraryName: "element-ui",

styleLibraryName: "theme-chalk"

}

]

]

3. 创建element-ui/index.js:

import { Button } from 'element-ui';

import Vue from 'vue';

Vue.use(Button);

4. 在main.js中导入：

import './element-ui'

参考：

Vue3.0-08.组件库 -
组件库的概念以及常用的vue组件库

Vue3.0-09.组件库 -
完整引入element-ui

Vue3.0-10.组件库 -
按需引入element-ui

Vue3.0-11.组件库 -
把element-ui组件的导入和注册封装为独立的模块