前端启动(vben2版)

lamp-web-pro 简介

基于vue-vben-admin 2.x 版本进行二次开发的系统。该项目是基于Vue3.x、Vite、 Ant-Design-Vue3.x 、TypeScript 的中后台解决方案，目标是为中大型项目开发,提供现成的开箱解决方案及丰富的示例。

详情的使用文档请参考他们的官方文档：

• vben：https://doc.vvbin.cn/
• ant-design-vue： https://www.antdv.com/

环境要求

• Node.js: 版本大于 16.0.0
• pnpm : 包管理工具.

工具配置

如果您使用的 IDE 是vscode(推荐)的话，可以安装以下工具来提高开发效率及代码格式化

• Iconify IntelliSense- Iconify 图标插件
• windicss IntelliSense- windicss 提示插件
• I18n-ally- i18n 插件
• Vetur- vue 开发必备 （也可以选择 Volar）
• ESLint- 脚本代码检查
• Prettier- 代码格式化
• Stylelint- css 格式化
• DotENV- .env 文件 高亮

下载源码

注意

注意存放代码的目录及所有父级目录不能存在中文、韩文、日文以及空格，否则安装依赖后启动会出错。

//  使git对文件名大小写敏感
git config core.ignorecase false

// 拉取项目代码
git clone http://git.tangyh.top/zuihou/lamp-web-pro.git

cd lamp-web-pro 

// 安装依赖
pnpm install --registry=https://registry.npmmirror.com

修改配置

1. 根据自己的需求修改 .env.development 文件，VITE_PROXY 参数改成跟后端对应的模式

   根据后端启动的方式，只需要修改 target 参数，其他参数不需要修改

   单体版：配置为BootServerApplication的端口

   微服务版：配置为GatewayServerApplication的端口

   # 本地启动时，代理地址
   VITE_PROXY=`{
   "cloud": [{
     "proxyKey": "/api",
     "rewriteBefore": "/api",
     "rewriteAfter": "/api",
     "target": "http://localhost:18760"
   }],
   "boot": [{
       "proxyKey": "/api/gateway",
       "rewriteBefore": "/api/gateway",
       "rewriteAfter": "/gateway",
       "target": "http://localhost:18760"
     },{
     "proxyKey": "/api",
     "rewriteBefore": "/api/[A-Za-z0-9]+",
     "rewriteAfter": "",
     "target": "http://localhost:18760"
   }]
   }`
   

2. 启动

   启动命令需要区分后端采用什么租户模式，还区分单体模式还是微服务模式。

   # 后端是 lamp-datasource-max 项目，以 单体模式（BootServerApplication） 启动
   pnpm dev:boot:datasource
   
   # 后端是 lamp-datasource-max 项目，以 微服务模式（GatewayServerApplication） 启动
   pnpm dev:cloud:datasource
   

   # 后端是 lamp-column-max 项目，以 单体模式（BootServerApplication） 启动
   pnpm dev:boot:column
   # 后端是 lamp-column-max 项目，以 微服务模式（GatewayServerApplication） 启动
   pnpm dev:cloud:column
   

3. 打包

   启动命令只区分后端采用什么租户模式，不区分是单体模式还是微服务模式。

   # 后端是 lamp-datasource-max 项目
   pnpm build:prod:datasource	
   

   # 后端是 lamp-column-max 项目
   pnpm build:prod:column
   

常见问题

1. 安装依赖时 husky 安装失败

   答： 请查看你的源码是否从 github 直接下载的，直接下载是没有.git文件夹的，而husky需要依赖git才能安装。此时需使用git init初始化项目，再尝试重新安装即可。

常用命令

打包

pnpm build:no-cache # 打包，执行之前会先删除缓存
pnpm report # 生成构建包报表预览

格式化

pnpm lint:stylelint # 样式格式化
pnpm lint:prettier # js/ts代码格式化

其他

pnpm reinstall # 删除依赖重新装，兼容window
pnpm preview # 本地进行打包预览
pnpm log # 生成CHANGELOG
pnpm clean:cache # 删除缓存
pnpm clean:lib # 删除node_modules，兼容window系统