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 代码:

<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)
  })
}

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
# 发布到 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 库了。

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

github.com/didadi599/v…

本人公众号❤