开始

本文会帮助你从头启动项目

前言

环境准备

本地环境需要安装 pnpm、Node.js 和 Git

工具配置

如果您使用的 IDE 是vscode(推荐)的话，可以安装以下工具来提高开发效率及代码格式化

Iconify IntelliSense - Iconify 图标插件
windicss IntelliSense - windicss 提示插件
I18n-ally - i18n 插件
Vue - Official - vue 开发必备
ESLint - 脚本代码检查
Prettier - 代码格式化
Stylelint - css 格式化
DotENV - .env 文件高亮
TypeScript Vue Plugin (Volar) - 用于让 TS 识别 *.vue 文件。

代码获取

从 git 获取代码

# clone 代码
git clone https://codeup.aliyun.com/62650a04c2b7347ce520e7e4/gsdefe/v3-admin-template.git

安装

安装 Node.js

如果您电脑未安装Node.js，请安装它。

验证

# 出现相应npm版本即可
npm -v
# 出现相应node版本即可
node -v

如果你需要同时存在多个 node 版本，可以使用 Nvm 或者其他工具进行 Node.js 进行版本管理。

安装依赖

pnpm 安装

必须使用 pnpm进行依赖安装（若其他包管理器安装不了需要自行处理）。

如果未安装pnpm，可以用下面命令来进行全局安装

# 全局安装pnpm
npm install -g pnpm
# 验证
pnpm -v # 出现对应版本号即代表安装成功

依赖安装命令

在项目根目录下，打开命令窗口执行，耐心等待安装完成即可

# 安装依赖
pnpm i

npm script

"scripts": {
  #运行项目
  "dev": "vite",
  # 构建项目
  "build:dev": "vite build --mode testing",
  "build:test": "vite build --mode staging",
  "build:prod": "vite build",

  # 用于生成标准化的git commit message
  "commit": "czg",
  "preinstall": "npx only-allow pnpm",
  # 执行 eslint 校验，并修复部分问题
  "lint:eslint": "eslint --cache --max-warnings 500  \"{src,mock}/**/*.{vue,ts,tsx,js,jsx}\" --fix",
  # 执行 prettier 格式化（该命令会对项目所有代码进行 prettier 格式化，请谨慎执行）
  "lint:prettier": "prettier --write  \"src/**/*.{ts,js,json,tsx,jsx,css,less,scss,vue,html,md}\"",
  # 安装git hooks
  "prepare": "husky install",
  # 预览打包后的内容（先打包在进行预览）
  "preview": "vite preview --port=5003 --host",
},

重新安装依赖

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

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

目录说明

├── build # 打包脚本相关
│   ├── config # 配置文件
│   ├── generate # 生成器
│   └── vite # vite配置
├── public # 公共静态资源目录
├── src # 主目录
│   ├── http # 接口文件
│   ├── assets # 资源文件
│   │   ├── img # 项目存放图片的文件夹
│   │   └── svg # 项目存放svg图片的文件夹
│   ├── components # 公共组件
│   ├── design # 样式文件
│   ├── directives # 指令
│   ├── hooks # hook
│   │   ├── component # 组件相关hook
│   │   ├── core # 基础hook
│   │   ├── event # 事件相关hook
│   │   ├── setting # 配置相关hook
│   │   └── gui # web相关hook
│   ├── locales # 多语言
│   ├── main.js # 主入口
│   ├── router # 路由配置
│   ├── settings # 项目配置
│   │   ├── cache.setting.js # 缓存配置
│   │   ├── component.setting.js # 组件配置
│   │   ├── locale.setting.js # 多语言配置
│   │   ├── project.setting.js # 项目配置
│   │   └── timeout.setting.js # 时间配置
│   │   └── router.setting.js # 路由配置
│   ├── store # 数据仓库
│   ├── utils # 工具类
│   └── views # 页面
│       └──layouts # 布局文件
│          ├── default # 默认布局
│          └── page # 页面布局
├── types # 类型文件
└── vite.config.ts # vite配置文件

Directorybuild # 打包脚本相关
- Directoryconfig # 配置文件
  - Directorygenerate/ # 生成器
    …
  - Directoryvite/ # vite配置
    …
Directorypublic/ # 公共静态资源目录
- …
Directorysrc # 主目录
- Directoryhttp/ # 接口文件
  - …
- Directoryassets # 资源文件
  - Directoryimg/ # 项目存放图片的文件夹
    …
  - Directorysvg/ # 项目存放svg图片的文件夹
    …
- Directorycomponents/ # 公共组件
  - …
- Directorydesign/ # 样式文件
  - …
- Directorydirectives/ # 指令
  - …
- Directoryhooks # hook
  - Directorycomponent/ # 组件相关hook
    …
  - Directorycore/ # 基础hook
    …
  - Directoryevent/ # 事件相关hook
    …
  - Directorysetting/ # 配置相关hook
    …
  - Directorygui/ # web相关hook
    …
- Directorylocales/ # 多语言
  - …
- main.js # 主入口
- Directoryrouter/ # 路由配置
  - …
- Directorysettings # 项目配置
  - cache.setting.js # 缓存配置
  - component.setting.js # 组件配置
  - locale.setting.js # 多语言配置
  - project.setting.js # 项目配置
  - timeout.setting.js # 时间配置 -router.setting.js # 路由配置
- Directorystore/ # 数据仓库
  - …
- Directoryutils/ # 工具类
  - …
- Directoryviews # 页面
  - Directorylayouts/ # 布局文件
    …
  - Directorydefault/ # 默认布局
    …
  - Directorypage/ # 页面布局
    …
Directorytypes/ # 类型文件
- …
vite.config.ts # vite配置文件