|
| 1 | +<h1 align="center">使用指南</h1> |
| 2 | + |
| 3 | +简体中文 / [English](./Guide.md) |
| 4 | + |
| 5 | +### 开始使用 |
| 6 | + |
| 7 | +本模板采用2023年最新技术栈开发,汇聚了 Vue 生态最新工具流,包括不限于 Vue3、Vite4、Pinia2、Vitest、TypeScript,前端组件库选用接受度最高的 Vant4 (按需使用)进行搭建,开发者可以在此基础模板之上,快速构建移动端应用。 |
| 8 | + |
| 9 | +### 包管理器 |
| 10 | + |
| 11 | +推荐使用 [pnpm](https://pnpm.io/) 来进行包管理,可以极大地减少install时间, 而且非常节省磁盘空间。 |
| 12 | + |
| 13 | +### 目录结构 |
| 14 | + |
| 15 | +下面是模板的主要目录结构和一些简要地说明。 |
| 16 | + |
| 17 | +``` |
| 18 | +├── .husky |
| 19 | +│ └── commit-msg # commit 信息校验 |
| 20 | +| └── pre-commit # eslint 代码检验 |
| 21 | +├── src |
| 22 | +│ ├── api # Api ajax 等 |
| 23 | +│ ├── assets # 本地静态资源 |
| 24 | +│ ├── layouts # 封装布局组件 |
| 25 | +│ ├── components # 业务通用组件和基础布局组件 |
| 26 | +│ ├── router # Vue-Router |
| 27 | +│ ├── store # Pinia |
| 28 | +│ ├── utils # 工具库 |
| 29 | +│ ├── views # 业务页面入口和常用模板 |
| 30 | +│ ├── App.vue # Vue 模板入口 |
| 31 | +│ └── main.ts # Vue 入口 JS |
| 32 | +│ └── app.less # 全局样式 |
| 33 | +│ └── env.d.ts # 全局公用 TypeScript 类型 |
| 34 | +├── build/mock # mock 服务 |
| 35 | +├── mock # mock 数据 |
| 36 | +├── plop-templates # 代码块生成 |
| 37 | +├── public # 静态文件 |
| 38 | +├── scripts # 公共执行脚本 |
| 39 | +├── tests # 单元测试 |
| 40 | +├── plopfile.js # plop 入口 |
| 41 | +├── auto-imports.d.ts # Vue3 组合式API 类型声明文件 |
| 42 | +├── components.d.ts # 组件自注册类型声明文件 |
| 43 | +├── vite.config.ts # Vite 配置文件 |
| 44 | +├── tsconfig.json # TS 配置文件 |
| 45 | +├── index.html # 浏览器渲染入口 |
| 46 | +├── Guide.md # 使用指南 |
| 47 | +├── README.md # 简单介绍 |
| 48 | +└── package.json # 项目的依赖 |
| 49 | +``` |
| 50 | + |
| 51 | +### 本地开发 |
| 52 | + |
| 53 | +克隆原仓库的代码到本地。 |
| 54 | + |
| 55 | +```bash |
| 56 | +git clone https://github.com/CharleeWa/vue3-vant-mobile.git |
| 57 | +``` |
| 58 | + |
| 59 | +进入代码目录,安装项目的依赖。 |
| 60 | + |
| 61 | +```bash |
| 62 | +cd vue3-vant-mobile |
| 63 | + |
| 64 | +# with pnpm |
| 65 | +pnpm install |
| 66 | + |
| 67 | +``` |
| 68 | + |
| 69 | +> 如果网络状况不佳,可以设置 pnpm 的 npm 加载源,如 pnpm config set registry https://registry.npmmirror.com |
| 70 | + |
| 71 | +完成前面的步骤以后,就可以启动项目,开始进行业务开发了。 |
| 72 | + |
| 73 | +```bash |
| 74 | +pnpm dev |
| 75 | +``` |
0 commit comments