技術標籤：NodejsHTML/CSS/JSVue

首先用 vue-cli 建立一個 default 專案
當前的專案目錄是這樣的：

首先需要建立一個 packages 目錄，用來存放元件
然後將 src 目錄改為 examples 用作示例

二、修改配置
啟動專案的時候，預設入口檔案是 src/main.js
將 src 目錄改為 examples 之後，就需要重新配置入口檔案
在根目錄下建立一個vue.config.js檔案

// vue.config.js

module.exports = {
  // 將 examples 目錄新增為新的頁面
  pages: {
    index:
 
 {
      // page 的入口
      entry: 'examples/main.js',
      // 模板來源
      template: 'public/index.html',
      // 輸出檔名
      filename: 'index.html'
    }
  }
}

完成這一步之後就可以正常啟動專案了
vue-cli 3.x 提供了構建庫的命令，所以這裡不需要再為 packages 目錄配置 webpack

三、開發元件
之前已經建立了一個 packages 目錄，用來存放元件
該目錄下存放每個元件單獨的開發目錄，和一個 index.js 整合所有元件，並對外匯出

// packages/textarea/index.js

// 匯入元件，元件必須宣告 name
import Textarea from './main.vue'

// 為元件新增 install 方法，用於按需引入
 

Textarea.install = function (Vue) {
    Vue.component(Textarea.name, Textarea)
}

export default Textarea

四、整合並匯出元件
編輯 packages/index.js 檔案，實現元件的全域性註冊

// packages / index.js

// 匯入單個元件
import Textarea from './textarea/index'

// 以陣列的結構儲存元件，便於遍歷
const components = [
    Textarea
]

// 定義 install 方法
const install = function (Vue) {
    if (install.installed) return
    install.installed = true
    // 遍歷並註冊全域性元件
    components.map(component => {
        Vue.component(component.name, component)
    })
}

if (typeof window !== 'undefined' && window.Vue) {
    install(window.Vue)
}

export default {
    // 匯出的物件必須具備一個 install 方法
    install,
    // 元件列表
    ...components
}

到這裡元件就已經開發完畢

可以在 examples/main.js 中引入該元件

import TagTextarea from '../packages/index'
Vue.use(TagTextarea)

元件的標籤就是元件內定義的的 name

這時候可以 npm run serve 啟動專案，測試一下元件是否有 bug
// 啟動前需要確保已經在 vue.config.js 中添加了新入口 examples/main.js

五、打包元件
vue-cli 3.x 提供了一個庫檔案打包命令
主要需要四個引數：
1.target: 預設為構建應用，改為lib即可啟用構建庫模式
2.name:輸出檔名
3.dest: 輸出目錄，預設為 dist，這裡我們改為**lib**
4.entry:入口檔案路徑，預設為 src/App.vue，這裡改為packages/index.js
基於此，在 package.json 裡的 scripts 新增一個**lib**命令

// pageage.json

{
  "scripts": {
    "lib": "vue-cli-service build --target lib --name tag-textarea --dest lib packages/index.js"
  }
}

然後執行 npm run lib 命令，編譯元件

六、準備釋出
首先需要在 package.json 新增元件資訊
name: 包名，該名不能和已有的名稱衝突；
version: 版本號，不能和歷史版本號相同；
description: 簡介；
main: 入口檔案，應指向編譯後的包檔案；
keyword：關鍵字，以空格分割；
author：作者；
private：是否私有，需要修改為 false 才能釋出到 npm；
license：開源協議。

然後建立 .npmignore 檔案，設定忽略檔案
該檔案的語法和 .gitignore 的語法一樣，設定釋出到 npm 時忽略哪些目錄或檔案

.DS_Store
node_modules/
examples/
packages/
public/
vue.config.js
babel.config.js
*.map
*.html

# local env files
.env.local
.env.*.local

# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*

# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw*

七、釋出到 npm
如果以前改過 npm 的映象地址，比如使用了淘寶映象，就先改回來

npm config set registry http://registry.npmjs.org

如果沒有 npm 賬戶，可以通過**npm adduser**命令建立一個賬戶，或者到npm 官網註冊
如果在官網註冊的賬戶，或者以前就有賬戶，就使用**npm login**命令登入
具體流程可以參考官方文件（谷歌瀏覽器->翻譯中文）

在釋出之前，一定要確保元件已經編譯完畢，而且 package.json 中的入口檔案（main）的路徑正確
一切就緒，釋出元件：

npm publish

原文：https://www.cnblogs.com/wisewrong/p/10186611.html