介绍

开发技术

DZ-SHOP后台框架基于 Vue-Vben-Admin 最新版本，在改进的基础上持续与官方同步。

Vue-Vben-Admin 是一个基于 Vue3.0、Vite、 Ant-Design-Vue、TypeScript 的后台解决方案，目标是为开发中大型项目提供开箱即用的解决方案。包括二次封装组件、utils、hooks、动态菜单、权限校验、按钮级别权限控制等功能。项目会使用前端较新的技术栈，可以作为项目的启动模版，以帮助你快速搭建企业级中后台产品原型。也可以作为一个示例，用于学习 vue3、vite、ts 等主流技术。

Vue-Vben-Admin文档地址： https://doc.vvbin.cn/

基础知识

本项目需要一定前端基础知识，请确保掌握 Vue 的基础知识，以便能处理一些常见的问题。 建议在开发前先学一下以下内容，提前了解和学习这些知识，会对项目理解非常有帮助:

• Vue3 文档
• Vue-RFCS
• Vue2 迁移到 3
• TypeScript
• Vue-router
• Ant-Design-Vue
• Es6
• Vitejs
• WindiCss

浏览器支持

推荐使用 Chrome浏览器

IE / Edge	Firefox	Chrome	Safari	iOS Safari	Samsung	Opera
IE11, Edge	last 2 versions	last 2 versions	last 2 versions	last 2 versions	last 2 versions	last 2 versions

vite插件推荐

如果这些插件对你有帮助，可以给一个 star 支持下：

• vite-plugin-mock - 用于本地及开发环境数据 mock
• vite-plugin-html - 用于 html 模版转换，可以在html文件内进行书写模版语法
• vite-plugin-style-import - 用于组件库样式按需引入
• vite-plugin-imagemin - 用于打包压缩图片资源
• vite-plugin-theme - 用于在线切换主题色/黑暗主题适配等主题相关配置
• vite-plugin-compression - 用于打包输出.gz|.br文件
• vite-plugin-svg-icons - 快速生成 svg sprite

获取后台代码

前往 授权&下载中心 下载后台代码。

目录结构

┌── build                           打包脚本相关
│   ├── config                      配置文件
│   ├── generate                    生成器
│   ├── script                      脚本
│   └── vite                        vite配置
├── mock                            mock文件夹
├── public                          公共静态资源目录
├── src                             主目录
│   ├── api                         接口文件
│   ├── assets                      资源文件
│   │   ├── icons                   icon sprite 图标文件夹
│   │   ├── images                  项目存放图片的文件夹
│   │   └── svg                     项目存放svg图片的文件夹
│   ├── components                  公共组件
│   ├── design                      样式文件
│   ├── directives                  指令
│   ├── enums                       枚举/常量
│   ├── hooks                       hook
│   │   ├── component               组件相关hook
│   │   ├── core                    基础hook
│   │   ├── event                   事件相关hook
│   │   ├── setting                 配置相关hook
│   │   └── web                     web相关hook
│   ├── layouts                     布局文件
│   │   ├── default                 默认布局
│   │   ├── iframe                  iframe布局
│   │   └── page                    页面布局
│   ├── locales                     多语言
│   ├── logics                      逻辑
│   ├── main.ts                     主入口
│   ├── router                      路由配置
│   ├── settings                    项目配置
│   │   ├── componentSetting.ts     组件配置
│   │   ├── designSetting.ts        样式配置
│   │   ├── encryptionSetting.ts    加密配置
│   │   ├── localeSetting.ts        多语言配置
│   │   ├── projectSetting.ts       项目配置
│   │   └── siteSetting.ts          站点配置
│   ├── store                       数据仓库
│   ├── utils                       工具类
│   └── views                       页面
├── test # 测试
│   └── server                      测试用到的服务
│       ├── api                     测试服务器
│       ├── upload                  测试上传服务器
│       └── websocket               测试ws服务器
├── types # 类型文件
├── vite.config.ts                  vite配置文件
└── windi.config.ts                 windcss配置文件

开发工具

推荐使用vscode，并安装以下工具来提高开发效率：

• Vetur - vue 开发必备
• ESLint - 脚本代码检查
• JavaScript (ES6) code snippets - ES6语法智能提示
• Iconify IntelliSense - Iconify 图标插件
• windicss IntelliSense - windicss 提示插件
• Prettier - 代码格式化
• Stylelint - css 格式化
• DotENV - .env 文件 高亮

开发环境

本地环境需要安装 Node.js、pnpm。

注意：

Node.js 版本要求12.x以上，且不能为13.x版本，这里推荐 14.x 及以上。

推荐使用pnpm，否则依赖可能安装不上。

安装Node.js

获取Node.js并安装。

安装完以后可以执行以下代码验证：

# 出现相应npm版本即可
npm -v
# 出现相应node版本即可
node -v

如果你需要同时存在多个 node 版本，可以使用 Nvm 或者其他工具进行 Node.js 进行版本管理。

安装pnmp

# 全局安装pnpm
npm install -g pnpm
# 验证
pnpm -v # 出现对应版本号即代表安装成功

安装依赖

注意

考虑到各种原因（比如多文件提交卡死，提交速度慢等），dz-shop在官方的基础上去掉了husky，如需husky请参考Vue-Vben-Admin自行添加。

在项目根目录下，打开命令窗口，或者在VsCode项目终端下执行以下命令：

# 安装依赖，耐心等待执行完成
pnpm i

运行项目

在项目根目录下，打开命令窗口，或者在VsCode项目终端下执行以下命令：

# 安装依赖，耐心等待执行完成
pnpm serve

打包项目

在项目根目录下，打开命令窗口，或者在VsCode项目终端下执行以下命令：

pnpm build