feat(projects): 引入mockjs

.eslintignore

@@ -7,7 +7,6 @@ lib
 .vscode
 .idea
 /dist/
-/mock/
 /public
 /docs
 .vscode

build/plugins/index.ts

@@ -3,7 +3,8 @@ import html from './html';
 import iconify from './iconify';
 import windicss from './windicss';
 import visualizer from './visualizer';
+import mock from './mock';
 
-const plugins = [vue, ...html, ...iconify, windicss, visualizer];
+const plugins = [vue, ...html, ...iconify, windicss, visualizer, mock];
 
 export default plugins;

build/plugins/mock.ts

@@ -0,0 +1,9 @@
+import { viteMockServe } from 'vite-plugin-mock';
+
+export default viteMockServe({
+  mockPath: 'mock',
+  injectCode: `
+		import { setupMockServer } from '../mock';
+		setupMockServer();
+	`
+});

build/plugins/visualizer.ts

@@ -1,7 +1,6 @@
 import { visualizer } from 'rollup-plugin-visualizer';
 
 export default visualizer({
-  open: true,
   gzipSize: true,
   brotliSize: true
 });

mock/api/auth.ts

@@ -0,0 +1,16 @@
+import type { MockMethod } from 'vite-plugin-mock';
+import type { BackendServiceResult } from '@/interface';
+
+export default [
+  {
+    url: '/api/getUser',
+    method: 'get',
+    response: (): BackendServiceResult => {
+      return {
+        code: 200,
+        message: 'ok',
+        data: '测试mock数据'
+      };
+    }
+  }
+] as MockMethod[];

mock/api/index.ts

@@ -0,0 +1,3 @@
+import auth from './auth';
+
+export default [...auth];

mock/index.ts

@@ -0,0 +1,6 @@
+import { createProdMockServer } from 'vite-plugin-mock/es/createProdMockServer';
+import api from './api';
+
+export function setupMockServer() {
+  createProdMockServer(api);
+}

package.json

@@ -77,6 +77,7 @@
     "eslint-plugin-vue": "^8.2.0",
     "husky": "^7.0.4",
     "lint-staged": "^12.1.3",
+    "mockjs": "^1.1.0",
     "patch-package": "^6.4.7",
     "postinstall-postinstall": "^2.1.0",
     "prettier": "^2.5.1",
@@ -85,8 +86,9 @@
     "typescript": "^4.5.4",
     "unplugin-icons": "^0.12.23",
     "unplugin-vue-components": "^0.17.9",
-		"vite": "~2.5.10",
+    "vite": "~2.5.10",
     "vite-plugin-html": "^2.1.1",
+    "vite-plugin-mock": "^2.9.6",
     "vite-plugin-windicss": "^1.6.1",
     "vue-tsc": "^0.30.0",
     "vueuc": "^0.4.18",

src/App.vue

@@ -5,6 +5,9 @@
 </template>
 
 <script lang="ts" setup>
+import { fetchTestMock } from '@/service';
 import AppProvider from './AppProvider.vue';
+
+fetchTestMock();
 </script>
 <style></style>

src/composables/business/login.ts

@@ -1,6 +1,6 @@
 import { useAuthStore } from '@/store';
 import { useLoading } from '@/hooks';
-import { setToken, setRefreshToken, setUserInfo, log } from '@/utils';
+import { setToken, setRefreshToken, setUserInfo, consoleLog } from '@/utils';
 import type { LoginToken, UserInfo } from '@/interface';
 import { useRouterPush, useRouteQuery } from '../common';
 
@@ -20,7 +20,7 @@ export function useLogin() {
    * @returns 是否登录成功
    */
   async function login(param: { phone: string; pwdOrCode: string; type: 'pwd' | 'sms' }) {
-    log(param); // 打印参数(接入接口后去除)
+    consoleLog(param); // 打印参数(接入接口后去除)
 
     startLoading();
     // 1.这里调用登录接口获取token和refreshToken

src/service/api/auth.ts

@@ -0,0 +1,8 @@
+import { consoleLog } from '@/utils';
+import { mockRequest } from '../request';
+
+/** 测试mock数据 */
+export async function fetchTestMock() {
+  const { data } = await mockRequest.get('/api/getUser');
+  consoleLog('data: ', data);
+}

src/service/api/index.ts

@@ -1 +1,2 @@
 export * from './demo';
+export * from './auth';

src/service/request/index.ts

@@ -5,3 +5,8 @@ export const request = createRequest({
   baseURL: import.meta.env.VITE_HTTP_URL,
   timeout: REQUEST_TIMEOUT
 });
+
+export const mockRequest = createRequest({
+  baseURL: '',
+  timeout: REQUEST_TIMEOUT
+});

src/utils/common/console.ts

@@ -0,0 +1,16 @@
+/* eslint-disable no-console */
+
+/** 打印log */
+export function consoleLog(message?: any, ...optionalParams: any[]) {
+  console.log(message, ...optionalParams);
+}
+
+/** 打印警告 */
+export function consoleWarn(message?: any, ...optionalParams: any[]) {
+  console.warn(message, ...optionalParams);
+}
+
+/** 打印错误 */
+export function consoleError(message?: any, ...optionalParams: any[]) {
+  console.error(message, ...optionalParams);
+}

src/utils/common/index.ts

@@ -2,5 +2,5 @@ export * from './typeof';
 export * from './color';
 export * from './icon';
 export * from './browser';
-export * from './log';
+export * from './console';
 export * from './number';

tsconfig.json

@@ -17,6 +17,6 @@
     "esModuleInterop": true,
     "lib": ["esnext", "dom"]
   },
-  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue", "./**/*.ts"],
+  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue", "./**/*.ts", "mock/**/*.ts"],
 	"exclude": ["/dist/**", "node_modules"]
 }