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