## 环境准备 本地环境需要安装 [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配置文件 ~~~