一、项目初始化

安装依赖

npm init vite
yarn add vue-router@next pinia axios less
yarn add element-plus
yarn add -D unplugin-vue-components unplugin-auto-import

import { defineConfig } from 'vite'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import vue from '@vitejs/plugin-vue'
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ]
})

路由设置

新建router/index.ts
vue2里需要引入vue，并且使用vue.use(VueRouter)来设置路由器为全局对象
use方法的实质是调用参数或者参数上的install方法。此时会将route和router挂载在vue.prototype上，因此可以在其他项目文件里直接访问this.$router

vue3引入路由的方法不一样

import {createRouter, createWebHistory, RouterHistory,RouteRecordRaw} from 'vue-router'
const routes:RouteRecordRaw[] = [
    {
        path: '/login',
        name: 'login',
        component: () => import('../views/login/login.vue')
    }
]
const router = createRouter({
    history: createWebHistory(), //history模式
    //路由配置
    routes
})
export default router

import router from './router'
createApp(App).use(router).mount('#app')

App.vue中要设置路由出口

router-view是什么时候开始生效的呢？
还是在use（router）这里，注册了router-view为component

亮点：封装路由初始化方法

好处：可以不暴露路由对象

export const initRouter = (app: App<Element>) => {
    app.use(router);
}

import {initRouter} from './router'
const app = createApp(App)
//初始化路由
initRouter(app)
app.mount('#app')