vue组件库介绍以及组件库Element UI 的使用

组件库

前言

这篇文章介绍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/）

② 移动端

• 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

运行如下的终端命令：

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'

写在最后

✨个人笔记博客✨

星月前端博客
https://xingyue.vercel.app/

✨原创不易，还希望各位大佬支持一下

点赞，你的认可是我创作的动力！

⭐️ 收藏，你的青睐是我努力的方向！

✏️评论，你的意见是我进步的财富！