vue-cli 3.0 下釋出一個 TypeScript 元件

vue-cli 釋出在即，TypeScript 也日益普及，于是借此機會，将以前寫過的一個插件  vue-loading-template  用 TypeScript 重構，并添加一些實用的功能。

建構配置

vue-cli 3.0 提供了一系列功能，包括對 Babel, TypeScript, ESlint, PWA 等開箱即用的支援，同時，它也提供了一個 CLI 上的 GUI 界面，你隻需輸入 

vue ui

 即可看到配置界面，這裡不過多說明，有興趣的同學，可以參考文檔： https://cli.vuejs.org/dev-guide/ui-api.html 。

建構目标

當使用指令 

vue-cli-service build

 時，vue-cli 提供不同建構目标選項（預設為 app）。如果目的是建構釋出一個 npm 包，我們可以選擇 lib 為建構目标，在此種模式下，vue 不會被打包進來，即使你的項目裡引用了 vue：

vue-cli-service build --target lib --name vueLoading [entry]
           

--name

 檔案名字，

[entry]

 建構入口。

除了建構一個 lib 以外，我們還需建構一個 target 為 app 的項目，用以部署在 GitHub Pages 上，于是，項目裡的 package.json 至少含有以下兩條指令：

// package.json
{
  // others..
  "scripts": {
    "build": "vue-cli-service build --dest docs",
    "build-bundle": "vue-cli-service build --target lib --name vueLoading ./src/index.ts",
  }
}

           

除此之外，還需配置 vue.config.js 下的 baseUrl，因為 GitHub Pages 上 url 是 https://jkchao.github.io/vue-loading/ ，

module.exports = {
  baseUrl: process.env.NODE_ENV === 'production'
		    ? '/vue-loading/'
		    : '/'
}           

配置 loaders

這個項目裡，我們導入的檔案是 svg，預設情況下，vue-cli 的配置将其轉化為 base64 檔案，此時，需替換 vue-cli 的 loader 配置：

module.exports = {
  // ... other
  chainWebpack: config => {
    const svgRule = config.module.rule('svg')

    svgRule.uses.clear()

    svgRule
      .use('raw-loader')
        .loader('raw-loader')
  }
}

           

修改檔案

index.ts

釋出的元件有兩種方式供社群使用：

• 在單檔案裡引入檔案如

  import { vueLoading } from 'vue-loading-template'

  ，後在單檔案元件

  components

  選項中定義就可使用。
• 可當插件使用，并提供可選的全局屬性配置：

import Vue from 'vue'
import vueLoading from 'vue-loading-template'
Vue.use(vueLoading, {
    type: 'balls',
    color: '#5ac1dd',
    size: {
      width: '30px',
      height: '30px'
    }
})

           

• install 之後，vueLoading 元件被全局注冊。

第一點實作比較容易，導入寫好的元件，作為成員導出即可：

import VueLoading from './components/Loading.vue'

export { VueLoading }
           

在第二點裡，當做為插件使用時，導出的成員必須提供 install 方法，install 第一個參數是 Vue 構造器，第二個參數即是元件的屬性：

import Vue from 'vue'

import VueLoading from './components/Loading.vue'

// VueLoadingOptions 是定義的聲明，下文将會出現。
import { VueLoadingOptions } from '../typings/index'

const install = (
  vue: typeof Vue,
  options?: VueLoadingOptions
) => {
  vue.component('vue-loading', VueLoading)
}

export default { install }

           

這樣建構的包，允許我們作為插件使用 

Vue.use(vueLoading)

，但是并沒有使用接受的一個可選 options 參數。

在沒改寫成 TypeScript 之前，我們可以把 options 值賦給元件的 props：

const install = (
  vue,
  options
) => {
  if (options) {
    VueLoading.props.type.default = options.type
    VueLoading.props.color.default = options.color
    VueLoading.props.size.default = () => options.size
  }
  vue.component('vue-loading', VueLoading)
}

           

改寫為 TypeScript 元件之後（實際上是通過 Vue.extend 定義的 Vue 子類），并不能直接擷取元件的 props，我們可以通過列印兩種不同元件來清楚的了解：

圖一，是普通元件導出形式，

圖二，是使用

Vue.extend()

形式導出的子類元件。

使用子類元件時，需要執行個體化：

new VueLoading()

。

我們所需要的

props

屬性，被放在執行個體屬性

$options

上：

但是還是有些問題，當你使用

new VueLoading().$options.props.type

時，它會發出警告：

• props 屬性可能是不存在的；
• type 可能并沒有在 props 屬性上。

我們需要給 props 斷言：

import Vue from 'vue'

import VueLoading from '@/components/Loading.vue'
import { VueLoadingOptions } from '../typings/index'

interface Props {
  type: { default: string },
  color: { default: string },
  size: { default: () => any },
  [key: string]: any
}

const install = (
  vue: typeof Vue,
  options?: VueLoadingOptions
) => {
  if (options) {
    const componentProps = new VueLoading().$options.props as Props

    componentProps.type.default = options.type || 'spiningDubbles'
    componentProps.color.default = options.color || '#457e86'
    componentProps.size.default = () => options.size || { width: '40px', height: '40px' }
  }

  vue.component('vue-loading', VueLoading)
}

export { VueLoading }
export default { install }


           

聲明檔案

在 TypeScript 檔案中，當以非相對路徑導入一個子產品時，聲明檔案扮演着非常重要的角色。

如果你想進一步了解在 TypeScript 子產品導入，可以參考

這篇文章

一個子產品的聲明檔案，用以提供對應子產品的行為提示，以及限制能力。是以，我們隻需根據子產品導出寫聲明檔案即可：

import Vue from 'vue'

type LoadingType = 'balls' | 'bars' | 'beat' | 'bubbles' | 'cylon' | 'spin' | 'spiningDubbles' | 'barsCylon'

interface VueLoadingOptions {
  // loading type
  type: LoadingType

  // loading color
  color: string

  // loading size
  size: { width: string, height: string }
}

declare function install(vue: typeof Vue, options?: VueLoadingOptions): void

declare class VueLoading extends Vue {}

declare const _default: {
  install: typeof install
}

export { VueLoading, LoadingType, VueLoadingOptions }

export default _default


           

至此，一個簡單的 TypeScript 元件包已經完成了。

有點牽強？

• 是的，特别是當改變元件 default props 時（使用

  Vue.extend()

  導出的元件是一個構造器）。
• 此外，作為插件使用時，對傳入的參數，并沒有一個限制（提示）的資訊（和想象中有點不太一樣）。

當然，這隻是一個簡單的例子，你可以為它添件多種 Feature，如做為指令使用，或者挂在原型上。

原文釋出時間為：2018年06月24日

本文作者：三毛丶

本文來源：

掘金 https://juejin.im/post/5b38d27451882574d87aa5d5

 如需轉載請聯系原作者