5分鐘爲vue-cli2構建項目添加typescript

去年咱們將基於 vue-cli2 構建的項目中的 webpack3 升級到 webpack4。今年咱們繼續升(zhe)級(teng)，添加 typescript。

目前市場上大部分腳手架在生成項目時都會提示是否要安裝 typescript. 好比 vue-cli3+。但仍是有不少老項目或者是經過 vue-cli2 構建的項目一直在被維護中。若是你想對這些老項目從新改造、以舊換新，爲其添加 typescript 支持的話，Give me five minutes Plz。

只須要如下 6 小步。

1. 安裝相關依賴

$ npm install typescript ts-loader vue-property-decorator -D
複製代碼

typescript 必須安裝，你要問能不能不安裝它，哼哼~你究竟幹啥來的！

ts-loader 告訴 webpack 我是 ts.

vue-property-decorator 讓 vue 支持修飾器，這裏也可使用 vue-class-component. 至於用法這裏不講，想了解能夠點擊開發教程進行閱讀.

2. 修改 webpack 配置

在 build 目錄下找到 webpack.base.config.js 文件. 新增一個 rule 配置.

module: {
  rules: [
    ...
    {
      test: /\.tsx?$/i,
      use: [{
        loader: 'ts-loader',
        options: {
          appendTsSuffixTo: [/\.vue$/]
        }
      }],
      exclude: /node_modules/
    },
    
    ...
複製代碼

3. 建立 vue 聲明文件

在 src 目錄下建立一個 shims-vue.d.ts 文件，這裏叫啥無所謂，可是必需要以 .d.ts 爲後綴.

declare module '*.vue' {
  import Vue from 'vue'
  export default Vue
}
複製代碼

其做用是讓TS編譯器識別 vue 文件.

4. 建立 tsconfig.json

在項目根目錄下建立 tsconfig.json 文件. 這個文件可使用 tsc 命令建立.

$ tsc --init
複製代碼

若是提示沒有 tsc，你須要在全局安裝 typescript

$ npm install typescript -g
複製代碼

文件配置以下：

{
  "compilerOptions": {
    "strict": true,
    "module": "es2015",
    "moduleResolution": "node",
    "target": "es5",
    "allowSyntheticDefaultImports": true,
    "declaration": false,
    "noImplicitAny": true,
    "strictNullChecks": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "allowJs": true,
    "lib": [
      "es2017",
      "es2016",
      "dom"
    ]
  },
  "include": ["src/**/*.*"],
  "exclude": ["node_modules", "build", "dist"]
}
複製代碼

這裏不對配置一一進行介紹，想要了解能夠點擊編譯選項進行閱讀.

5. 用 ts 替換 js 文件

有 4 處文件須要修改

• src/App.vue

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator'

@Component
export default class App extends Vue {
}
</script>
複製代碼

• src/components/HelloWorld.vue

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator'

@Component
export default class HelloWorld extends Vue {
  msg: string = 'Welcome to Your Vue.js App'
}
</script>
複製代碼

• src/router/index.ts

import Vue from 'vue'
import Router, { RouteConfig } from 'vue-router'

import HelloWorld  from '@/components/HelloWorld.vue'
Vue.use(Router)
const routes: RouteConfig[] = [
  {
    path: '/',
    component:HelloWorld
  }
]
export default new Router({
  routes
})
複製代碼

• src/main.ts

import Vue from 'vue'
import App from './App.vue'
import router from './router/index'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})
複製代碼

6. 修改 entry

回到 webpack.base.config.js 配置文件，講入口的 main.js 修改成 main.ts 便可.

module.exports = {
  entry: {
    app: './src/main.ts'
  }
  ...
}
複製代碼

到這裏對 vue-cli2 添加 typescript 升級改造大(qing)功(er)告(yi)成(ju).

相關連接

最後相關示例和總結雙手奉上.

demo示例

升級過程

typescript開發教程