vue cli3.0 封裝組件全局引入js文件併發布到npm

首先用 vue create建立一個項目

當前的項目目錄是這樣的：

 

首先須要建立一個 packages 目錄，用來存放組件

而後將 src 目錄改成 examples 用做示例

 

2、修改配置

啓動項目的時候，默認入口文件是 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

 

3、開發組件

以前已經建立了一個 packages 目錄，用來存放組件

該目錄下存放每一個組件單獨的開發目錄，和一個 index.js 整合全部組件，並對外導出

每一個組件都應該歸類於單獨的目錄下，包含其組件源碼目錄 src，和 index.js 便於外部引用

這裏以 textarea 組件爲例，完整的 packages 目錄結構以下：

textarea/src/main.vue 是組件的開發文件，具體代碼這裏就不展現了

須要注意的是，組件必須聲明 name，這個 name 就是組件的標籤

textarea/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

 

4、整合並導出組件

編輯 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)

而後就能直接使用剛纔開發的 textarea 組件

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

這時候能夠 npm run serve 啓動項目，測試一下組件是否有 bug

// 啓動前須要確保已經在 vue.config.js 中添加了新入口 examples/main.js

 

5、打包組件

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 命令，編譯組件

 

6、準備發佈

首先須要在 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*

 

7、發佈到 npm

若是之前改過 npm 的鏡像地址，好比使用了淘寶鏡像，就先改回來

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

若是沒有 npm 帳戶，能夠經過 npm adduser 命令建立一個帳戶，或者到 npm 官網註冊

若是在官網註冊的帳戶，或者之前就有帳戶，就使用 npm login 命令登陸

具體流程能夠參考官方文檔（谷歌瀏覽器->翻譯中文）

 

在發佈以前，必定要確保組件已經編譯完畢，並且 package.json 中的入口文件（main）的路徑正確

一切就緒，發佈組件：

npm publish

 

轉載自原連接： http://www.javashuo.com/article/p-gifeldpk-kh.html