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 組件。
開發單個組件
先看一下目標效果：
開始開發：在 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 你就可以看到效果了:
好了到這里我們的組件就開發完成了；下面開始說怎么打包發布到 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，不想寫了...哈哈