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

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。

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

image

写组件

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

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

image

Component1 -> Component1.vue 代码:

<template> <h1 class="component1">component1</h1> </template> <script> export default { name: 'Component1' } </script> <style> .component1 { color: green; } </style>

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) }) } if (typeof window !== 'undefined' && window.Vue) { install(window.Vue); } 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 文件夹。文件目录就变成如下的了：

image

发布 npm

# 这是登录，前提是你已经在 npm 注册了账号 npm login # 发布到 npm npm 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 = false new Vue({ render: h => h(App), }).$mount('#app')

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

---来自腾讯云社区的---stys35