组件库
前言![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/ff6d39210dbc5f9f00a5d3b2df88324c.png)
这篇文章介绍vue组件库!
介绍什么是组件库以及Element UI组件库的使用!
看完不会你打我。哈哈哈,开玩笑的,不多说,上刺刀!!
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(http://v1.iviewui.com/)
② 移动端
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
运行如下的终端命令:
npm i element-ui -S
4.2 引入 element-ui
开发者可以一次性完整引入所有的 element-ui 组件,或是根据需求,只按需引入用到的 element-ui 组件:
- 完整引入:操作简单,但是会额外引入一些用不到的组件,导致项目体积过大
- 按需引入:操作相对复杂一些,但是只会引入用到的组件,能起到优化项目体积的目的
4.3 完整引入
在 main.js 中写入以下内容:
import Vue from 'vue'
import App from './App.vue'
import router from './router'
// 完整引入 ElementUI
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
// 把组件注册为 vue 的插件,可以在全局使用
Vue.use(ElementUI)
new Vue({
router,
render: h => h(App)
}).$mount('#app')
4.4 按需引入
借助 babel-plugin-component,我们可以只引入需要的组件,以达到减小项目体积的目的。
步骤1,安装 babel-plugin-component:
npm install babel-plugin-component -D
步骤2,修改根目录下的 babel.config.js 配置文件,新增 plugins 节点如下:
{
"presets": [["es2015", { "modules": false }]],
"plugins": [
[
"component",
{
"libraryName": "element-ui",
"styleLibraryName": "theme-chalk"
}
]
]
}
步骤3,如果你只希望引入部分组件,比如 Button,那么需要在 main.js 中写入以下内容:
import Vue from 'vue';
import { Button, Select } from 'element-ui';
import App from './App.vue';
Vue.component(Button.name, Button);
Vue.component(Select.name, Select);
/* 或写为
* Vue.use(Button)
* Vue.use(Select)
*/
new Vue({
el: '#app',
render: h => h(App)
});
4.5 把组件的导入和注册封装为独立的模块
1.在 src 目录下新建 element-ui/index.js 模块,并声明如下的代码:
import Vue from 'vue'
// 完整引入 ElementUI
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)
// 按需引入组件
import { Button,Input} from 'element-ui';
// 按需注册组件
Vue.use(Button)
Vue.use(Input)
2.然后在main.js中引入这个js文件:
// 引入 ElementUI 这个模块
import './element-ul/index.js'
写在最后
✨个人笔记博客✨
星月前端博客
http://blog.yhxweb.top/
✨原创不易,还希望各位大佬支持一下
👍 点赞,你的认可是我创作的动力!
⭐️ 收藏,你的青睐是我努力的方向!
✏️评论,你的意见是我进步的财富!