lamp-web-plus启动(会员版) · 《灯灯》中后台快速开发平台开发手册

# lamp-web-plus 简介（会员专属）基于vue-vben-admin进行二次开发的系统，实现的功能和 lamp-web 功能一致。该项目是基于Vue3.x、Vite、 Ant-Design-Vue 2.x 、TypeScript 的中后台解决方案，目标是为中大型项目开发,提供现成的开箱解决方案及丰富的示例。详情的使用文档请参考他们的官方文档： - https://vvbin.cn/doc-next/ - https://2x.antdv.com/docs/vue/introduce-cn/ ## lamp-web 和 lamp-web-plus 主要区别是 vue版本和 UI库不同，但实现的功能基本一致 ## 环境要求 - `Node.js`: - 版本大于 `16.0.0` - `pnpm` : - 包管理工具. ## 工具配置如果您使用的 IDE 是[vscode](https://code.visualstudio.com/)(推荐)的话，可以安装以下工具来提高开发效率及代码格式化 * [Iconify IntelliSense](https://marketplace.visualstudio.com/items?itemName=antfu.iconify)\- Iconify 图标插件 * [windicss IntelliSense](https://marketplace.visualstudio.com/items?itemName=voorjaar.windicss-intellisense)\- windicss 提示插件 * [I18n-ally](https://marketplace.visualstudio.com/items?itemName=Lokalise.i18n-ally)\- i18n 插件 * [Vetur](https://marketplace.visualstudio.com/items?itemName=octref.vetur)\- vue 开发必备（也可以选择 Volar） * [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)\- 脚本代码检查 * [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)\- 代码格式化 * [Stylelint](https://marketplace.visualstudio.com/items?itemName=stylelint.vscode-stylelint)\- css 格式化 * [DotENV](https://marketplace.visualstudio.com/items?itemName=mikestead.dotenv)\- .env 文件高亮 ## 下载 > 注意存放代码的目录及所有父级目录不能存在中文、韩文、日文以及空格，否则安装依赖后启动会出错。 ``` // 使git对文件名大小写敏感 git config core.ignorecase false // 拉取项目代码 git clone https://github.com/zuihou/lamp-web-plus.git cd lamp-web-plus // 不能使用别的包管理工具 // 如果未安装pnpm，请运行：npm install -g pnpm pnpm install --registry=https://registry.npmmirror.com ``` ## 修改配置 1. 修改 [.env](https://github.com/zuihou/lamp-web-plus/blob/main/.env) 文件 ~~~ # 租户类型必须跟后端项目 mysql.yml 中 lamp.database.multiTenantType 配成一样. 可选项:NONE、COLUMN、SCHEMA、DATASOURCE VITE_GLOB_MULTI_TENANT_TYPE = DATASOURCE # 登录页是否显示验证码可选值 true false VITE_GLOB_SHOW_CAPTCHA = true # 客户端id&秘钥（必须和 c_application 表中数据一致！） VITE_GLOB_CLIENT_ID = lamp_web VITE_GLOB_CLIENT_SECRET = lamp_web_secret ~~~ 2. 修改 [.env.development](https://github.com/zuihou/lamp-web-plus/blob/main/.env.development) 文件，改变下面的配置：VITE_PROXY ~~~ VITE_PROXY=[[["/api/gateway", "/api/gateway", "/gateway"],"http://localhost:8760"], [["/api", "/api/[A-Za-z0-9]+", ""],"http://localhost:8760"]] ~~~ 3. 启动 ~~~ pnpm serve ~~~ ## imagemin 依赖安装失败解决方法由于 imagemin 在国内安装困难，提供以下几个解决方案： 1. 使用 yarn 在 package.json 内配置(推荐，项目内已集成，前提是必须使用 yarn) ~~~ "resolutions": { "bin-wrapper": "npm:bin-wrapper-china" } ~~~ 2. 使用 npm，在电脑 host 文件加上如下配置即可 ~~~ 199.232.4.133 raw.githubusercontent.com ~~~ ## 安装依赖时 husky 安装失败请查看你的源码是否从 github 直接下载的，直接下载是没有`.git`文件夹的，而`husky`需要依赖`git`才能安装。此时需使用`git init`初始化项目，再尝试重新安装即可。 ## 使用 ### 开发环境 ```bash pnpm serve ``` ### 打包 ```bash pnpm build:prod # 打包 pnpm build:no-cache # 打包，执行之前会先删除缓存 pnpm report # 生成构建包报表预览 ``` ### 格式化 ```bash pnpm lint:stylelint # 样式格式化 pnpm lint:prettier # js/ts代码格式化 ``` ### 其他 ```bash pnpm reinstall # 删除依赖重新装，兼容window pnpm preview # 本地进行打包预览 pnpm log # 生成CHANGELOG pnpm clean:cache # 删除缓存 pnpm clean:lib # 删除node_modules，兼容window系统 ```