vue3+ts项目

### 关于 Vue3 和 TypeScript 的项目配置 #### 1. 使用 `vue-typescript` 进行开发 Vue.js 结合 TypeScript 可以为开发者提供更强的类型安全性和更好的开发体验。通过引入 `vue-typescript` 项目[^1]，可以快速搭建一个支持 TypeScript 的 Vue 开发环境。该项目提供了许多实用的功能来增强 Vue 对 TypeScript 的兼容性。 #### 2. Vite + Vue3 + TypeScript 基本框架搭建 Vite 是一种现代前端构建工具，能够显著提升项目的启动速度和开发效率。结合 Vue3 和 TypeScript，可以通过以下方式创建基础框架： 安装依赖项： ```bash npm init vite@latest my-vue-app --template vue-ts cd my-vue-app npm install ``` 为了进一步扩展功能，还可以加入插件如 `vite-plugin-vue-setup-extend` 来简化组件定义过程[^2]: ```javascript import { defineConfig } from 'vite'; import VueSetupExtend from 'vite-plugin-vue-setup-extend'; export default defineConfig({ plugins: [ VueSetupExtend(), ], }); ``` #### 3. 装饰器的支持 在 Vue 类型化开发中，装饰器是一种非常重要的特性。借助 `vue-property-decorator` 库，可以在类风格的 Vue 组件中使用装饰器语法[^3]。以下是常用的几个装饰器及其作用： - **@Component**: 定义 Vue 组件。 - **@Prop**: 注入父级传递的数据并指定其类型。 - **@Watch**: 监听数据变化。 - **@Inject / @Provide**: 实现跨层通信。 示例代码展示如何利用这些装饰器编写更清晰的逻辑： ```typescript <template> <div>{{ message }}</div> </template> <script lang="ts"> import { Component, Prop, Watch, Vue } from 'vue-property-decorator'; @Component({}) export default class MyComponent extends Vue { @Prop(String) readonly initialMessage!: string; private message = this.initialMessage; @Watch('initialMessage') onInitialMessageChanged(newVal: string): void { console.log(`New value is ${newVal}`); this.message = newVal.toUpperCase(); } } </script> ``` #### 4. ESLint 配置优化 对于大型团队协作或者长期维护的项目来说，统一编码标准至关重要。推荐按照以下方法设置 ESLint 规则以适应 Vue3 和 TypeScript 的需求[^4]: `.eslintrc.json` 文件内容如下所示： ```json { "root": true, "extends": [ "eslint:recommended", "plugin:@typescript-eslint/recommended" ], "parser": "@typescript-eslint/parser", "parserOptions": { "ecmaVersion": 2020, "sourceType": "module", "project": ["./tsconfig.json"] }, "plugins": ["@typescript-eslint"], "rules": {}, "ignorePatterns": ["src/**/*.test.ts", "src/frontend/generated/*"] } ``` 此外还需要配合 Prettier 工具实现自动格式化处理，并通过 Husky 提交前钩子运行 Linter 检查脚本来保持一致性。 --- ###