一、安裝

1、命令

cnpm install vue-router@4

2、配置@映射為src路徑

（1）安裝對應配置

cnpm install @types/node

（2）配置vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import * as path from "node:path"// vite官方配置文件
export default defineConfig({plugins: [vue()],// 配置別名@指向src目錄resolve: {alias: {'@': path.resolve(__dirname, 'src')}}
})

（3）配置tsconfig.app.json
compilerOptions添加一段：

    "baseUrl": ".","paths": {"@/*": ["src/*"]}

二、集成

1、main.ts導入路由模塊

// import Vue from 'vue' 在vue3中已經沒有這個構造函數了
// 導入createApp工廠方法，用于創建vue實例
import { createApp } from 'vue'
// 導入全局樣式
//import './style.css'
// 導入根組件
import App from './App.vue'
import router from './router'//createApp(App).mount('#app')
const app = createApp(App)// 注冊路由
app.use(router)// 在vue3中，只能使用$mount掛載，已經淘汰了el選項
app.mount('#app')

2、建立src/router/index.ts

import { createRouter, createWebHashHistory } from 'vue-router'const router = createRouter({history: createWebHashHistory(), // 帶#的hash模式routes: [{ path: '/', component: () => import('@/pages/PageA.vue') },{ path: '/xxx', component: () => import('@/pages/PageB.vue')}]})router.beforeEach((to, from, next)=>{next()
})export default router

3、App.vue修改視圖結構

<script setup></script><template><router-view></router-view>
</template><style scoped></style>

三、顯示路由

1、訪問
http://localhost:5173/#/
http://localhost:5173/#/xxx
能顯示對應頁面。

2、小結
第1步：安裝vue-router(v4)并創建路由實例，在main.js注冊
第2步：編寫路由規則{ path, component, children, meta, props, name, alias, redirect }
第3步：使用<router-view>顯示匹配成功的頁面組件，使用<router-link>做設計菜單導航

四、element-plus

1、安裝

cnpm install element-plus

2、導入組件庫

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

3、use一下

app.use(ElementPlus)

4、安裝icon圖標

cnpm install @element-plus/icons-vue

5、注冊圖標（總的main.ts）

// import Vue from 'vue' 在vue3中已經沒有這個構造函數了
// 導入createApp工廠方法，用于創建vue實例
import { createApp } from 'vue'
// 導入全局樣式
//import './style.css'
// 導入根組件
import App from './App.vue'
import router from './router'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
// 如果您正在使用CDN引入，請刪除下面一行。
import * as ElementPlusIconsVue from '@element-plus/icons-vue'//createApp(App).mount('#app')
const app = createApp(App)
// 注冊element-plus-icon
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {app.component(key, component)
}// 注冊路由
app.use(router)
app.use(ElementPlus)// 在vue3中，只能使用$mount掛載，已經淘汰了el選項
app.mount('#app')