vue cli4.0项目引入typescript的方法

Vue CLI 4.0是一个强大的工具，用于快速搭建基于Vue.js的项目。它提供了许多预设和自动化功能，包括对TypeScript的支持。在Vue CLI 4.0中引入TypeScript，可以帮助开发者利用静态类型检查来提升项目的质量和可维护性。以下是详细步骤： 1. **安装TypeScript和Vue CLI TypeScript插件**在终端中，运行以下命令来安装TypeScript和Vue CLI的TypeScript插件： ``` npm install --save-dev typescript npm install --save-dev @vue/cli-plugin-typescript ```这将安装TypeScript作为开发依赖，并添加Vue CLI的TypeScript插件，以支持项目中的TypeScript配置和集成。 2. **配置TypeScript**创建`tsconfig.json`文件在项目根目录下，这是TypeScript的配置文件，用来指定编译选项。以下是一个基本的配置示例： ```json { "compilerOptions": { "target": "esnext", "module": "esnext", "strict": true, "importHelpers": true, "moduleResolution": "node", "experimentalDecorators": true, "esModuleInterop": true, "allowSyntheticDefaultImports": true, "sourceMap": true, "baseUrl": ".", "allowJs": false, "noEmit": true, "types": ["webpack-env"], "paths": { "@/*": ["src/*"] }, "lib": ["esnext", "dom.iterable", "scripthost"] }, "exclude": ["node_modules"] } ```这些选项定义了编译目标、模块系统、严格模式等。`paths`配置用于解决模块路径别名，便于在项目中引用模块。 3. **创建TypeScript兼容的Vue文件声明**在根目录下创建`shims-vue.d.ts`文件，让TypeScript能够识别`.vue`文件： ```typescript declare module '*.vue' { import Vue from 'vue'; export default Vue; } ``` 4. **更改入口文件**将`src/main.js`文件重命名为`src/main.ts`，表示该文件是TypeScript编写的。 5. **转换`.vue`文件**更新所有`.vue`文件，添加`lang="ts"`属性到``标签，例如： ```html // TypeScript代码 ``` 6. **使用装饰器插件**装饰器插件如`vue-class-component`和`vue-property-decorator`可以增强Vue组件的功能，允许使用TypeScript装饰器。安装这两个插件： ``` npm install --save vue-class-component vue-property-decorator ```然后在组件中导入并使用它们，如示例所示： ```typescript import { Vue, Component, Watch } from 'vue-property-decorator'; @Component({ components: { Loading } }) export default class App extends Vue { old_back: object = null; transitionName: string = "slide-right"; // ... } ``` 7. **使用状态管理与装饰器**示例代码中展示了如何使用`@Watch`装饰器监听`loadingStatus`状态的变化。这使得我们可以更方便地在组件中处理Vue实例的响应式属性。通过以上步骤，一个Vue CLI 4.0项目就可以成功地引入TypeScript并开始享受其带来的好处，例如静态类型检查、更好的代码提示和更少的运行时错误。同时，使用Vue Class Component和Vue Property Decorator可以进一步提升组件的可读性和可维护性。