手把手教你封裝 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，不想寫了...哈哈