优化

components.d.ts

@@ -0,0 +1,27 @@
+/* eslint-disable */
+/* prettier-ignore */
+// @ts-nocheck
+// Generated by unplugin-vue-components
+// Read more: https://github.com/vuejs/core/pull/3399
+import '@vue/runtime-core'
+
+export {}
+
+declare module '@vue/runtime-core' {
+  export interface GlobalComponents {
+    CustomHeader: typeof import('./src/components/mainPat/CustomHeader.vue')['default']
+    LoadingIcon: typeof import('./src/components/svgIcon/LoadingIcon.vue')['default']
+    RequestLoading: typeof import('./src/components/interactions/RequestLoading.vue')['default']
+    RouterLink: typeof import('vue-router')['RouterLink']
+    RouterView: typeof import('vue-router')['RouterView']
+    TabBar: typeof import('./src/components/mainPat/TabBar.vue')['default']
+    VanCell: typeof import('vant/es')['Cell']
+    VanIcon: typeof import('vant/es')['Icon']
+    VanImage: typeof import('vant/es')['Image']
+    VanList: typeof import('vant/es')['List']
+    VanNavBar: typeof import('vant/es')['NavBar']
+    VanSticky: typeof import('vant/es')['Sticky']
+    VanTabbar: typeof import('vant/es')['Tabbar']
+    VanTabbarItem: typeof import('vant/es')['TabbarItem']
+  }
+}

package.json

@@ -13,7 +13,7 @@
     "axios": "^0.26.1",
     "lodash-es": "^4.17.21",
     "pinia": "^2.0.20",
-    "vant": "^3.4.6",
+    "vant": "^4.4.1",
     "vue": "^3.2.25",
     "vue-router": "^4.0.14",
     "vuex": "^4.0.2"
@@ -26,8 +26,10 @@
     "postcss-pxtorem": "^5.1.1",
     "sass": "^1.49.9",
     "typescript": "^4.5.4",
+    "unplugin-vue-components": "^0.24.1",
     "vite": "^2.8.0",
+    "vite-plugin-mock": "^2.9.6",
     "vite-plugin-style-import": "1.4.1",
     "vue-tsc": "^0.29.8"
   }
-}
+}

src/layout/index.vue

@@ -39,7 +39,7 @@ const handleChange = (value) => {
       <router-view v-else></router-view>
       <RequestLoading></RequestLoading>
     </div>
-    <div class="layout-footer" v-if="$route.meta.showTabBar">
+    <div class="layout-footer" v-if="$route.meta.hideTabBar">
       <TabBar :data="tabBar" @chang="handleChange"></TabBar>
     </div>
   </div>

src/main.ts

@@ -9,6 +9,12 @@ import 'lib-flexible/flexible.js';
 // 引入全局样式
 import '@/assets/scss/index.scss';
 
+// 引入vant4支持的函数组件样式 toast、dialog、notify、imagePreview
+import 'vant/es/toast/style';
+import 'vant/es/dialog/style';
+import 'vant/es/notify/style';
+import 'vant/es/image-preview/style';
+
 // 全局引入按需引入UI库 vant
 import { vantPlugins } from './plugins/vant.js';
 

src/router/index.ts

@@ -1,4 +1,5 @@
 import { createRouter, createWebHashHistory, RouteRecordRaw } from "vue-router";
+import routeMap from "./routeMap";
 
 // 通过Vite的import.meta.glob()方法实现自动化导入路由
 const mainRouterModules = import.meta.glob('../layout/*.vue')
@@ -6,23 +7,17 @@ const viewRouterModules = import.meta.glob('../views/**/*.vue')
 
 // 子路由
 const childRoutes = Object.keys(viewRouterModules).map((path)=>{	
-	let urlPath = path.match(/\.\.\/views\/(.*)\.vue$/)[1];
-	let keepAlive = false
-	let showTabBar = true
-	// 是否需要显示底部tabBar
-	if(['goods/detail'].includes(urlPath)) showTabBar = false
-	// 是否需要传递params
-	// todo
+	let urlPath = path.match(/\.\.\/views\/(.*)\.vue$/)[1].toLowerCase();
 	return {
-		path: urlPath.toLowerCase(),
-		name: urlPath.replaceAll('/',''),
+		path: routeMap[urlPath] && routeMap[urlPath]['path'] || urlPath,
+		name: urlPath.replace(/\/(\w)/g, function($0, $1){
+			return $1.toUpperCase()
+		}),
 		component: viewRouterModules[path],
-		meta: {
-			keepAlive,
-			showTabBar
-		}
+		meta: routeMap[urlPath] && routeMap[urlPath]['meta'] || undefined
 	}
-})
+}).filter(item => item.path.indexOf('components') < 0)  // 过滤掉views里的局部components
+
 // 根路由
 const rootRoutes = Object.keys(mainRouterModules).map((path) => {
     const name = path.match(/\.\.\/layout\/(.*)\.vue$/)[1].toLowerCase();

src/router/routeMap.ts

@@ -0,0 +1,9 @@
+export default {
+    'channel/detail': {
+        path: 'goods/detail/:id', //自定义路由
+        meta: {
+            keepAlive: false, // 需要缓存 默认false
+            hideTabBar: true, // 不显示底部tabBar 默认false
+        }
+    },
+}

vite.config.ts

@@ -1,7 +1,9 @@
 import { defineConfig, loadEnv } from 'vite';
 import vue from '@vitejs/plugin-vue';
 import path from "path";
-import styleImport, { VantResolve } from 'vite-plugin-style-import';
+import { viteMockServe } from 'vite-plugin-mock';
+import Components from 'unplugin-vue-components/vite';
+import { VantResolver } from 'unplugin-vue-components/resolvers';
 
 // https://vitejs.dev/config/
 export default defineConfig(({ command, mode }) => {
@@ -22,17 +24,14 @@ export default defineConfig(({ command, mode }) => {
 		},
 		plugins: [
 			vue(),
-			// 配置后，Vant各组件才生效
-			styleImport({
-				resolves: [VantResolve()],
-				libs: [
-					{
-					  libraryName: 'vant',
-					  esModule: true,
-					  resolveStyle: name => `../es/${name}/style`
-					}
-				 ]				 
+			Components({
+				resolvers: [VantResolver()],
 			}),
+			viteMockServe({
+				mockPath: './mock',
+				supportTs: true,
+				localEnabled: false
+			})
 		],
 
 		// 跨域代理