feat: 支持开发环境 mock

.env.development

@@ -1,3 +1,3 @@
 # baseUrl 
 # /dev-api 为本地 mock 地址，不使用 mock 的话此处换为你的开发环境接口地址，例如 http://192.168.233.233
-VITE_BASE_API = 'http://jsonplaceholder.typicode.com'
+VITE_BASE_API = '/dev-api'

README.md

@@ -1,8 +1,8 @@
- **🌱基于 Vue3 全家桶、Vant3，vw 视口适配，开箱即用的移动端项目基础模板**
+ **🌱基于 Vue3 全家桶、TypeScript、Vite 构建工具，开箱即用的移动端项目基础模板**
 
-- [x] Vue3✨
-- [x] Vant3✨
-- [x] 支持 SVG 图标自动注册组件✨
+- [x] Vue3 + Vite4 ⚡
+- [x] Vant4 组件库 ✨
+- [x] 支持 SVG 图标自动注册组件
 - [x] vw 视口适配
 - [x] Axios 封装
 - [x] 生产环境 CDN 依赖
@@ -32,6 +32,8 @@
 
 ## 运行项目
 
+注意：要求 Node 版本 16+，可使用 [nvm](https://github.com/nvm-sh/nvm#installing-and-updating) 进行本地 Node 版本管理。
+
 ```shell
 # 克隆项目
 git clone https://github.com/yulimchen/vue3-h5-template.git
@@ -40,14 +42,10 @@ git clone https://github.com/yulimchen/vue3-h5-template.git
 cd vue3-h5-template
 
 # 安装依赖
-yarn
-# OR
-npm install
+pnpm install
 
 # 启动服务
-yarn serve
-# OR
-npm run serve
+pnpm dev
 ```
 
 

mock/list.mock.ts

@@ -0,0 +1,18 @@
+import { defineMock } from "vite-plugin-mock-dev-server";
+import Mock from "mockjs";
+
+export default defineMock({
+  url: "/dev-api/list/get",
+  delay: 1000,
+  body: {
+    code: 0,
+    message: "OK",
+    result: Mock.mock({
+      "list|10": [
+        {
+          "id|+1": 1
+        }
+      ]
+    })
+  }
+});

package.json

@@ -21,6 +21,7 @@
   "dependencies": {
     "axios": "^1.2.6",
     "normalize.css": "^8.0.1",
+    "nprogress": "^0.2.0",
     "pinia": "^2.0.28",
     "vant": "^4.0.9",
     "vue": "^3.2.45",
@@ -29,6 +30,7 @@
   "devDependencies": {
     "@rushstack/eslint-patch": "^1.1.4",
     "@types/node": "^18.11.12",
+    "@types/nprogress": "^0.2.0",
     "@typescript-eslint/parser": "^5.49.0",
     "@vitejs/plugin-vue": "^4.0.0",
     "@vitejs/plugin-vue-jsx": "^3.0.0",
@@ -40,14 +42,23 @@
     "eslint": "^8.22.0",
     "eslint-plugin-vue": "^9.3.0",
     "less": "^4.1.3",
+    "mockjs": "^1.1.0",
     "npm-run-all": "^4.1.5",
     "postcss": "^8.4.21",
     "prettier": "^2.7.1",
     "typescript": "~4.7.4",
     "unplugin-vue-components": "^0.22.12",
     "vite": "^4.0.0",
+    "vite-plugin-mock-dev-server": "^0.3.16",
     "vite-plugin-svg-icons": "^2.0.1",
     "vue-eslint-parser": "^9.1.0",
     "vue-tsc": "^1.0.12"
+  },
+  "pnpm": {
+    "peerDependencyRules": {
+      "ignoreMissing": [
+        "rollup"
+      ]
+    }
   }
 }