二 · 从零开始搭建一个项目(添加依赖以及初始化路由)

1.安装路由

yarn add vue-router@4

2.创建 router 目录以及 views (存放页面级别路由的目录)

3.初始化路由配置并导出

4.注册路由（我是使用了一个函数的形式启动它）

import {createApp} from 'vue'
import './style.css'
import App from './App.vue'
import router from "./router";


const startApp = async () => {
    const app = createApp(App);

    // 注册路由
    app.use(router);

    app.mount('#app')
}

startApp().then((_) => {
    console.log("应用启动");
})

5.给App.vue添加 RouterView标签 以及 src->新建layout->Layout布局页面

<RouterView/>

添加layout

6.最后添加路由

const routes: RouteRecordRaw[] = [
    {
        path: '/',
        redirect: '/layout',
    },
    {
        path: '/layout',
        name: 'layout',
        component: Layout,
    },

];

7.启动项目

yarn dev