詳解：如何在NPM上發佈本身的第一個Vue組件庫

如何在NPM上發佈本身的第一個vue組件庫，是每一名vue前端開發人員必經的進階之路，本文將結合做者的實踐項目，爲各位讀者詳細講解全部的操做步驟，相信你在閱讀本文後，就能立馬動手。

因爲本文的主要目的是講解如何建立組件庫併發布到NPM，所以對於組件的建立會一筆帶過。

有須要的朋友，也能夠直接訪問本文實例的GitHub地址：github.com/jiangjiahen…。

實例講解

本文將經過建立一個計算器和文字標題組件，來展現建立及發佈組件的所有過程。

1. 建立項目

在文件夾中用Vue-CLI3的命令建立一個名爲landscape-components的項目，項目名稱能夠自定義。

vue create landscape-components
複製代碼

建立好項目後，在src的同級目錄下添加一個myComponents的文件夾，這個文件夾將用來存放咱們建立好的組件。

2. 配置項目

myComponents 是咱們新增的一個目錄，默認是不被 webpack 處理的，因此須要添加配置對該目錄的支持。

咱們在src同級的目錄下建立一個名爲vue.config.js的文件，用來配置咱們的組件庫，爲後面編譯組件提供支持。

// vue.config.js 文件配置以下

module.exports = {
    configureWebpack: {
        devtool: 'source-map'
    },
    // 強制內聯CSS
    css: {
        extract: false
    },
    // 擴展 webpack 配置，使 components 加入編譯
    chainWebpack: config => {
        config.module
            .rule('js')
            .include
            .add('/myComponents')
            .end()
            .use('babel')
            .loader('babel-loader')
            .tap(options => {
                // 修改它的選項...
                return options
            })
    }
}
複製代碼

3. 建立組件庫

在建立並配置好項目後，咱們就能夠在myComponents文件夾編寫本身的組件庫了。

1. 建立組件的文件夾，例如：calculator、helloWorld的；
2. 在組件的文件夾下建立src文件夾，並在該文件夾下建立一個同名的vue文件來編寫組件；
3. 而後在src同級目錄下建立一個index.js文件做爲該組件的入口文件；
4. 最後在myComponents文件夾建立一個index.js文件做爲整個組件庫的入口文件。

以helloWorld/src/index.js爲例，文件代碼示例以下：

// 導入的組件必須在vue文件中聲明 name, 不然組件沒法註冊使用
import helloWorld from './src/helloWorld'

// 爲組件提供 install 安裝方法，供按需引入
helloWorld.install = Vue => {
    Vue.component(helloWorld.name, helloWorld)
}

// 默認導出組件
export default helloWorld
複製代碼

編寫myComponents/index.js文件，對組件庫進行導出。

import calculator from './calculator'
import helloWorld from './helloWorld'
const components = [
    calculator,
    helloWorld
]
// 定義 install 方法，接收 Vue 做爲參數。若是使用 use 註冊插件，則全部的組件都將被註冊
const install = 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,
    // 如下是具體的組件列表
    calculator,
    helloWorld
}
複製代碼

4. 本地調試

建立好組件庫後，須要首先在本地進行調試，確保組件的能夠正常使用。

如圖所示，在src/main.js文件中，添加並註冊本身建立的組件庫。

而後在src下面的vue文件中直接使用組件庫中的組件，而後運行調試。

如圖所示，組件庫使用成功，接下來就能夠開發組件庫了。

5. 配置發佈文件

5.1 編譯組件庫

在package.json的script命令中新增一條編譯組件庫的命令——npm run lib。

"lib": "vue-cli-service build --target lib --name landscape-components --dest lib myComponents/index.js"
複製代碼

執行編譯命令——npm run lib。

編譯成功後，會獲得一個lib文件夾，以下圖。

5.2 配置package.json文件

配置參考以下。

"name": "landscape-components", // 組件庫名稱

"version": "0.2.0", // 組件庫版本號

"description": "landscape的Vue組件庫" // ,組件庫描述

"main": "lib/landscape-components.umd.min.js", // 組件庫入口文件，指向最終編譯後的包文件

"keywords": ["landscape-components", "calculator", "helloWorld"], // 組件庫關鍵詞

"author": { "name": "jiangjiaheng" }, // 做者信息

"private": false, // 是否私有，須要修改成 false 才能發佈到 npm
複製代碼

5.3 添加 .npmignore 文件

咱們發佈到 npm 中，只有編譯後的 lib 目錄、package.json、README.md纔是須要被髮布的。因此咱們須要添加 .npmignore 文件，設置忽略目錄和文件。

文件配置以下：

# 忽略目錄
src/
myComponents/
public/

# 忽略指定文件
vue.config.js
babel.config.js
*.map
複製代碼

6. 發佈到NPM

首先須要到 npm （www.npmjs.com/）上註冊一個帳號，註冊過程略。

而後在終端執行登陸命令，輸入用戶名、密碼、郵箱便可登陸。

npm login
複製代碼

登陸成功後，輸入命令，發佈組件。

npm publish
複製代碼

發佈成功後，通常會有npm發送給你的通知郵件，進入npm官方，登陸本身的帳號，查看剛剛發佈的組件庫。

7. 下載使用

發佈成功後，咱們就能夠在別的項目中下載並使用咱們建立的組件庫了。

npm install landscape-components
複製代碼

而後在src/main.js中引入組件庫。

最後在src下的vue文件中直接使用組件庫中的組件，運行項目。

結語

以上就是本文的所有內容了，感謝你的閱讀，文中部分技術要點受限於文章篇幅，並無展開講解，若是你有什麼疑問或者建議，歡迎你隨時留言，互相討論。

最後，祝工做順利，生活幸福。