准备工作

官方地址

https://www.naiveadmin.com/home

---

官方代码仓

https://codeup.aliyun.com/naiveadmin/naive-admin-arco.git

gitcx

gitcx12580

私有仓

http://49.232.170.141:8099/wangpeijian/naive-admin-arco.git

---

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",
  # 删除缓存
  "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 prod gzip": "http-server dist --cors --gzip -c-1",
  # 重新安装依赖，见下方说明
  "reinstall": "rimraf yarn.lock && rimraf package.lock.json && rimraf node_modules && npm run bootstrap",
},

---

重新安装依赖

该命令会先删除 node_modulesyarn.lockpackage.lock.json 后再进行依赖重新安装（安装速度会明显变慢）。

接下来你可以修改代码进行业务开发了。我们内建了模拟数据、HMR 实时预览、状态管理、国际化、全局路由等各种实用的功能辅助开发，请阅读其他章节了解更多。

---

目录说明

├── build # 打包脚本相关
│     ├── script # 脚本
│     └── vite # vite配置
├── mock # mock文件夹
├── public # 公共静态资源目录
├── src # 主目录
│     ├── api # 接口文件
│     ├── assets # 资源文件
│     │    ├── icons # icon sprite 图标文件夹
│     │    ├── images # 项目存放图片的文件夹
│     ├── components # 公共组件
│     ├── directives # 指令
│     ├── enums # 枚举/常量
│     ├── hooks # hook
│     │    ├── component # 组件相关hook
│     │    ├── core # 基础hook
│     │    ├── event # 事件相关hook
│     │    ├── setting # 配置相关hook
│     │    └── web # web相关hook
│     ├── layouts # 布局文件
│     │    ├── components # 布局组件
│     │    ├── index.vue # 主框架页面
│     │    └── parentLayout.vue # 空路由页面
│     ├── router # 路由配置
│     ├── settings # 项目配置
│     │    ├── componentSetting.ts # 组件配置
│     │    ├── designSetting.ts # 样式配置
│     │    ├── animateSetting.ts # 动画配置
│     │    ├── projectSetting.ts # 项目配置
│     ├── store # 数据仓库
│     ├── style # 样式文件
│     ├── utils # 工具类
│     └── views # 页面
│     ├── main.ts # 主入口
│     ├── app.vue # Vue 模板入口
├── types # 类型文件
├── vite.config.ts # vite配置文件
└── windi.config.ts # windcss配置文件

---