手把手教你封裝 Vue 元件，並使用 npm 釋出

KoK發表於2018-07-11
封裝Vue元件NPM

原始碼地址，如果對你有幫助的話希望不要吝嗇你的 Star

本文主要記錄一下如何基於 Vue 開發元件，並在 npm 上釋出。廢話不多說，進入正題

Vue 開發外掛

開發之前先看看官網的 開發規範

我們開發的之後期望的結果是支援 import、require 或者直接使用 script 標籤的形式引入，就像這樣：

// 這裡注意一下包的名字字首是 custom ，元件的名字字首是 moor
// 這是因為那個名字釋出包的時候被佔用了（我做實驗的時候叫 moor-ui）現在改成了custom-ui，但是元件的字首懶得改
import CustomUI from 'custom-ui';

// 或者 const CustomUI = require('custom-ui');

// 或者 <script src="..."></script>

Vue.use(CustomUI);
複製程式碼

構建一個 Vue 專案

開發元件我們使用 webpack-simple ：

vue init webpack-simple <project-name>
複製程式碼

PS: 這裡我選擇了 use sass 因為，之後開發元件會用到

開發元件的檔案結構如下，參考了一下 element 不過我們這個是簡易版，僅供分享和自己使用

.
├── src/                           // 原始碼目錄
│   ├── packages/                  // 元件目錄
│   │   ├── switch/                // 元件（以switch為例）
│   │   ├── moor-switch.vue        // 元件程式碼
│   │   ├── index.js               // 掛載外掛
│   ├── App.vue                    // 頁面入口
│   ├── main.js                    // 程式入口
│   ├── index.js                   // （所有）外掛入口
├── index.html                     // 入口html檔案
.
複製程式碼

好了，到這裡準備工作做好了，我們可以開始開發元件了，接著上面的例子，下面開始開發一個 switch 元件。

開發單個元件

先看一下目標效果：

switch.gif

開始開發：在 packages 資料夾下新建一個 switch 資料夾用來存放 switch 元件的原始碼，繼續在 switch 資料夾中新建 moor-switch.vue 和 index.js 檔案

moor-switch.vue

這個檔案是元件原始碼，我這裡就不放原始碼了，這裡就說一下我個人認為最重要的點吧，這也是封裝表單類元件最為重要的點：

自定義元件繫結 v-model，官網地址

使用：

<!-- 使用父元件的值繫結 -->
<!-- isSwitch = false -->
<moor-switch 
  v-model="isSwitch">開關:
</moor-switch>

<!-- 子元件必須要有 input 來處理對應的值 -->
<!-- 其中最重要的就是需要 :value="value" 用來繫結值 -->
<!-- @change="$emit('input', $event.target.value)" 事件觸發改變值 -->
<input
    type="checkbox"
    @change="$emit('input', $event.target.value)"
    :true-value="activeValue"
    :false-value="inactiveValue"
    :disabled="disabled"
    :value="value">

<!-- 當然還需要使用 props 來接受這個 value -->
<script> 
// ... 此處省略程式碼    
props: {
  value: {
    type: [Boolean, String, Number],
    default: false
  }
}
// ... 此處省略程式碼    
</script>    
複製程式碼

index.js

這個檔案沒什麼好說的就是將該元件作為 Vue 外掛，程式碼就三行這裡就放在這吧：

// MoorSwitch 是對應元件的名字，要記得在 moor-switch.vue 檔案中還是 name 屬性哦
import MoorSwitch from './moor-switch';

MoorSwitch.install = Vue => Vue.component(MoorSwitch.name, MoorSwitch);

export default MoorSwitch;
複製程式碼

好了基本完成了，但是為了將所有的元件集中起來比如我還有 select、 input、 button 等元件，那麼我想要統一將他們放在一個檔案這中便於管理

所以在 App.vue 同級目錄我新建了一個 index.js 檔案，內容也沒啥好說的看看就懂了：

import HelloWorld from './packages/hello-world/index.js';
import MoorSwitch from './packages/switch/index.js';
// ...如果還有的話繼續新增

const components = [
  HelloWorld,
  MoorSwitch
  // ...如果還有的話繼續新增
]

const install = function(Vue, opts = {}) {
  components.map(component => {
    Vue.component(component.name, component);
  })
}

/* 支援使用標籤的方式引入 */
if (typeof window !== 'undefined' && window.Vue) {
  install(window.Vue);
}

