新增路由

components.d.ts

@@ -10,14 +10,23 @@ export {}
 declare module '@vue/runtime-core' {
   export interface GlobalComponents {
     BreadCrumb: typeof import('./src/components/BreadCrumb/index.vue')['default']
+    CommonFooter: typeof import('./src/components/commonFooter/index.vue')['default']
     ElAvatar: typeof import('element-plus/es')['ElAvatar']
     ElBreadcrumb: typeof import('element-plus/es')['ElBreadcrumb']
     ElBreadcrumbItem: typeof import('element-plus/es')['ElBreadcrumbItem']
+    ElButton: typeof import('element-plus/es')['ElButton']
+    ElConfigProvider: typeof import('element-plus/es')['ElConfigProvider']
     ElDatePicker: typeof import('element-plus/es')['ElDatePicker']
+    ElDialog: typeof import('element-plus/es')['ElDialog']
+    ElForm: typeof import('element-plus/es')['ElForm']
+    ElFormItem: typeof import('element-plus/es')['ElFormItem']
     ElIcon: typeof import('element-plus/es')['ElIcon']
+    ElInput: typeof import('element-plus/es')['ElInput']
     ElMenu: typeof import('element-plus/es')['ElMenu']
     ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
+    ElMenuItemGroup: typeof import('element-plus/es')['ElMenuItemGroup']
     ElOption: typeof import('element-plus/es')['ElOption']
+    ElPagination: typeof import('element-plus/es')['ElPagination']
     ElSelect: typeof import('element-plus/es')['ElSelect']
     ElSubMenu: typeof import('element-plus/es')['ElSubMenu']
     NavHeader: typeof import('./src/components/NavHeader/index.vue')['default']

package.json

@@ -18,7 +18,7 @@
     "pinia": "^2.0.34",
     "sass": "^1.62.0",
     "vue": "^3.2.47",
-    "vue-router": "^4.1.6"
+    "vue-router": "^4.0.13"
   },
   "devDependencies": {
     "@antfu/eslint-config": "^0.38.2",

pnpm-lock.yaml

@@ -29,7 +29,7 @@ specifiers:
   vite-plugin-windicss: ^1.8.10
   vitest: ^0.29.8
   vue: ^3.2.47
-  vue-router: ^4.1.6
+  vue-router: ^4.0.13
   vue-tsc: ^1.2.0
   windicss: ^3.5.6
 
@@ -39,7 +39,7 @@ dependencies:
   pinia: 2.0.34_dtjfskxukdxv24psui2m5c75zy
   sass: 1.62.0
   vue: 3.2.47
-  vue-router: 4.1.6_vue@3.2.47
+  vue-router: 4.0.13_vue@3.2.47
 
 devDependencies:
   '@antfu/eslint-config': 0.38.4_voubu7prgxjfsfbgx5d4sqnwiy
@@ -5723,8 +5723,8 @@ packages:
       - supports-color
     dev: true
 
-  /vue-router/4.1.6_vue@3.2.47:
-    resolution: {integrity: sha512-DYWYwsG6xNPmLq/FmZn8Ip+qrhFEzA14EI12MsMgVxvHFDYvlr4NXpVF5hrRH1wVcDP8fGi5F4rxuJSl8/r+EQ==}
+  /vue-router/4.0.13_vue@3.2.47:
+    resolution: {integrity: sha512-LmXrC+BkDRLak+d5xTMgUYraT3Nj0H/vCbP+7usGvIl9Viqd1UP6AsP0i69pSbn9O0dXK/xCdp4yPw21HqV9Jw==}
     peerDependencies:
       vue: ^3.2.0
     dependencies:

src/App.vue

@@ -3,9 +3,11 @@ import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
 // 修改分页器默认文字
 zhCn.el.pagination.goto = '跳至'
 </script>
+
 <template>
   <el-config-provider :locale="zhCn">
     <RouterView/>
   </el-config-provider>
 
 </template>
+

src/pages/cjfx/index.vue

@@ -0,0 +1,72 @@
+<template>
+  <div>
+    <NavHeader />
+    <bread-crumb />
+
+    <div class="w-1200px m-auto flex flex-row justify-between">
+      <div class="w-188">
+        <el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose">
+          <el-sub-menu index="1">
+            <template #title>
+              <el-icon>
+                <location />
+              </el-icon>
+              <span>成绩分析</span>
+            </template>
+            <el-menu-item-group title="组1">
+              <el-menu-item index="1-1">成绩单</el-menu-item>
+              <el-menu-item index="1-2">三率一分</el-menu-item>
+              <el-menu-item index="1-1">成绩单</el-menu-item>
+              <el-menu-item index="1-2">三率一分</el-menu-item>
+            </el-menu-item-group>
+
+            <el-sub-menu index="1-4">
+              <template #title>item four</template>
+              <el-menu-item index="1-4-1">item one</el-menu-item>
+            </el-sub-menu>
+          </el-sub-menu>
+          <el-menu-item index="2">
+            <el-icon><icon-menu /></el-icon>
+            <span>试卷分析</span>
+          </el-menu-item>
+          <el-menu-item index="3" disabled>
+            <el-icon>
+              <document />
+            </el-icon>
+            <span>导航3</span>
+          </el-menu-item>
+          <el-menu-item index="4">
+            <el-icon>
+              <setting />
+            </el-icon>
+            <span>导航4</span>
+          </el-menu-item>
+        </el-menu>
+      </div>
+
+      <div class="w-942">
+        234
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+
+import {
+  Document,
+  Menu as IconMenu,
+  Location,
+  Setting,
+} from '@element-plus/icons-vue'
+const handleOpen = (key: string, keyPath: string[]) => {
+  console.log(key, keyPath)
+}
+const handleClose = (key: string, keyPath: string[]) => {
+  console.log(key, keyPath)
+}
+
+</script>
+
+
+<style lang="scss" scoped></style>

src/router/index.ts

@@ -0,0 +1,17 @@
+import { createRouter, createWebHashHistory, RouterOptions, Router, RouteRecordRaw } from 'vue-router';
+
+const routes: RouteRecordRaw[] = [
+  { path: '/', name: 'index', component: () => import('@/pages/index/index.vue') },
+  { path: '/cjfx', name: 'cjfx', component: () => import('@/pages/cjfx/index.vue') },
+ ]
+
+// RouterOptions是路由选项类型
+const options: RouterOptions = {
+  history: createWebHashHistory(),
+  routes,
+}
+
+// Router是路由对象类型
+const router: Router = createRouter(options)
+
+export default router

vite.config.ts

@@ -14,6 +14,8 @@ export default defineConfig({
   resolve: {
     alias: {
       '~/': `${path.resolve(__dirname, 'src')}/`,
+      '@': `${path.resolve(__dirname, 'src')}`,
+
     },
   },
   plugins: [