# vue3+ts后台管理架构 **Repository Path**: shengjon/crm ## Basic Information - **Project Name**: vue3+ts后台管理架构 - **Description**: 最干净的后台管理脚手架，使用vue3+vite+ts，集成 pinia、axios、element-plus、esLint 、prettier、commitlint - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 2 - **Forks**: 0 - **Created**: 2023-03-27 - **Last Updated**: 2025-04-24 ## Categories & Tags **Categories**: Uncategorized **Tags**: vue3, TypeScript, element-plus, Pinia, admin ## README ### 环境说明： - 前往 https://nodejs.org/zh-cn/ 下载当前版本node - 命令行运行 `node -v` 若控制台输出版本号则前端环境搭建成功 - node 版本 18.x 或 (大于 16.4) - 开发工具vscode https://code.visualstudio.com/ ### 启动项目： 1. 克隆项目 2. cd 进入项目目录 3. 安装 pnpm 4. `pnpm i` 安装依赖 5. 使用 `pnpm run dev` 命令启动项目 ### 项目说明： - 项目使用 vscode 进行开发，vscode 无需安装任何插件、任何配置，项目内有 vscode 相关配置文件，插件可根据提示安装 （vscode 主题可自行配置） - 项目使用自动导入插件，UI 组件、自定义组件、icon、vueRouter无需手动导入注册、可直接使用 - 项目路由根据 views 文件自动生成，单个页面只能有一个 index.vue 文件，可参考：views/menu - script 标签内使用 element 组件 eslint 报错，参考 eslintrc ---> global 配置 - git main：为生产分支，develop：为开发主分支，开发需自行创建新的开发分支 ### vscode 插件说明： - 可根据自己需求自行选择安装 - 以下插件已在 .vscode ---> setting.json 中配置 ``` Auto Import # 自动查找、解析并提供所有可用导入的代码操作 Color Highlight # 颜色自动显示 CSS Initial Value # 显示每个 CSS 属性初始值 Dot Log # 快速输出 log 语句 DotENV # env 语法高亮显示 ESLint # 检查代码错误 Highlight Matching Tag # 高亮显示对应的HTML标签以及标识出对应的各种括号 HTML Boilerplate # ! 快速生成 html 模板 HTML CSS Support # 引用的CSS在HTML文件中提供智能提示 Import Cost # 编译的时候看到引入的文件大小 indent-rainbow # 彩虹缩进 koroFileHeader # 自动生成头部注释、函数注释 （头部注释目前没有配置） Intellisense # 自动补全引入 node modules 里面所安装的依赖 Path Intellisense # 引入路径自动补全 Prettier # 代码格式化 SVG # svg 预览，转换图片 Template String Converter # 在字符串中输入$触发，将字符串转换为模板字符串 TypeScript Importer # 快速找到声明的类型并自动导入所需要类型 TypeScript Vue Plugin (Volar) # vue3 扩展 vscode-icons # vscode 图标 Vue Language Features (Volar) # vue3 扩展 Vue VSCode Snippe # 快速生成 Vue 代码片段 ``` ### git 提交说明： ``` git pull # 拉取远程仓库代码 git status # 查看是否有对文件修改 git add . # 暂存文件 git cz # 代替 git commit 将暂存内容添加到本地仓库 （注意：键入该命令后有三个步骤，1. 选择提交说明，2. 输入短描述，3. 输入详细描述） git push # 将代码提交到远程仓库 ``` ### 技术选型： ``` pnpm # 包管理工具 husky + commitlint # git 提交规范校验 vue3.2.x # 基础框架 vite # 构建工具 element-plus # UI 组件库 pinia # 状态管理 axios # 网络请求 scss # css 预处理 typescript # 类型检查、环境声明 esLint # 代码语法检查 prettier # 代码格式化 ``` ### 项目目录结构说明： ``` ├─ .env.development # 开发环境配置 ├─ .eslintrc-auto-import.json # eslint 自动引入配置 ├─ .eslintrc.cjs # eslint 配置 ├─ .eslintrcignore # eslint 忽略文件 ├─ .gitignore # git 忽略文件 ├─ .husky # husky 配置文件 ├─ .prettierignore # prettier 忽略文件 ├─ .prettierrc.cjs # prettier 配置文件 ├─ changelog.config.cjs # git 提交规范配置 ├─ commitlint.config.cjs # git 提交规范配置 ├─ components.d.ts # 自动导入组件声明 ├─ index.html # 入口 html ├─ package.json # 依赖包管理 ├─ pnpm-lock.yaml # 依赖包包版本锁 ├─ public # 静态资源文件 （改文件不会被打包） ├─ README.md # README 介绍 ├─ src │ ├─ App.vue # 项目主文件 │ ├─ assets # 静态资源文件 │ ├─ auto-import.d.ts # vue 自动导入识别 │ ├─ components # 全局组件 │ ├─ config # 全局配置项 │ ├─ layouts # 框架布局模块 │ ├─ main.ts # 项目入口文件 │ ├─ router # 项目路由文件 │ ├─ store # pinia store │ ├─ style.css # 全局样式文件 │ ├─ styles │ ├─ test # 路由测试数据 │ │ └─ dynamicRouter.json │ ├─ types # 全局 ts 声明 │ ├─ utils # 常用工具库 │ ├─ views # 项目所有页面 │ └─ vite-env.d.ts # 制定 ts 识别 vue ├─ tsconfig.json # ts 全局配置 ├─ tsconfig.node.json # 用于 vite.config.ts 的 ts 配置 └─ vite.config.ts # vite 全局配置 ```