【vue】Vue Cli3 搭建一个可按需引入组件的组件库

Ant-design、Element 这些框架都有按需引入组件的功能。需要使用哪个组件，就引入哪个组件，这样那些没必要的组件就不会打包到我们的项目里了。

创建项目

vue init com-test

安装babel-plugin-component

npm i -D babel-plugin-component

babel-plugin-component 就是 Element UI 用来实现组件按需加载的一个 babel 插件。

.babelrc

在根目录下新建.babelrc文件,内容为：

{
  "plugins": [
    [
      "component",
      {
        // 组件库的名称， 和 package.json 里的 name 相同
        "libraryName": "test-compon", 
        // 存放组件的文件夹，如果不想配置此项，默认文件夹的名字为 lib
        "libDir": "lib"
      }
    ]
  ]
}

lib文件夹

• lib
  • components
    • test1
      • src
        • test1.vue
      • index.js
    • test2
      • src
        • test2.vue
      • index.js
  • index.js

组件

test1.vue

<template>
  <div class="test1">test1</div>
</template>
<style lang='less' scoped>
.test1{
  color: red;
}
</style>

test1/index.js, 内容的主要作用以插件的形式注册一个全局组件

import component1 from './src/test1.vue'

component1.install = function (Vue) {
  console.info('component1----install----')
  Vue.component(component1.name, component1)
}

export default component1

test2文件夹和test1类似

lib/index.js

import Test1 from './components/test1/index'
import Test2 from './components/test2/index'
const components = [
  Test1,
  Test2
]
function install (Vue) {
  components.map(component => {
    Vue.component(component.name, component);
  });
}
if (typeof window !== 'undefined' && window.Vue) {
  install(window.Vue);
}
export {
  install,
  Test1,
  Test2
}
export default {
  install,
  Test1,
  Test2
}

package.json

{
  "name": "test-compon",
  "version": "0.0.1",
  "private": false,
  "main": "lib/index.js",
  "style": "package/index.css",
  "files": [
    "package",
    "lib"
  ],
  "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 lib/index.js"
  },
  "dependencies": {
    "core-js": "^3.6.5",
    "test-compon": "^0.0.6",
    "vue": "^2.6.11"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "babel-eslint": "^10.1.0",
    "babel-plugin-component": "^1.1.1",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^6.2.2",
    "less": "^3.12.2",
    "less-loader": "^7.1.0",
    "vue-template-compiler": "^2.6.11"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "babel-eslint"
    },
    "rules": {}
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}

这里需要注意几个点:

1. 添加 style，设置样式路径: package/index.css

2. 添加 main，设置入口: lib/index.js

3. lib 是我们存放组件的文件夹，package 是 lib 命令打包后生成的文件夹，lib命令 是用来打包lib下面的文件到package文件夹里面

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

打包和发布

npm run lib

打包lib代码， 打包完成后会多一个 package 文件夹

npm login

npm publish

使用

npm i test-compon

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

import Vue from 'vue'
import App from './App.vue'
// 全局注册
import testCom from 'test-compon'
Vue.use(testCom);
 
// 按需引入
import {Test1, Test2} from 'test-compon'
Vue.component(Test1.name, Test1)
Vue.component(Test2.name, Test2)
// 或者是单独在使用的页面引用
 
Vue.config.productionTip = false
 
new Vue({
  render: h => h(App),
}).$mount('#app')