1.安裝依賴

安裝 vue 的官方插件 npm i vue-class-component vue-property-decorator -S
typescript 必須安裝 npm i typescript -D
ts-loader 必須安裝 npm i ts-loader -D
請(qǐng)注意：ts-loader 請(qǐng)與你的 webpack 版本對(duì)應(yīng)，我的 webpack 版本為 3.6.0，因此我應(yīng)該安裝的 ts-loader 版本為 3.x.x，因此我在ts-loader的Github上找到了我最新的 3.x.x 的版本為 3.5.0，所以我的安裝命令為npm i ts-loader@3.5.0 -D

2.配置 webpack.base.conf.js

首先找到./build/webpack.base.conf.js

• 找到 entry.app 將 main.js 改成 main.ts；并且把項(xiàng)目文件中的 main.js 也改成 main.ts , 里面內(nèi)容保持不變

entry: {
        app: './src/main.ts'
    }

• 找到resolve.extensions，里面加上.ts 后綴 （是為了之后引入.ts 的時(shí)候不寫后綴）

resolve: {
        extensions: ['.js', '.vue', '.json', '.ts'], //加入.ts
        alias: {
            vue$: 'vue/dist/vue.esm.js',
            '@': resolve('src')
        }
    }

• 找到module.rules 添加webpack對(duì).ts的解析

module: {
        rules: [
            // 從這里復(fù)制下面的代碼就可以了
            {
                test: /\.tsx?$/,
                loader: 'ts-loader',
                exclude: /node_modules/,
                options: {
                    appendTsSuffixTo: [/\.vue$/]
                }
            },
            // 復(fù)制以上的
            {
                test: /\.vue$/,
                loader: 'vue-loader',
                options: vueLoaderConfig
            }
        ]
    }

3.添加 tsconfig.json

在根路徑下創(chuàng)建tsconfig.json文件，添加一下配置

{
  "include": ["src/**/*"],
  "exclude": ["node_modules"],
  "compilerOptions": {
      "allowSyntheticDefaultImports": true,
      "experimentalDecorators": true,
      "allowJs": true,
      "module": "esnext",
      "target": "es5",
      "moduleResolution": "node",
      "isolatedModules": true,
      "lib": ["dom", "es5", "es6", "es7", "es2015.promise"],
      "sourceMap": true,
      "pretty": true
  }
}

4.讓 ts 識(shí)別 .vue

由于 TypeScript 默認(rèn)并不支持 *.vue后綴的文件，所以在 vue 項(xiàng)目中引入的時(shí)候需要?jiǎng)?chuàng)建一個(gè) vue-shim.d.ts 文件，放在項(xiàng)目對(duì)應(yīng)使用目錄下，所以新建 src/vue-shim.d.ts，寫入以下代碼

declare module '*.vue' {
    import Vue from 'vue'
    export default Vue
}

5..js 文件重命名為.ts 文件

將src下的所有**.js文件重命名**.ts，包括src/router/index.js等逐一從.js重命名為.ts

注意：重命名后對(duì)vue文件的import，需添加.vue后綴

因?yàn)?code>Typescript默認(rèn)只識(shí)別*.ts文件，不識(shí)別*.vue文件

之前：

import App from './App'
import HelloWorld from '@/components/HelloWorld'

需改為：

import App from './App.vue'
import HelloWorld from '@/components/HelloWorld.vue'

6.改造 .vue 文件

要點(diǎn)：

• <script>標(biāo)簽添加lang="ts"聲明
• 使用vue-class-component 對(duì) Vue 組件進(jìn)行封裝

之前：

<template>
    <div id="app">
        <router-view />
    </div>
</template>

<script>
    export default { name: 'App' }
</script>
<style>
    @import './style/app.scss';
</style>

改造后：

<template>
    <div id="app">
        <router-view />
    </div>
</template>

<script lang="ts">
    import Vue from 'vue'
    import Component from 'vue-class-component'

    @Component
    export default class App extends Vue {}
</script>
<style>
    @import './style/app.scss';
</style>

之后請(qǐng)將所有的.vue按照vue-class-component改造

7.運(yùn)行 npm run dev

至此運(yùn)行項(xiàng)目，即可正常運(yùn)行，vue對(duì)typescript的初步引入，基本完成。

8.讓vue識(shí)別全局方法/變量

因?yàn)樵陧?xiàng)目中，會(huì)存在自己寫的一些方法是放在 vue.prototype上的。
如：Vue.prototype.$api = myApi，然后想在每個(gè).vue里面這樣使用this.$api，然而使用ts改造之后，在.vue里面使用this.$api會(huì)報(bào)錯(cuò)

Property '$api' does not exist on type 'Text'

請(qǐng)?jiān)?code>main.ts里面加上這段： 請(qǐng)放在 new Vue上面

Vue.config.productionTip = false
// 全局方法 this. 的調(diào)用方式
declare module 'vue/types/vue' {
   interface Vue {
       $tool: any
       $api: any
   }
}
/* eslint-disable no-new */
new Vue({
   el: '#app',
   store,
   router,
   components: { App },
   template: '<App/>'
})

然后就能使用 this.$api 和 this.$tool了

項(xiàng)目地址：
vue2.x：https://github.com/momoSph/Vue2.x-ElementUI
vue3.x：https://github.com/momoSph/Vue3.x-ElementUI