# 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系统 ```