Vite 项目管理

Vite 是一个现代前端构建工具，提供了快速的开发服务器和高效的构建流程

创建 Vite 项目

参考官方文档的Getting Started，使用 npm 或 yarn 创建一个新的 Vite 项目：

~ npm create vite@latest
> npx
> create-vite

│
◇  Project name:
│  vite-vue-demo  # 项目名
◇  Select a framework:
│  ○ Vanilla
│  ● Vue  # 选择 Vue
│  ○ React
│  ○ Preact
│  ○ Lit
│  ○ Svelte
│  ○ Solid
│  ○ Qwik
│  ○ Angular
│  ○ Marko
│  ○ Others
◇  Select a variant:
│  ● TypeScript # 选择 TypeScript, 相比 JavaScript 多了类型检查
│  ○ JavaScript
│  ○ Official Vue Starter ↗
│  ○ Nuxt ↗
│  ○ Vike ↗
◆  Use rolldown-vite (Experimental)?:
│  ● Yes (The future default Vite, which is powered by Rolldown) # 选择 Yes 使用实验性的 rolldown-vite, 新版本的 Vite 将基于 Rolldown 构建，提升构建性能
│  ○ No
◆  Install with npm and start now?
│  ○ Yes / ● No # 选择 No, 稍后手动安装依赖
│
◇  Scaffolding project in /Workspace/vite-vue-demo...
│
└  Done. Now run:

  cd vite-vue-demo
  npm install
  npm run dev

上面的命令会创建一个名为 vite-vue-demo 的新目录，并在其中生成一个基于 Vue 和 TypeScript 的 Vite 项目。执行 cd vite-vue-demo 进入项目目录，然后运行 npm install 安装依赖，最后运行 npm run dev 启动开发服务器

项目结构

项目结构如下：

~ tree -L 2 vite-vue-demo
vite-vue-demo
├── index.html # 项目入口文件
├── package.json # 项目依赖
├── public # 静态资源目录
│   └── vite.svg
├── README.md # 项目描述
├── src # 项目源码
│   ├── App.vue # 项目入口文件
│   ├── assets # 静态资源
│   ├── components # 组件
│   ├── main.ts # 项目入口文件
│   └── style.css # 项目样式
├── tsconfig.app.json  # TypeScript 配置
├── tsconfig.json # TypeScript 配置
├── tsconfig.node.json # TypeScript 配置
└── vite.config.ts # Vite 配置