Vue 開發外掛

我們可以先檢視Vue的外掛的開發規範

我們開發的之後期望的結果是支援 import、require 或者直接使用 script 標籤的形式引入，就像這樣： ps: 這裡注意一下包的名字字首是 unisoft ，元件的名字字首是 uni

import UniSoftUI from 'unisoft-ui';
// 或者 const CustomUI = require('unisoft-ui');
// 或者 <script src="..."></script>
Vue.use(UniSoftUI);   

構建一個 Vue 專案

開發元件我們使用 webpack-simple 模板:

vue init webpack-simple <project-name>

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

目錄結構如圖:

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

開發單個元件:

先看一下目標效果：

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

<template>
  <div class="uni-switch">
    <div class="wrapper">
      <span><slot></slot></span>
      <div :class="[{closed: !checked}, 'switch-box']"
           @click="handleChange(value)">
        <span :class="{closed: !checked}"></span>
      </div>

      <input
        type="checkbox"
        @change="handleChange"
        :true-value="activeValue"
        :false-value="inactiveValue"
        :disabled="disabled"
        :value="value"/>
    </div>
  </div>

</template>

<script>
  export default {
    name: "UniSwitch",
    data() {
      return {}
    },
    props: {
      value: {
        type: [Boolean, String, Number],
        default: false
      },
      activeValue: {
        type: [Boolean, String, Number],
        default: true
      },
      inactiveValue: {
        type: [Boolean, String, Number],
        default: false
      },
      disabled: {
        type: Boolean,
        default: false
      }
    },
    computed: {
      checked() {
        return this.value === this.activeValue;
      }
    },
    methods: {
      handleChange(value) {
        this.$emit('input', !this.checked ? this.activeValue : this.inactiveValue);
      }
    }
  }
</script>
 

index.js:

//  UniSwitch 是對應元件的名字，要記得在 moor-switch.vue 檔案中還是 name 屬性哦
import UniSwitch from './UniSwitch.vue';
UniSwitch.install = Vue => Vue.component(UniSwitch.name, UniSwitch);
export default UniSwitch;

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

所以在 App.vue 同級目錄我新建了一個 index.js 檔案

import UniSwitch from './packages/switch/index';
import UniSlider from './packages/slider/index';
import UniNumberGrow from './packages/number-grow/index';
import './common/scss/reset.css'
// ...如果還有的話繼續新增

const components = [
  UniSwitch,
  UniSlider,
  UniNumberGrow
  // ...如果還有的話繼續新增
]

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,
  UniSwitch,
  UniSlider,
  UniNumberGrow
  // ...如果還有的話繼續新增
}

好了到這裡我們的元件就開發完成了；下面開始說怎麼打包釋出到 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/unisoft-ui.js",

釋出命令只有兩步驟:

npm login   // 登陸
npm publish // 釋出

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

使用

在自己的專案中使用unisoft-ui, 先從 npm 安裝

npm install unisoft-ui -S

在 mian.js 中引入

import UniSoftUI from 'unisoft-ui'
Vue.use(UniSoftUI)

在元件中使用:

<template>
  <div id="app">
    <h1>{{msg}}</h1>
    <uni-switch v-model="isSwitch">
      <span class="text">{{switchText}}</span>
    </uni-switch>
  </div>
</template>

<script>
  export default {
    name: 'app',
    data() {
      return {
        msg: 'welecom to unisoft-ui',
        isSwitch: false,
      }
    },
    computed: {
      switchText() {
        return this.isSwitch ? '開' : '關';
      }
    },
  }
</script>

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