## 環境準備 本地環境需要安裝 [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配置文件 ~~~