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…

本人公衆號❤