搭建自己的 vue 元件庫（三）—— npm 上面釋出自己的元件庫

閒不住的李先森發表於2018-09-07
Vue元件NPM

參照 Element-ui 的目錄結構釋出自己的 vue-ui 包

搭建專案

這裡使用 vue 的腳手架來搭建專案。 vue的腳手架有不同的模板，我們使用 webpack-simple 模板。

初始化專案

提醒一下， 初始化 vue 腳手架的模板前需要安裝 vue-cli 腳手架工具

    vue initialwebpack-simple vue-star-ui

    # to get started
        cd vue-star-ui
        npm install
        npm run dev 
複製程式碼

generated vue-product

**注意：後期因為編寫元件的樣式檔案我選擇使用 sass 語法，所以最好在生成目錄的時候選擇使用sass **

生成初始化專案後，目錄結構是這樣的：

初始化目錄結構

我們需要改造一下，把 src 下面的檔案和目錄全部刪除，然後新增 src src/index.js packages packages/button/src/button.vue packages/button/index.js 修改後的目錄結構是這樣的：

修改後目錄結構

初始 src/index.js

新建目錄完畢之後我們現在完善檔案中的程式碼,首先我們需要在src/index.js 中 返回一個帶有 install 方法的物件。

// src/src/index.js

const install = (Vue,opts = {}) {

}

export default {
    version: '0.0.1',
    install
}
複製程式碼

這樣一個最基本的 Element-ui 的入口檔案 (src/index.js) 我們便完成了，但是這個時候 install 方法裡面什麼也沒有，我們先加一個 button 元件。

button 元件

// src/packages/button/src/button.vue

<template>
  <div>button</div>
</template>

<script>
export default {
  name: 'StarButton'  
}
</script>

複製程式碼

這裡的 name 對應的是 元件的名稱, 因為再註冊元件的時候是通過 Vue.component(button.name,button) 這種方式的，所以當使用庫中的元件的時候就可以通過 <star-button /> 這種方式。

// src/packages/button/index.js

import StarButton from './src/button'

StarButton.install = (Vue) => {
  Vue.component(StarButton.name, StarButton)
}

export default StarButton
複製程式碼

這個檔案有兩個作用，1. 將 button 元件匯出給 src/index.js 中的 install 方法使用 2. 將 button 元件的 install 方法匯出給 Element,方面 button 單獨使用

完善 src/index.js

在寫完了一個 button 元件之後，我們需要將元件匯出給 src/index.js

// src/src/index.js
import Button from './packages/button/index'

const components = [
    Button
]

const install = (Vue,opts = {}) {
    // 將所有的 元件 掛載到全域性資源
    components.map(component => {
        Vue.component(component.name,component)
    })
}

// 當檢測到 Vue 是全域性變數的時候，自動將 執行 `install` 方法
if(typeof window !== 'undefined' && window.Vue){
    install(window.Vue)
}

export default {
    version: '0.0.1',
    install,
    Button   // 單獨暴露 Button 元件，方便單獨引入
}
複製程式碼

配置釋出檔案

在按照 Element-ui 的目錄結構編寫完一套最基本的 框架後，現在開始配置打包釋出的檔案。

修改 webpack.config.js

在 webpack.config.js 檔案中，我們需要修改專案的入口檔案以及輸出配置

    // 這裡的入口檔案  不僅是專案中 通過 npm run dev 的進入檔案  
    // 同時也是 npm run build 後的 入口檔案
  entry: './src/src/index.js', // 專案的入口檔案 
  output: {
    path: path.resolve(__dirname, './dist'),  // 打包後輸出檔案的所在目錄
    publicPath: '/dist/', // 打包輸出的檔案路徑
    filename: 'star-ui-vue.js',  //打包後的 檔名稱，這個檔名稱與專案名稱相對應
    library: 'star-ui-vue',  // 指定 使用 import 或者 reqire 時的模組名，這裡為 import xx from 'star-ui-vue' 或者 require('star-ui-vue')
    libraryTarget: 'umd', // 可以指定生成不同的 umd 的程式碼， 可以只是 commonjs 標準的，也可以是 amd 標準的， 也可以是隻能通過 script 標籤引入的
    umdNamedDefine: true // 會對 umd 的構建過程中的 amd 模組進行命名，  否則就使用 匿名的 define
  }
複製程式碼

配置 package.json

距離專案的釋出還有最後一步，也是釋出npm 最重要的一步 —— 修改package.json檔案

 "version": "1.0.4",
private:false, // 預設是true 私人的 需要改為false 不然發不上去 你可以試試..
"license": "MIT", // 許可證
 "main": "dist/star-ui-vue.js", // 這個超級重要 決定了你 import xxx from “star-ui-vue” 它預設就會去找 dist下的star-ui-vue 檔案
 "files": [  // 用於釋出忽略 當我們的包夠複雜的時候 我們總不能把所有本地開發或者測試的元件全部都發布上去 這個時候我們開啟這個選項 意為只發布這兩個檔案 當然我們這個包比較簡單 就不開啟了
    "dist",
    "src"
  ],
  "repository": {
    "type": "git",
    "url": "https://github.com/summerstarlee/star-ui-vue"
  }, // 配置這個地址存放你專案在github上的位置 也尤為重要
複製程式碼

還需要提醒的一個是 version 欄位，這個欄位代表了 npm 的當前的版本，當我們改動了包的內容後，需要重新打包上傳檔案的時候，重新改變版本號才能釋出。 關於 version 的改動說明，參照：

  • 主版本號：當你做了不相容的 API 修改
  • 次版本號：當你做了向下相容的功能性新增
  • 修訂號：當你做了向下相容的問題修正

npm 包釋出

註冊

如果還沒有 npm 賬號 需要現在 npm 上面註冊一個賬號

本地登陸 npm 賬號

在註冊 npm 賬號之後需要先在本地登陸

 npm login
 # 這時會提示輸入使用者名稱、密碼、郵箱
 
 # 登陸完畢後會提示
 logged in as 使用者名稱 on  https://registry.mnpmjs.orgs/
 
複製程式碼

登陸成功後就開始釋出我們的專案啦

# 需要在專案的根目錄執行 （package.json 目錄）
npm publish 

# 釋出成功
+ star-ui-vue@版本號
複製程式碼

驗證 npm 包

當釋出好專案之後，參考 搭建專案,重新建一個 vue 專案

在執行 npm install 之後還需要再安裝一個我們自己的 npm 包, 執行 npm install star-ui-vue -S

npm 包安裝完畢之後，在 main.js 中新增包引用

// main.js
import StarUi from 'star-ui-vue'

vue.use(StarUi)
複製程式碼

之後在專案中使用我們的元件

<template>
 <star-button />
</template>
複製程式碼

執行專案在頁面中就能看到我們的 元件正確顯示在頁面中啦。

完成了 搭建專案結構、釋出 npm 包，之後，我們的元件庫就可以使用了，但是這時候我們的元件庫還沒有其他的功能。 下一節開始，我們就開始按照 Element-ui 的元件寫法，一步一步搭建自己的元件庫啦。

相關文章