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

First use vue-cli to generate the project

vue init webpack demo

Then install the necessary dependencies: typescript, ts-loader, vue-class-component

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

This is because when writing this blog

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

In addition, there are several libraries that can be introduced on demand:

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

Then modify the ./build/webpack.base.conf.js file:

Add '.ts' in resolve.extension so that you don't need to write the .ts suffix when importing ts files

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

In module.rules Add webpack's parsing of ts files

3. Other configurations

Create the tsconfig.json file in the project root directory:

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

For complete tsconfig.json configuration items, please refer to the official documentation

Create the vue-shim.d.ts file in the ./src directory and let ts recognize the .vue file:

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

4. File transformation

Change the suffix of all js files in the src directory to .ts

Then Modify the entry in the webpack configuration file ./build/webpack.base.conf.js to main.ts

The transformed ts file will not recognize the .vue file , so

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

In all

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