记一次使用vue-vben-admin的过程

Vben Admin

基础资料

基于Vue3.0+Vite+Ant-Design-Vue+TypeScript的中后台开源脚手架

环境准备

  • 安装nvm、nodejs
1
2
nvm install 16.14.2
nvm use 16.14.2
  • 安装pnpm:npm install -g pnpm
1
2
3
4
5
6
7
8
9
10
11
速度问题
1. 查看当前镜像源
pnpm config get registry
2. 设置为淘宝镜像源
pnpm config set registry https://registry.npmmirror.com
3. 切回原镜像源
pnpm config set registry https://registry.npmjs.org

失败问题
1.清除缓存
pnpm cache clean --force
  • 克隆代码:git clone https://github.com/vbenjs/vue-vben-admin.git
  • 安装依赖:pnpm i
1
一次不行就多试几次

脚本命令

npm scripts

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
"scripts": {
# 安装依赖
"bootstrap": "yarn install",
# 运行项目
"serve": "npm run dev",
# 运行项目
"dev": "vite",
# 构建项目
"build": "vite build && esno ./build/script/postBuild.ts",
# 清空缓存后构建项目
"build:no-cache": "yarn clean:cache && npm run build",
# 生成打包分析,在 `Mac OS` 电脑上执行完成后会自动打开界面,在 `Window` 电脑上执行完成后需要打开 `./build/.cache/stats.html` 查看
"report": "cross-env REPORT=true npm run build",
# 类型检查
"type:check": "vue-tsc --noEmit --skipLibCheck",
# 预览打包后的内容(先打包在进行预览)
"preview": "npm run build && vite preview",
# 直接预览本地 dist 文件目录
"preview:dist": "vite preview",
# 生成 ChangeLog
"log": "conventional-changelog -p angular -i CHANGELOG.md -s",
# 删除缓存
"clean:cache": "rimraf node_modules/.cache/ && rimraf node_modules/.vite",
# 删除 node_modules (`window` 系统手动删除该目录较慢,可以使用该命令来进行删除)
"clean:lib": "rimraf node_modules",
# 执行 eslint 校验,并修复部分问题
"lint:eslint": "eslint \"{src,mock}/**/*.{vue,ts,tsx}\" --fix",
# 执行 prettier 格式化(该命令会对项目所有代码进行 prettier 格式化,请谨慎执行)
"lint:prettier": "prettier --write --loglevel warn \"src/**/*.{js,json,tsx,css,less,scss,vue,html,md}\"",
# 执行 stylelint 格式化
"lint:stylelint": "stylelint --fix \"**/*.{vue,less,postcss,css,scss}\" --cache --cache-location node_modules/.cache/stylelint/",
"lint:lint-staged": "lint-staged -c ./.husky/lintstagedrc.js",
"lint:pretty": "pretty-quick --staged",
# 对打包结果进行 gzip 测试
"test:gzip": "http-server dist --cors --gzip -c-1",
# 对打包目录进行 brotli 测试
"test:br": "http-server dist --cors --brotli -c-1",
# 重新安装依赖,见下方说明
"reinstall": "rimraf yarn.lock && rimraf package.lock.json && rimraf node_modules && npm run bootstrap",
"install:husky": "is-ci || husky install",
# 生成图标集,见下方说明
"gen:icon": "esno ./build/generate/icon/index.ts",
"postinstall": "npm run install:husky"
},

目录说明

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
.
├── 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配置文件

项目配置

环境变量

  • .env
1
2
3
4
5
6
7
# 所有环境适用
# 端口号
VITE_PORT=3100
# spa网站标题
VITE_GLOB_APP_TITLE = Vben Admin
# 简称,用于配置文件名字 不要出现空格、数字开头等特殊字符
VITE_GLOB_APP_SHORT_NAME=vben_admin
  • .env.development
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
# 开发环境适用
# 是否开启mock数据,关闭时需要自行对接后台接口
VITE_USE_MOCK = true
# 资源公共路径,需要以 /开头和结尾
VITE_PUBLIC_PATH = /
# 是否删除Console.log
VITE_DROP_CONSOLE=false
# 本地开发代理,可以解决跨域及多地址代理
# 如果接口地址匹配到,则会转发到http://localhost:3000,防止本地出现跨域问题
# 可以有多个,注意多个不能换行,否则代理将会失效
VITE_PROXY=[["/api","http://localhost:3000"],["api1","http://localhost:3001"],["/upload","http://localhost:3001/upload"]]
# 接口地址
# 如果没有跨域问题,直接在这里配置即可
VITE_GLOB_API_URL=/api
# 文件上传接口 可选
VITE_GLOB_UPLOAD_URL=/upload
# 接口地址前缀,有些系统所有接口地址都有前缀,可以在这里统一加,方便切换
VITE_GLOB_API_URL_PREFIX=
  • .env.production
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
# 生产环境适用
# 是否开启mock
VITE_USE_MOCK=true
# 接口地址 可以由nginx做转发或者直接写实际地址
VITE_GLOB_API_URL=/api
# 文件上传地址 可以由nginx做转发或者直接写实际地址
VITE_GLOB_UPLOAD_URL=/upload
# 接口地址前缀,有些系统所有接口地址都有前缀,可以在这里统一加,方便切换
VITE_GLOB_API_URL_PREFIX=
# 是否删除Console.log
VITE_DROP_CONSOLE=true
# 资源公共路径,需要以 / 开头和结尾
VITE_PUBLIC_PATH=/
# 打包是否输出gz|br文件
# 可选: gzip | brotli | none
# 也可以有多个, 例如 ‘gzip’|'brotli',这样会同时生成 .gz和.br文件
VITE_BUILD_COMPRESS = 'gzip'
# 打包是否压缩图片
VITE_USE_IMAGEMIN = false
# 打包是否开启pwa功能
VITE_USE_PWA = false
# 是否兼容旧版浏览器。开启后打包时间会慢一倍左右。会多打出旧浏览器兼容包,且会根据浏览器兼容性自动使用相应的版本
VITE_LEGACY = false

参考项目

  1. 后端SpringCloudhttps://github.com/zuihou/lamp-cloud 后端SpringBoothttps://github.com/zuihou/lamp-boot 前端https://github.com/zuihou/lamp-web-plus
  2. 后端https://gitee.com/skysong/coffee-boot
  3. 后端https://gitee.com/battcn/wemirr-platform 前端https://gitee.com/battcn/wemirr-platform-ui
  4. 后端https://gitee.com/zsvg/vboot-java 前端https://gitee.com/zsvg/vboot-vben
  5. 后端SpringBoothttps://github.com/uncarbon97/helio-boot 后端SpringCloudhttps://github.com/uncarbon97/helio-cloud 前端https://github.com/uncarbon97/helio-admin-vue-vben