Vue 開發插件

開發以前先看看官網的開發規範node

咱們開發的以後指望的結果是支持 import、require 或者直接使用 script 標籤的形式引入，就像這樣：webpack

// 這裏注意一下包的名字前綴是 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 ：git

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

PS: 這裏我選擇了 use sass 由於，以後開發組件會用到github

開發組件的文件結構以下，參考了一下 element 不過咱們這個是簡易版，僅供分享和本身使用web

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

好了，到這裏準備工做作好了，咱們能夠開始開發組件了，接着上面的例子，下面開始開發一個 switch 組件。npm

開發單個組件

先看一下目標效果：json

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

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 你就能夠看到效果了:

好了到這裏咱們的組件就開發完成了；下面開始說怎麼打包發佈到 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>
複製代碼

預覽效果以下:

PS: 修改 .gitignore 去掉忽略dist,由於咱們打包的文件也須要提交；每次上到npm上須要更改版本號，package.json 裏的 version 字段

寫的比較簡單，主要仍是提供思路。用習慣了開源的組件本身總得了解一下嘛，有的時候在開發的過程當中咱們找不到合適的開源組件就須要本身開發了，這個時候咱們把本身寫的一些精緻的小插件開源出來挺好的...

最後但願你給個 Star 源碼地址

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