Vue and Typescript build project

This time I will bring you a Vue and Typescript construction project. What are the precautions for Vue and Typescript construction projects? The following is a practical case, let’s take a look.

Typescript has gradually become popular in the front-end circle. Vue 2.5.0 has improved the type declaration, making it more friendly to TypeScript

However, if you want to use TypeScript directly in the project, you still need to make some modifications to the project.

PS: It is recommended to use Visual Studio Code for development

##1. Install dependencies

vue init webpack demo

npm install typescript vue-class-component -D

npm install ts-loader@3.3.1 -D

When installing ts-loader above, version 3.3.1 was specified

(2018-03- 14) , when the latest version 4.0.1 of ts-loader is installed, starting the project will report an error

tslint: Standardize ts code and need to be used with tsllint-loader. It is best to add tslint-config-standard;

vue-property-decorator: Extension of vue-class-component, adding several decorators that combine Vue features (@Emit, @Prop, etc.);

vuex-class: Enhanced support for vuex based on vue-class-component.

2. Configure Webpack

{
  test: /\.tsx?$/,
  loader: 'ts-loader',
  exclude: /node_modules/,
  options: {
    appendTsSuffixTo: [/\.vue$/]
  }
}

3. Other configurations

// tsconfig.json{  "compilerOptions": {    // 与 Vue 的浏览器支持保持一致
    "target": "es5",    // 这可以对 `this` 上的数据属性进行更严格的推断
    "strict": true,    // 如果使用 webpack 2+ 或 rollup，可以利用 tree-shake:
    "module": "es2015",    "moduleResolution": "node"
  }
}

// vue-shim.d.tsdeclare module "*.vue" {
  import Vue from "vue";
  export default Vue;
}

4. File transformation

When introducing the .vue file, you need to manually add the .vue suffix

.vue files, you need to add the lang="ts" identifier in