Vue3-Vite-TS-AntD项目搭建指南

一、准备工作
在开始之前，请确保你已经安装了Node.js和npm（Node Package Manager）。你可以在终端中输入以下命令检查它们的版本：

1. node -v
2. npm -v
   如果未安装Node.js和npm，请前往Node.js官网下载并安装最新版本。
   二、创建新项目
   使用Vue CLI创建新项目，打开终端，进入你想要创建项目的目录，然后输入以下命令：
3. vue create my-project
   其中，my-project是你想要创建的项目名称。在创建过程中，你可以选择预设功能，也可以手动选择需要的配置。
   三、安装依赖
   进入项目目录，然后安装Vite、TypeScript和Ant Design Vue等依赖：
4. cd my-project
5. npm install vite ts-loader @ant-design/icons @ant-design/icons-vue @ant-design/icons-vue@next
   其中，ts-loader是TypeScript的加载器，用于将TypeScript代码转译为JavaScript代码。@ant-design/icons和@ant-design/icons-vue是Ant Design的图标库。
   四、配置Vite
   在项目根目录下创建一个名为vite.config.ts的文件，用于配置Vite。在该文件中，你需要设置一些基本的配置项，例如：
6. 设置@指向src目录，即指定src目录为项目的入口目录。
7. 设置服务启动端口，例如：export default defineConfig({ base: ‘./‘, port: 8080 });
8. 设置打包路径和代理等。例如：export default defineConfig({ alias: { ‘~’: ‘/src’ }, proxy: { ‘/api’: { target: ‘http://localhost:8000‘, pathRewrite: { ‘^/api’: ‘’ } } } });
   五、配置TypeScript
   在项目的根目录下创建一个名为tsconfig.json的文件，用于配置TypeScript。在该文件中，你需要设置一些基本的配置项，例如：
9. 编译目标（target）：设置为ESNext。
10. 模块系统（module system）：设置为ESNext或者CommonJS。
11. 声明文件（declaration files）：设置为true。
12. 编译参数（compilerOptions）：设置其他必要的选项，例如noImplicitAny和strictNullChecks等。
    六、编写代码
    在src目录下创建你的Vue组件和TypeScript类型定义文件。你可以使用Ant Design Vue提供的组件库来快速搭建你的项目。在你的Vue组件中，你可以使用TypeScript的类型定义来提高代码的可读性和可维护性。
    七、运行项目
    在终端中输入以下命令来启动项目：
13. npm run dev 或 npm run serve
    这将启动一个开发服务器，并在浏览器中打开你的应用程序。你可以使用Vite的热模块替换（HMR）功能来实时查看代码修改的效果。
    八、构建生产版本
    当你的应用程序开发完成后，你可以使用以下命令构建生产版本：
14. npm run build
    这将使用Vite的构建功能来生成生产版本的应用程序包。你可以将这些包部署到生产环境中的服务器上。