从零开始搭建一个 Vue 3 + Vite + TypeScript 的项目使用 Vite 搭建一个基于 Vue 3 和

使用 Vite 搭建一个基于 Vue 3 和 TypeScript 的新项目是一个非常高效的选择。Vite 是一个现代化的前端构建工具，它提供了极快的冷启动和热更新速度，非常适合开发 Vue 3 项目。

以下是详细的步骤，帮助你从零开始搭建一个 Vue 3 + Vite + TypeScript 的项目：

1. 安装 Node.js 和 npm

确保你的开发环境已经安装了 Node.js 和 npm。你可以通过以下命令检查是否已安装：

node -v
npm -v

如果尚未安装，请前往 Node.js 官网下载并安装。

2. 创建项目

使用 Vite 提供的命令行工具创建新项目。打开终端或命令行工具，运行以下命令：

npm create vite@latest my-vue3-vite-ts-project -- --template vue-ts

my-vue3-vite-ts-project 是你的项目名称。
--template vue-ts 指定使用 Vue 3 和 TypeScript 的模板。

3. 进入项目目录

cd my-vue3-vite-ts-project

4. 启动开发服务器

运行以下命令启动开发服务器：

npm run dev

Vite 会自动启动开发服务器，并在浏览器中打开项目。默认地址通常是 http://localhost:3000。

5. 项目结构

创建完成后，你的项目目录结构大致如下：

my-vue3-vite-ts-project/
├── node_modules/
├── public/
│   └── vite.svg
├── src/
│   ├── assets/
│   │   └── logo.svg
│   ├── components/
│   │   └── HelloWorld.vue
│   ├── App.vue
│   ├── main.ts
│   └── vite-env.d.ts
├── .gitignore
├── index.html
├── package.json
├── tsconfig.json
└── vite.config.ts

6. 项目文件说明

src/main.ts：项目的入口文件，负责挂载 Vue 应用。
src/App.vue：根组件，是整个应用的入口组件。
src/components/HelloWorld.vue：一个示例组件。
vite.config.ts：Vite 的配置文件，支持 TypeScript。
tsconfig.json：TypeScript 的配置文件。
package.json：项目的依赖和脚本配置。

7. 编写代码

修改 `src/App.vue`

<template>
  <div class="app">
    <h1>{{ message }}</h1>
    <HelloWorld :msg="message" />
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import HelloWorld from './components/HelloWorld.vue';

export default defineComponent({
  name: 'App',
  components: {
    HelloWorld
  },
  data() {
    return {
      message: 'Hello Vue 3 + Vite + TypeScript!'
    };
  }
});
</script>

<style>
.app {
  text-align: center;
  margin-top: 50px;
}
</style>

修改 `src/components/HelloWorld.vue`

<template>
  <div class="hello">
    <h2>{{ msg }}</h2>
  </div>
</template>

<script lang="ts">
import { defineComponent, PropType } from 'vue';

export default defineComponent({
  name: 'HelloWorld',
  props: {
    msg: {
      type: String as PropType<string>,
      required: true
    }
  }
});
</script>

<style scoped>
.hello {
  color: #42b983;
}
</style>

8. 运行和调试

启动开发服务器：
```
npm run dev
```
修改代码后，Vite 会自动热更新，无需手动刷新页面。

9. 构建生产版本

当你准备部署应用时，运行以下命令生成生产版本：

npm run build

构建后的文件会生成在 dist/ 目录中，你可以将这些文件部署到任何静态服务器上。

10. 部署

将 dist/ 目录的内容部署到静态服务器（如 Netlify、Vercel 或 GitHub Pages）即可。

总结

通过 Vite 搭建 Vue 3 + TypeScript 项目非常简单且高效。Vite 提供了快速的开发体验和现代化的工具链支持，非常适合现代前端开发。如果你有任何问题或需要进一步扩展功能，可以随时查阅 Vite 官方文档或 Vue 3 官方文档。

从零开始搭建一个 Vue 3 + Vite + TypeScript 的项目