Vue Cli 3 搭建一个可按需引入组件的组件库架子
Ant-design、Element 这些框架都有按需引入组件的功能。需要使用哪个组件，就引入哪个组件，这样那些没必要的组件就不会打包到我们的项目里了。跟着我下边的步骤，相信大家也能搭建出一个按需引入的组件库。
创建一个 Vue 项目
vue create ui-demo使用默认配置安装就 OK ?
安装 babel-plugin-component
npm i babel-plugin-component -Dbabel-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 库了。
腾讯云开发者
