Vue Cli 3 搭建一个可按需引入组件的组件库架子-白红宇

Ant-design、Element 这些框架都有按需引入组件的功能。需要使用哪个组件，就引入哪个组件，这样那些没必要的组件就不会打包到我们的项目里了。跟着我下边的步骤，相信大家也能搭建出一个按需引入的组件库。

创建一个 Vue 项目

vue create ui-demo复制代码

使用默认配置安装就 OK ?

安装 babel-plugin-component

npm i babel-plugin-component -D复制代码

babel-plugin-component 就是 Element UI 用来实现组件按需加载的一个 babel 插件。我们把它用到我们的组件库上，就不需要重新造一个轮子出来了。?

配置 .babelrc

在项目的根目录下创建一个 .babelrc 的文件，配置可以参照下面的代码进行更改。

{  "plugins": [    [      "component",      {        // 组件库的名字，需要和 package.json 里的 name 相同        "libraryName": "ui-demo",        // 存放组件的文件夹，如果不想配置此项，默认文件夹的名字为 lib        "libDir": "components",      }    ]  ]}复制代码

创建一个存放组件的文件夹

既然我们刚刚已经配置了存放组件的文件夹，下一步肯定就是创建这么一个文件夹了。由于我配置了的文件夹名为 components，所以我们的文件夹名字就是 components。

上面的操作完成后，我们的项目目录就基本搭建好了，如下：

写组件

终于到了写组件的时候了，在 components 文件夹下新建一个 Component1 的文件夹来存放我们的第一个组件。

Component1 文件夹里有一个 Component1.vue 的文件和一个 index.js 文件。目录如下：

Component1 -> Component1.vue 代码:


    复制代码

Component1 -> index.js代码：

import Component1 from './Component1.vue';Component1.install = function (Vue) {  Vue.component(Component1.name, Component1);}export default Component1;复制代码

index.js 中的主要功能就是以插件的形式注册一个全局组件，不懂的小伙伴可以照猫画虎，微调一下就好了。想了解的可以去这个链接看一下:

第二个组件代码就不发出来了，复制一份，给个 css 样式就好了。

在 components 文件夹根目录下创建一个 index.js 用来整合所有组件。

components -> index.js 代码：

import Compontent1 from './Component1/index'import Compontent2 from './Component2/index'const components = [  Compontent1,  Compontent2,]function install (Vue) {  components.map(component => {    Vue.component(component.name, component)  })}export default {  install,  Compontent1,  Compontent2,}复制代码

稍微提醒，需要把 install 也一起导出，观察不细心的可能会不注意就写漏了。?

修改或添加 package.json 中的配置

script 中添加一条命令：

"lib": "vue-cli-service build --target lib --name index --dest package components/index.js"复制代码

最后面的 components/index.js 是我们存放组件文件夹根目录的 index.js 文件，记得根据你的情况修改。这个命令执行后，会打包生成一个 package 的文件夹。

添加 files 白名单，打包上传哪些文件到 npm 上：

"files": [    "components",    "package"]复制代码

components 是我们存放组件的文件夹，package 是 lib 命令打包后生成的文件夹，我们只要把这两个文件夹发布就 OK 了。

添加 style，设置样式路径：

"style": "package/index.css"复制代码

路径就是我们打包出来的 package 中的 index.css 文件。

添加 main，设置入口：

"main": "components/index.js"复制代码

路径是存放组件的 components 文件夹下的 index.js 文件。

将 private 设置为 false：

"private": false复制代码

设置此项目不是私有项目之后，才能发布好 npm 上。

下面的是完整的 package.json 文件配置：

{  "name": "ui-demo",  "version": "0.1.0",  "private": false,  "main": "components/index.js",  "style": "package/index.css",  "files": [    "components",    "package"  ],  "scripts": {    "serve": "vue-cli-service serve",    "build": "vue-cli-service build",    "lint": "vue-cli-service lint",    "lib": "vue-cli-service build --target lib --name index --dest package components/index.js"  },  "dependencies": {    "core-js": "^2.6.5",    "vue": "^2.6.10"  },  "devDependencies": {    "@vue/cli-plugin-babel": "^3.7.0",    "@vue/cli-plugin-eslint": "^3.7.0",    "@vue/cli-service": "^3.7.0",    "babel-eslint": "^10.0.1",    "babel-plugin-component": "^1.1.1",    "eslint": "^5.16.0",    "eslint-plugin-vue": "^5.0.0",    "vue-template-compiler": "^2.5.21"  },  "eslintConfig": {    "root": true,    "env": {      "node": true    },    "extends": [      "plugin:vue/essential",      "eslint:recommended"    ],    "rules": {},    "parserOptions": {      "parser": "babel-eslint"    }  },  "postcss": {    "plugins": {      "autoprefixer": {}    }  },  "browserslist": [    "> 1%",    "last 2 versions"  ]}复制代码

打包我们的代码

在控制台执行 npm run lib 进行文件打包，打包完成后会多一个 package 文件夹。文件目录就变成如下的了：

发布 npm

# 这是登录，前提是你已经在 npm 注册了账号npm login# 发布到 npmnpm publish复制代码

由于名字已经被占用，演示就用我最近在写的那个项目进行演示了。

安装库

npm i vue95-ui复制代码

在 main.js 文件中引入这个库。

import Vue from 'vue'import App from './App.vue'// 全局注册// import vue95 from 'vue95-ui'// Vue.use(vue95);// 按需引入import { Button95, Bar95 } from 'vue95-ui'Vue.use(Button95);Vue.use(Bar95);Vue.config.productionTip = falsenew Vue({  render: h => h(App),}).$mount('#app')复制代码

这样我们就可以使用我们自己的 UI 库了。

可以对照着我这个的项目地址进行参考：

本人公众号❤

component1