使用 Vite 构建 Vue 项目的流程非常简洁

  1. 创建项目:npm create vite@latest
  2. 安装依赖:cd my-project && npm install
  3. 开发调试:npm run dev
  4. 构建部署:npm run build

Vite 创建的 Vue 项目结构

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
my-vue-app/
├── node_modules/        # 项目依赖,由 npm install 生成
├── public/              # 静态资源目录。这里的文件会被直接复制到最终构建的根目录,不会被编译。
│   └── favicon.ico
├── src/                 # 源代码目录,你的主要工作区域
│   ├── assets/          # 存放需要被 Vite 处理的静态资源,如图片、CSS 等。
│   ├── components/      # 存放可复用的 Vue 组件。
│   │   └── HelloWorld.vue
│   ├── router/          # 路由配置文件 (如果选择了路由)。
│   ├── stores/          # Pinia 状态管理文件 (如果选择了 Pinia)。
│   ├── views/           # 存放页面级别的组件。
│   ├── App.vue          # 根组件。
│   ├── main.ts          # 入口文件。应用从这里开始执行。
│   └── style.css        # 全局样式文件。
├── .eslintrc.js         # ESLint 配置文件,用于代码检查。
├── .gitignore           # Git 忽略文件配置。
├── index.html           # 应用的 HTML 入口文件。
├── package.json         # 项目配置文件,包含依赖、脚本命令等。
├── tsconfig.json        # TypeScript 配置文件。
└── vite.config.ts       # Vite 的核心配置文件。