Vue, Typescript project practices

The installation

1. Create a vUE project file with vue-Router reserved, see vue init webpack vue-typescript-Template

2. NPM install –save-dev typescript ts-loader

3. Install tsLint static syntax check: NPM I –save-dev tslint tslint-loader tslint-config-standard

4. Run, access the host test: NPM run dev

configuration

1. build/webpack.base.conf.jsThe:

entry: {
    app: './src/main.js'
}
Copy the code

To:

entry: {
    app: './src/main.ts'
}
Copy the code

Change the file name of SRC /index.js to the corresponding SRC /index.ts.

2. build/webpack.base.conf.jsIn theresolve.extensionsTo:

resolve: {
    extensions: ['.ts'.'.js'.'.vue'.'.json'].alias: {
        'vue$': 'vue/dist/vue.esm.js'.The '@': resolve('src'),}}Copy the code

3. configurationts-loader.build/webpack.base.conf.jsIn themodule.rulesAdd:

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

4. Add in the project root directorytsconfig.jsonThe content of the file is:

{
  "compilerOptions": {
    "strict": true."module": "es2015"."moduleResolution": "node"."target": "es6"."allowSyntheticDefaultImports": true."lib": [
      "es2017"."dom"]},"include": [
    "./src/*"]}Copy the code

5. Run the testnpm run devIf the console reports this error:

error  in ./src/main.ts

Module build failed: TypeError: Cannot read property 'afterCompile' of undefined
    at successfulTypeScriptInstance (/Users/baidu/Github/Vue-TypeScript-Template/node_modules/ts-loader/dist/instances.js:147:28)
    at Object.getTypeScriptInstance (/Users/baidu/Github/Vue-TypeScript-Template/node_modules/ts-loader/dist/instances.js:48:12)
    at Object.loader (/Users/baidu/Github/Vue-TypeScript-Template/node_modules/ts-loader/dist/index.js:16:41) @ multi (webpack)-dev-server/client? http://localhost:8080 webpack/hot/dev-server ./src/main.ts
Copy the code

Official issue of TS-Loader, modify version “TS-loader “: “3.5.0” in package.json, reinstall it, but this is also a temporary solution, remember to upgrade after the official compatibility is resolved.

6. configurationtslintIn thebuild/webpack.base.conf.jsIn themodule.rulesAdd:

{
    test: /\.tsx? $/.// tsLint code checks to open comments available
    loader: 'tslint-loader'.enforce: 'pre'.include: [resolve('src'), resolve('test')].exclude: /node_modules/
}
Copy the code

7. build/vue-loader.conf.jsRevised in the document:

// ...
const merge = require('webpack-merge')

module.exports = {
  loaders: merge(utils.cssLoaders({
    sourceMap: sourceMapEnabled,
    extract: isProduction
  }), {
    ts: ['ts-loader'.'tslint-loader']}),// ...
}
Copy the code

8. insrc/Add to foldertslint.jsonThe content of the file is:

{
  "extends": "tslint:recommended"."globals": {
    "require": true
  },
  "rulesDirectory": ["src/"]."rules": {
    "no-consecutive-blank-lines": false."object-literal-sort-keys": false."no-trailing-whitespace": false."no-unused-expression": [true."allow-new"]}}Copy the code

Code changes

1. insrc/File creationvue-shims.d.tsThe content of the file is:

declare module "*.vue" {
  import Vue from "vue";
  export default Vue;
}
Copy the code

2. SRC/all.js in the file changed to.ts

3. The SRC/app. vue file is changed to:

<script lang="ts">
import Vue from "vue";
const App = Vue.extend({
  name: "App"});export default App;
</script>
Copy the code

Class vue.extend ({}) is created by adding

4. Modify all pairs*.vueDocument reference:

import App from "./App";
import HelloWorld from ".. /components/HelloWorld";
Copy the code

To:

import App from "./App.vue";
import HelloWorld from "@/components/HelloWorld.vue";
Copy the code

All references to *. Vue end with *. Vue

Run the test

Run NPM run dev to test the effect

conclusion

The above configuration process is a successful process of adding typescript, TS-Loader, tsLint to a VUE project after it is created based on the official VUE scaffolding. Vuex will be added later, and vuE-class-Component, vuex-class, vuE-property-decorator will be incorporated into the project for further implementation.

Github

Project reference Address: github.com/liuchunhui/…