vue3 ts 项目搭建

Vue 3 和 TypeScript 结合可以提供强大的类型安全性和更好的开发者体验。以下是创建一个 Vue 3 TypeScript 项目的步骤：

1. **安装依赖**:
- 安装 Node.js 和 npm 或 yarn (推荐使用 Yarn)

   npm install -g create-vue-cli @vue/cli

2. **创建项目**:
使用 `@vue/cli` 创建一个新的 Vue 3 TypeScript 项目：

   npx create-vue-app my-project --type=ts

或者指定版本：

   npx create-vue-app my-project@next --preset typescript

3. **配置**:
- 进入项目目录：

     cd my-project

- 配置 `tsconfig.json` 以启用 TypeScript 支持，并设置其他选项如全局搜索路径 (`compilerOptions.paths`)。
- 更新 `.eslintrc.js` 或者 `.vimrc`，以支持 TypeScript 的 linting 规则。

4. **引用 TypeScript**:
- 修改 `src/App.vue` 或组件文件，添加 `export default defineComponent` 而不是 `export default { ... }`，这是 Vue 3 的新语法，同时引入 TypeScript 类型支持。

5. **开始编写 TypeScript**:
现在你可以像平常编写 JavaScript 一样创建组件，Vue 会自动推断类型并提供类型检查。使用 `import * as Component from 'your-component'` 导入组件时，TypeScript 会为你提供自动完成和类型提示。