## 環境準備
本地環境需要安裝 [Yarn1.x](https://yarnpkg.com/)、[Node.js](http://nodejs.org/) 和 [Git](https://git-scm.com/)
>[warning] 注意
>* 必須使用[Yarn1.x](https://yarnpkg.com/),否則依賴可能安裝不上。
>* [Node.js](http://nodejs.org/) 版本要求`12.x`以上,且不能為`13.x`版本,這里推薦`14.x`及以上。
## 基礎環境安裝
### 1. 安裝 Node.js
如果您電腦未安裝 [Node.js](https://nodejs.org/en/),請安裝它。
**驗證**
~~~
# 出現相應npm版本即可
npm -v
# 出現相應node版本即可
node -v
~~~
如果你需要同時存在多個 node 版本,可以使用[Nvm](https://github.com/nvm-sh/nvm)或者其他工具進行 Node.js 進行版本管理。
#### 2. yarn 安裝
必須使用[Yarn](https://github.com/yarnpkg/yarn)進行依賴安裝(若其他包管理器安裝不了需要自行處理)。
如果未安裝`yarn`,可以用下面命令來進行全局安裝
~~~
# 全局安裝yarn
npm i -g yarn
# 驗證
yarn -v # 出現對應版本號即代表安裝成功
~~~
### 3. 依賴安裝失敗解決方法
由于 imagemin 在國內安裝困難,提供以下幾個解決方案:
1. 使用 yarn 在 package.json 內配置(推薦,項目內已集成,前提是必須使用 yarn)
~~~
"resolutions": {
"bin-wrapper": "npm:bin-wrapper-china"
}
~~~
2. 使用 npm,在電腦 host 文件加上如下配置即可
~~~
199.232.4.133 raw.githubusercontent.com
~~~
>[info] 安裝依賴時 husky 安裝失敗
>請查看你的源碼是否從 github 直接下載的,直接下載是沒有`.git`文件夾的,而`husky`需要依賴`git`才能安裝。此時需使用`git init`初始化項目,再嘗試重新安裝即可。
## npm script
~~~
"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"
},
~~~
### 生成圖標集
該命令會生成所選擇的圖標集,提供給圖標選擇器使用。具體使用方式請查看[圖標集生成](https://vvbin.cn/doc-next/dep/icon.html#%E5%9B%BE%E6%A0%87%E9%9B%86%E9%A2%84%E7%94%9F%E6%88%90)
### 重新安裝依賴
該命令會先刪除`node_modules`、`yarn.lock`、`package.lock.json`后再進行依賴重新安裝(安裝速度會明顯變慢)。
接下來你可以修改代碼進行業務開發了。我們內建了模擬數據、HMR 實時預覽、狀態管理、國際化、全局路由等各種實用的功能輔助開發,請閱讀其他章節了解更多。
## 目錄說明
~~~
.
├── 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配置文件
~~~
- 項目介紹
- 常見問題
- 開發環境準備
- 環境準備
- 啟動項目
- 切換Vue3路由
- 項目配置詳細說明
- 上線部署
- 快速構建&部署
- Docker鏡像啟動
- 項目配置
- 菜單配置
- 菜單緩存
- 積木報表菜單配置
- 首頁配置
- 國際化
- 菜單國際化
- 組件注冊
- 項目規范
- 跨域處理
- 樣式庫
- 圖標生成
- package依賴介紹
- 菜單TAB風格
- 備份文檔
- 詳細構建和配置
- 構建部署1.0
- 切換Mock接口
- 原生路由(作廢)
- 原生菜單(作廢)
- 頁面開啟緩存(作廢)
- 環境準備1.0
- 數據 mock&聯調
- UI組件
- Form 表單組件
- Table 表格
- Modal 彈窗
- Drawer 抽屜組件
- Icon 圖標組件
- Button 按鈕
- 更多基礎組件
- JSelectUser選擇用戶 ?
- JSelectPosition崗位選擇 ?
- JSelectDept部門選擇 ?
- JCheckbox ?
- JImportModal 列表導入彈窗組件
- JInput特殊查詢組件 ?
- JPopup彈窗選擇組件 ?
- JTreeSelect樹形下拉框 (異步加載) ?
- JAreaSelect 省市縣級聯組件
- JDictSelectTag 字典標簽 ?
- JEllipsis 超長截取顯示組件 ?
- JUpload 上傳組件 ?
- JEasyCron 定時表達式選擇組件 ?
- JInputPopup 多行輸入窗口組件 ?
- JSwitch 開關選擇組件 ?
- JTreeDict 分類字典樹形下拉組件 ?
- JSelectInput 可輸入下拉框 ?
- JEditor 富文本編輯器 ?
- JMarkdownEditor Markdown編輯器 ?
- JSearchSelect 字典表的搜索組件 ?
- JSelectUserByDept 根據部門選擇用戶 ?
- JVxeTable
- 組件配置文檔
- 自定義組件
- 封裝自定義組件
- 自定義組件增強
- 多級聯動配置
- 使用示例
- 常見問題解答
- JAreaLinkage 省市縣聯動組件 ?
- JCategorySelect 分類字典樹 ?
- JImageUpload 圖片上傳 ?
- JSelectMultiple 下拉多選 ?
- JSelectRole 選擇角色 ?
- JFormContainer 表單組件禁用 ?
- SuperQuery 高級查詢
- UserSelect 高級用戶選擇組件
- Basic
- Page
- Authority
- PopConfirmButton
- CollapseContainer
- ScrollContainer
- LazyContainer
- CodeEditor
- JsonPreview
- CountDown
- ClickOutSide
- CountTo
- Cropper
- Description
- FlowChart
- Upload
- Tree
- Excel
- Qrcode
- Markdown
- Loading
- Tinymce
- Time
- StrengthMeter
- Verify
- Transition
- VirtualScroll
- ContextMenu
- Preview
- Loading
- 前端權限
- 表單權限
- 顯隱控制 ?
- 禁用控制 ?
- 列表權限
- 按鈕權限控制
- 列字段顯隱控制
- 行編輯組件權限
- 顯隱控制
- 禁用控制
- 代碼生成
- Online在線代碼生成
- GUI代碼生成
- 代碼生成模板介紹
- vue3和vue3Native詳細說明
- 深入開發
- 定義Form新組件
- 自定義列表查詢
- 自定義表單布局
- 開發筆記
- 組件權限控制
- 使用Antd Vue原生Form
- 自定義圖表組件
- 自定義渲染函數
- 如何編寫mock接口
- 緩存用法
- 精簡版代碼制作
- 微前端(qiankun)集成
- 前端小技巧
- 表單整體禁用
- 彈框內下拉框錯位
- 界面如何設置響應式
- 抽屜(Drawer)寬度自適應
- 生成菜單腳本
- Online表單
- Online常見問題
- Online表單配置
- 配置參數說明
- 系統標準字段
- 表單類型-主子表|樹表
- 自定義查詢配置
- Online表單風格
- Online表單刪除說明
- Online聯合查詢配置
- online表單視圖功能說明
- Online表單開啟評論
- Online表單控件介紹
- 常用基礎控件
- 高級關聯記錄
- Online表單控件配置
- 基本配置
- 控件擴展配置
- 默認值表達式
- 自定義查詢配置
- 字段href
- 默認值(填值規則)
- 導入導出自定義規則
- Online表單權限配置
- 字段權限配置與授權
- 按鈕權限配置與授權
- 數據權限配置與授權
- 聯合查詢數據權限規則說明
- 在線增強
- 自定義按鈕
- SQL增強
- JS增強
- 按鈕觸發JS增強
- 列表Api
- 列表操作列前置事件
- 表單Api
- beforeSubmit事件
- loaded事件
- 表單值改變事件【單表/主表】
- 表單值改變事件【從表】
- 表單值改變事件【從改主】
- 控制字段顯示與隱藏
- js增強實現下拉聯動
- js增強控制下拉樹數據
- JS增強 觸發彈窗
- JS增強 http請求
- JS增強 方法定義
- 對接表單設計器后需注意
- JAVA增強
- 快速開始
- Online java增強 導入
- Online java增強 導出
- Online java增強 查詢
- Online Java增強 http-api
- 表單類
- 列表類
- 其他功能示例
- 導入數據庫表支持排除表
- 通過字段Href實現三級聯動
- excel數據導入支持校驗
- Online報表
- Online報表配置
- 配置成菜單
- 其他功能
- 推送消息
- ISO 8601書寫格式
- 系統消息跳轉至詳情表單
- 菜單【批量申請(自定義)】功能說明
- Online自動化測試
- online AI自動化測試數據制作
- Online AI自動化測試數據制作
- Online AI模型測試用例功能詳情
- JAVA后臺功能
- saas多租戶切換
- 新功能實現saas租戶隔離
- 第三方集成
- 敲敲云集成釘釘