Vue cli3 庫模式搭建組件庫並發布到 npm

1、創建項目
在指定目錄中使用命令創建一個默認的項目，或者根據自己需要自己選擇。

$ vue create .
2、調整目錄
我們需要一個目錄存放組件，一個目錄存放示例，按照以下方式對目錄進行改造。

.
…
|-- examples // 原 src 目錄，改成 examples 用作示例展示
|-- packages // 新增 packages 用於編寫存放組件
…
.

 

 

 

 

 

 

四、配置項目以支持新的目錄結構
我們通過上一步的目錄改造后，會遇到兩個問題。

src目錄更名為examples，導致項目無法運行
新增packages目錄，該目錄未加入webpack編譯
注：cli3 提供一個可選的 vue.config.js 配置文件。如果這個文件存在則他會被自動加載，所有的對項目和webpack的配置，都在這個文件中。

1、重新配置入口，修改配置中的 pages 選項
新版 Vue CLI 支持使用 vue.config.js 中的 pages 選項構建一個多頁面的應用。

這里使用 pages 修改入口到 examples

module.exports = {
// 修改 src 目錄 為 examples 目錄

 pages: {

        index: {

            entry: 'examples/main.js',

            template: 'public/index.html',

            filename: 'index.html'

        }

    },

2、支持對 packages 目錄的處理，修改配置中的 chainWebpack 選項
packages 是我們新增的一個目錄，默認是不被 webpack 處理的，所以需要添加配置對該目錄的支持。

chainWebpack 是一個函數，會接收一個基於 webpack-chain 的 ChainableConfig 實例。允許對內部的 webpack 配置進行更細粒度的修改。

module.exports = {
// 修改 src 為 examples
pages: {
index: {
entry: 'examples/main.js',
template: 'public/index.html',
filename: 'index.html'
}
},
// 擴展 webpack 配置，使 packages 加入編譯

 chainWebpack: config => {

        config.module

            .rule('js')

            .include

            .add(__dirname + 'packages')

            .end()

            .use('babel')

            .loader('babel-loader')

            .tap(options => {

                // 修改它的選項...

                return options

            })

    }

 

 

 

五、編寫組件
以上我們已配置好對新目錄架構的支持，接下來我們嘗試編寫組件。以下我們以一個已發布到 npm 的小插件作為示例。

GitHub – element-ui 中的dialog：vue-custom-dialog

創建一個新組件
在 packages 目錄下，所有的單個組件都以文件夾的形式存儲，所有這里創建一個目錄 dialog-custom/
在 dialog-custom/  下編輯組件代碼 

 

 

在 dialog-custom/ 目錄下創建 index.js 文件對外提供對組件的引用。

 

 

整合所有的組件，對外導出，即一個完整的組件庫
修改 /packages/index.js 文件，對整個組件庫進行導出。

 

 

 

 

六、發布到 npm，方便直接在項目中引用
到此為止我們一個完整的組件庫已經開發完成了，接下來就是發布到 npm 以供后期使用。

1、package.json 中新增一條編譯為庫的命令
在庫模式中，Vue是外置的，這意味着即使在代碼中引入了 Vue，打包后的文件也是不包含Vue的。

Vue Cli3 構建目標：庫

以下我們在 scripts 中新增一條命令 npm run lib

–target: 構建目標，默認為應用模式。這里修改為 lib 啟用庫模式。
–dest : 輸出目錄，默認 dist。這里我們改成 lib
[entry]: 最后一個參數為入口文件，默認為 src/App.vue。這里我們指定編譯 packages/ 組件庫目錄。
“scripts”: {
// …

"lib": "vue-cli-service build --target lib --name dialogcustom --dest lib packages/index.js"

}

 

 

執行編譯庫命令

$ npm run lib

2、配置 package.json 文件中發布到 npm 的字段
name: 包名，該名字是唯一的。可在 npm 官網搜索名字，如果存在則需換個名字。
version: 版本號，每次發布至 npm 需要修改版本號，不能和歷史版本號相同。
description: 描述。
main: 入口文件，該字段需指向我們最終編譯后的包文件。
keyword：關鍵字，以空格分離希望用戶最終搜索的詞。
author：作者
private：是否私有，需要修改為 false 才能發布到 npm
license： 開源協議
以下為參考設置

{

"name": "vue-custom-dialog",

  "version": "0.1.0",

  "private": false,

  "main": "lib/dialogcustom.umd.min.js",

  "keyword": "dialogcustom",

}

 

 

3、添加 .npmignore 文件，設置忽略發布文件
我們發布到 npm 中，只有編譯后的 lib 目錄、package.json、README.md才是需要被發布的。所以我們需要設置忽略目錄和文件。

和 .gitignore 的語法一樣，具體需要提交什么文件，看各自的實際情況。

忽略目錄
examples/
packages/
public/

忽略指定文件
vue.config.js
babel.config.js
*.map

4、登錄到 npm
首先需要到 npm 上注冊一個賬號，注冊過程略。

如果配置了淘寶鏡像，先設置回npm鏡像：

$ npm config set registry http://registry.npmjs.org
然后在終端執行登錄命令，輸入用戶名、密碼、郵箱即可登錄。

$ npm login

5、發布到 npm
執行發布命令，發布組件到 npm

$ npm publish

6、發布成功
發布成功后稍等幾分鍾，即可在 npm 官網搜索到。以下是剛提交的 vcolorpicker

7、使用新發布的組件庫
安裝

$ npm install vue-custom-dialog -S

 

 安裝成功

使用

# 在 main.js 引入並注冊

import dialogCustom from 'vue-custom-dialog'

 

Vue.use(dialogCustom)

# 在組件中使用
<template>

  <dialog-custom

      :dialogVisible="dialogComponentStatus"

      v-bind:formDate="formDate"

      ref="dialogCommon"

      @closeDialog="updateDialogState"

    ></dialog-custom>

</template>
<script>
export default {
data () {
return {

 formDate: {},

      // 彈窗顯示狀態

      dialogComponentStatus: false,

}
}
}
</script>
————————————————
版權聲明：本文為CSDN博主「巴啦啦小能量」的原創文章，遵循CC 4.0 BY-SA版權協議，轉載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/mlonly/article/details/88635809