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

本文主要記錄一下如何基于 Vue 開發(fā)組件，并在 npm 上發(fā)布。廢話不多說，進入正題

Vue 開發(fā)插件

開發(fā)之前先看看官網(wǎng)的 開發(fā)規(guī)范

我們開發(fā)的之后期望的結果是支持 import、require 或者直接使用 script 標簽的形式引入，就像這樣：

// 這里注意一下包的名字前綴是 custom ，組件的名字前綴是 moor
// 這是因為那個名字發(fā)布包的時候被占用了（我做實驗的時候叫 moor-ui）現(xiàn)在改成了custom-ui，但是組件的前綴懶得改
import CustomUI from 'custom-ui';

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

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

Vue.use(CustomUI);

構建一個 Vue 項目

開發(fā)組件我們使用 webpack-simple ：

vue init webpack-simple <project-name>

PS: 這里我選擇了 use sass 因為，之后開發(fā)組件會用到

開發(fā)組件的文件結構如下，參考了一下 element 不過我們這個是簡易版，僅供分享和自己使用

.
├── src/                           // 源碼目錄
│   ├── packages/                  // 組件目錄
│   │   ├── switch/                // 組件（以switch為例）
│   │   ├── moor-switch.vue        // 組件代碼
│   │   ├── index.js               // 掛載插件
│   ├── App.vue                    // 頁面入口
│   ├── main.js                    // 程序入口
│   ├── index.js                   // （所有）插件入口
├── index.html                     // 入口html文件
.

好了，到這里準備工作做好了，我們可以開始開發(fā)組件了，接著上面的例子，下面開始開發(fā)一個 switch 組件。

開發(fā)單個組件

先看一下目標效果：

switch.gif

開始開發(fā)：在 packages 文件夾下新建一個 switch 文件夾用來存放 switch 組件的源碼，繼續(xù)在 switch 文件夾中新建 moor-switch.vue 和 index.js 文件

moor-switch.vue

這個文件是組件源碼，我這里就不放源碼了，這里就說一下我個人認為最重要的點吧，這也是封裝表單類組件最為重要的點：

自定義組件綁定 v-model，官網(wǎng)地址

使用：

<!-- 使用父組件的值綁定 -->
<!-- isSwitch = false -->
<moor-switch 
  v-model="isSwitch">開關:
</moor-switch>

<!-- 子組件必須要有 input 來處理對應的值 -->
<!-- 其中最重要的就是需要 :value="value" 用來綁定值 -->
<!-- @change="$emit('input', $event.target.value)" 事件觸發(fā)改變值 -->
<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 等組件，那么我想要統(tǒng)一將他們放在一個文件這中便于管理

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

import HelloWorld from './packages/hello-world/index.js';
import MoorSwitch from './packages/switch/index.js';
// ...如果還有的話繼續(xù)添加

const components = [
  HelloWorld,
  MoorSwitch
  // ...如果還有的話繼續(xù)添加
]

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
  // ...如果還有的話繼續(xù)添加
}

本地運行通過 <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

好了到這里我們的組件就開發(fā)完成了；下面開始說怎么打包發(fā)布到 npm 上

發(fā)布到 npm

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

// ... 此處省略代碼 
// 執(zhí)行環(huán)境
const NODE_ENV = process.env.NODE_ENV

module.exports = {
  // 根據(jù)不同的執(zhí)行環(huán)境配置不同的入口
  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 文件：

// 發(fā)布開源因此需要將這個字段改為 false
"private": false,

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

發(fā)布命令其實就是兩句話

// 這里需要你有一個 npm 的賬號，文章開頭有官網(wǎng)鏈接
npm login   // 登陸 
npm publish // 發(fā)布

完成之后我們就可以在項目中安裝使用了

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 字段

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

最后希望你給個 Star 源碼地址

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