export default {
  install,
  HelloWorld,
  MoorSwitch
  // ...如果還有的話繼續新增
}
複製程式碼

本地執行通過 <script/> 標籤的方式使用，修改 index.html 檔案：

<!-- 省略部分程式碼 -->
<div id="app">
  <moor-hello-world :color="color" :msg="msg"></moor-hello-world>
  <moor-switch
  v-model="lightSwitch">開關:</moor-switch>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script src="/dist/custom-ui.js"></script>
<script>
new Vue({
  el: '#app',
  data() {
    return {
      color: 'red',
      msg: 'hello world!',
      lightSwitch: false
    }
  }
})
</script>
複製程式碼

然後執行 npm run dev 你就可以看到效果了:

preview.png

好了到這裡我們的元件就開發完成了；下面開始說怎麼打包釋出到 npm 上

釋出到 npm

打包之前，首先我們需要改一下 webpack.config.js 這個檔案;

// ... 此處省略程式碼 
// 執行環境
const NODE_ENV = process.env.NODE_ENV

module.exports = {
  // 根據不同的執行環境配置不同的入口
  entry: NODE_ENV == 'development' ? './src/main.js' : './src/index.js',
  output: {
    // 修改打包出口，在最外級目錄打包出一個 index.js 檔案，我們 import 預設會指向這個檔案
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',
    filename: 'custom-ui.js',
    library: 'custom-ui', // 指定的就是你使用require時的模組名
    libraryTarget: 'umd', // libraryTarget會生成不同umd的程式碼,可以只是commonjs標準的，也可以是指amd標準的，也可以只是通過script標籤引入的
    umdNamedDefine: true // 會對 UMD 的構建過程中的 AMD 模組進行命名。否則就使用匿名的 define
  },
  // ... 此處省略程式碼 
}
複製程式碼

修改 package.json 檔案：

// 釋出開源因此需要將這個欄位改為 false
"private": false,

// 這個指 import custom-ui 的時候它會去檢索的路徑
"main": "dist/custom-ui.js",
複製程式碼

釋出命令其實就是兩句話

// 這裡需要你有一個 npm 的賬號，文章開頭有官網連結
npm login   // 登陸 
npm publish // 釋出
複製程式碼

完成之後我們就可以在專案中安裝使用了

npm install custom-ui -S 
複製程式碼

在 main.js 中引入外掛

import CustomUI from 'custom-ui'
Vue.use(CustomUI)
複製程式碼

在元件中使用：

<!-- 直接使用腳手架的HelloWorld元件 -->
<!-- 此處有省略程式碼，看對地方加入程式碼哦 -->
<div class="moor-item">
  <label>Input: </label>
  <moor-input
  v-model="input1"
  placeholder="請輸入資訊">
  </moor-input>

  <moor-input
    v-model="input2"
    placeholder="請輸入資訊">
  </moor-input>

  <moor-input
    placeholder="輸入框禁用"
    :disabled="inputDisabled">
  </moor-input>
</div>

<div class="moor-item">
  <label>Switch: </label>

  <moor-switch
  v-model="lightSwitch">開關(開):</moor-switch>

  <moor-switch
  v-model="switchLight">開關(關):</moor-switch>
</div>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      // HelloWorld
      msg: 'Welcome to moor UI!',
      color: 'red',
      // input
      input1: '',
      input2: '這是預設值',
      inputDisabled: true,
      // switch
      lightSwitch: false,
      switchLight: true
    }
  },
  watch: {
    lightSwitch: newValue => console.log('開關：', newValue),
  }
}
</script>

<style scoped>
.moor-select, .moor-btn, .moor-switch, .moor-input {
  margin: 10px 6px;
}
.moor-item {
  display: flex;
  align-items: center;
}
.moor-item label {
  width: 100px;
  display: inline-block;
}
</style>
複製程式碼

預覽效果如下:

test-preview.png

PS: 修改 .gitignore 去掉忽略dist,因為我們打包的檔案也需要提交；每次上到npm上需要更改版本號，package.json 裡的 version 欄位

寫的比較簡單，主要還是提供思路。用習慣了開源的元件自己總得了解一下嘛，有的時候在開發的過程中我們找不到合適的開源元件就需要自己開發了，這個時候我們把自己寫的一些精緻的小外掛開源出來挺好的...

最後希望你給個 Star 原始碼地址

哦，對了README，不想寫了...哈哈

相關文章