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
