推荐使用 create-vue 初始化 vue3 + vite 项目，配合 typescript、vue router、pinia、eslint 和 prettier；目录按后台系统逻辑分层为 assets、components、views、router、stores、api、utils、hooks；补全 vite.config.ts 别名、tsconfig.json 类型声明及 eslint 规则。
直接用官方推荐的 create-vue 工具初始化，配合 Vite 构建，再按后台系统逻辑分层组织目录，不绕弯、不返工。
环境准备：Node.js 和包管理器
确保本地已安装 Node.js（建议 v18.x 或 v20.x LTS 版本），运行以下命令验证：
-
node -v—— 应输出 v18.20+ 或 v20.x -
npm -v或pnpm -v—— npm 自带，但更推荐全局安装 pnpm：npm install -g pnpm
如未安装 Node.js，去官网下载 LTS 安装包，默认勾选 “Add to PATH” 即可。不需要额外装 Vue CLI，create-vue 是 Vue 官方当前主推方式。
项目初始化：一步创建 Vue3 + Vite 项目
在终端中执行：
-
npm init vue@latest（或pnpm create vue@latest） - 按提示输入项目名，例如
admin-system - 关键选项建议：
- TypeScript？→ 按需选，后台系统建议选 Yes（接口多、类型安全收益高）
- Vue Router？→ Yes（路由是后台系统刚需）
- Pinia？→ Yes（Vue3 生态事实标准状态库）
- ESLint？→ Yes（团队协作和长期维护必需）
- Prettier？→ 可选，但建议一起配，避免格式争议
完成后进入目录并安装依赖：cd admin-system && pnpm install，再运行 pnpm dev 启动开发服务器。
目录结构设计：围绕“数据管理”而非“页面视觉”
初始生成的结构偏通用，后台系统需主动调整为模块化分层。推荐在 src/ 下建立如下核心目录：
-
assets/：字体、图标 SVG、基础样式变量（如variables.scss） -
components/：真正可跨模块复用的 UI 组件（如TableSearch.vue、DialogConfirm.vue） -
views/：按业务域划分子目录，例如views/user/、views/role/、views/log/，每个子目录含页面组件 + 对应 API 文件 -
router/：拆分为index.ts（总入口）和modules/（各模块路由文件，如userRouter.ts），支持动态导入和权限控制 -
stores/：Pinia store 按功能划分，如useUserStore.ts、useAuthStore.ts -
api/：统一请求封装（request.ts）+ 各模块 API 函数（userApi.ts、roleApi.ts） -
utils/：工具函数（日期格式化、权限判断、导出 Excel 等） -
hooks/（或composables/）：逻辑复用组合式函数（如useTableData、useFormRules）
避免把所有组件塞进 components/，也别让 views/ 变成“大杂烩”。模块边界清晰，后期增删功能、交接代码才不卡壳。
关键配置补全：让工程更健壮
初始化后建议立即补充几项配置：
-
vite.config.ts：添加路径别名，例如@/api指向src/api，避免 ../../../ 的嵌套导入 -
tsconfig.json：检查compilerOptions.types是否包含"vite/client"和"vue/macros"（如用到 defineOptions 等） -
eslint.config.mjs（或 .cjs）：启用 Vue 插件规则，如vue/multi-word-component-names、vue/require-default-prop - 在
main.ts中提前引入全局样式、注册全局组件（如ElMessage）、注入 Pinia 和 Router 实例
这些不是“锦上添花”，而是防止后续多人协作时出现路径混乱、类型报错、警告泛滥等问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
