vite vue3 项目搭建

### 使用 Vite 搭建 Vue 3 项目的教程

#### 创建项目结构
为了使用 Vite 构建 Vue 3 项目，首先需要初始化一个新的 npm 项目并安装必要的依赖项。`type` 字段表明这是一个模块化项目[^1]。

npm init vite@latest my-vue-app --template vue
cd my-vue-app
npm install

#### 定义脚本命令
在 `package.json` 文件中的 `scripts` 字段定义了多个有用的脚本来帮助管理不同阶段的任务：

- **开发**: 启动带有热重载功能的本地开发服务器。

    "dev": "vite"

- **构建**: 将应用程序打包成生产环境可用的形式。

    "build": "vite build"

- **预览**: 提供一种方式来查看已编译的应用程序而无需启动完整的开发服务器。

    "preview": "vite preview"

这些命令简化了日常开发流程，并确保最佳性能和兼容性。

#### 添加依赖包
除了核心框架外，还需要指定一些开发时使用的工具作为 `devDependencies` ，比如 Vite 及其特定于 Vue 的插件；同时也要声明运行应用所需的库（如 Vue.js），它们会被列在 `dependencies` 中。

#### 设置路由配置
对于更复杂的单页应用 (SPA)，可以在 `src/routes/` 下创建一个名为 `index.ts` 的文件用来设置路由规则，在相应的视图组件所在的目录内建立 `.vue` 文件即可完成基本页面布局[^3]。

// src/routes/index.ts
import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'home',
      component: HomeView,
    },
    // Add more route definitions here...
  ],
})

export default router;

最后，当一切准备就绪之后，按照提示操作就能顺利访问到新创建好的 Vue 3 应用了[^2]。