前言

?? 現在前端開發基本離不開npm插件包，有的時候自己寫了一個組件在多個項目中都有用到，簡單粗暴的做法就是CV大法啦。不過這種不系統，不易維護的做法我們是不在這里討論的。這里我以實際開發項目做的一個vue組件來陳述。

開發環境

?? vue-cli3.x+ （2.x的也差不多）

首先創建項目這個一張圖描述了

創建項目

更改項目結構

?? 其實呢改不改都無所謂的，只不過改了看上去更牛逼些。我們把src目錄改成example模塊，在根目錄下新增一個packages目錄。新增一個vue.config.js文件、新增一個.npmignore文件

目錄結構

packages 目錄說明

?? 這里是存放我們要發布的組件，可能你要發布多個組件這里以組件名區分開，不過個人不建議把多個npm組件弄在一起，除非你是想做大工具庫API，我個人推薦一個項目一個組件當然這個組件是獨立的

packages結構

// package/vue-aliplay-player/index.js    // 拋出 vue-aliplay-player
import vueAliplayer from './src/player.vue'

 /**
  * 預覽做全局組件使用，按需加載組件可以不需要這個install
  */
vueAliplayer.install = function(vue) { 
    Vue.component(vueAliplayer.name, vueAliplayer)
}
export default vueAliplayer

// packages/index.js  // 拋出所有組件，做多個組件使用 
import vueAliplayer from './vue-aliplay-player'

const components = [
    vueAliplayer
]

// 定義 install 方法，接收 Vue 作為參數。如果使用 use 注冊插件，則所有的組件都將被注冊
const install = function(Vue) {
    // 判斷是否安裝
    if (install.installed) return
    // 遍歷注冊全局組件
    components.map(component => Vue.component(component.name, component))
}

// 判斷是否是直接引入文件
if (typeof window !== 'undefined' && window.Vue) {
    install(window.Vue)
}

export default {
    // 導出的對象必須具有 install，才能被 Vue.use() 方法安裝
    install,
    // 以下是具體的組件列表
    ...components
}

打包前開發測試

?? 按需加載

按需加載

?? 全局：main.js

全局注冊

重點 打包

?? 根目錄下的package.json scripts 新增一個命令

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

新增命令

打包后的效果查看

npm run lib

?? 會在根目錄下多個lib文件

lib文件里面的內容

打包后測試調用

?? 按需加載

按需加載

全局注冊

發布前調整

1、更改根目錄的package.json 信息

package信息調整

2、.npmignore 過濾發布文件

.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 源 一定要是 https://registry.npmjs.org/
查看源： npm config get registry
更改源： npm set registry https://registry.npmjs.org/

1、 npm login 
2、 npm publish

總結 【多實踐多學習】

1、npm發布vue組件包不難，甚至都可不基于vue構建項目（項目構建只是為了方便調試、構建、管理）， 只需如下結構

不是有vue項目構建

2、網上發布vue npm包的貼很多，但是大都是CV【真是坑爹】，或者是較老的用法還有就是沒有講到核心；
3、前端入門很快，進階很難，別以為看了兩篇教程就自以為功夫滿級可以肉抗了。