vue 项目 将 javascript 切换 typescript
步骤:
1:添加 tsconfig.json 文件

// tsconfig.json 文件
{
"compilerOptions": {
  "target": "es6",
  "module": "es6",
  "strict": true,
  "jsx": "preserve",
  "importHelpers": true,
  "moduleResolution": "node",
  "allowJs": true,
  "esModuleInterop": true,
  "allowSyntheticDefaultImports": true,
  "experimentalDecorators": true,
  "sourceMap": true,
  "baseUrl": ".",
  "types": [
    "webpack-env"
  ],
  "paths": {
    "@/*": ["src/*"]
  },
  "lib": [ "esnext","dom","dom.iterable","scripthost"]
},
"include": [
  "src/**/*.ts",
  "src/**/*.tsx",
  "src/**/*.vue",
  "tests/**/*.ts",
  "tests/**/*.tsx"
],
"exclude": ["node_modules"]
}

2:修改vue.config.js文件中的入口地址

module.exports = {
  // 修改 pages 入口
  pages: {
  	index: {
  	    // 修改这,以前是 main.js  修改成 main.ts
  		entry: 'src/main.ts', // 入口
  		template: 'public/index.html', // 模板
  		filename: 'index.html' // 输出文件
  	}
  },
  ...
  }

3:添加main.ts 文件

// main.ts
import "./main.js"

4:package.json文件中添加依赖

"devDependencies": {
  "@vue/cli-plugin-babel": "^3.8.0",
  "@vue/cli-plugin-eslint": "^3.8.0",
  "@vue/cli-service": "^3.8.0",
  ...
  }

5:更新依赖

npm install

6:项目中的使用

//  A.vue 文件
<template>
...
</template>
<script lang="ts">
 import Vue from "vue";
 // 注意点  在引入vue文件时,需要添加 .vue 后缀,ts 文件则不需要
 import B from "./B.vue"
 export default Vue.extend({
    ...
 });

更多推荐