vue3 + vite + route实现框架构建
一、项目安装
npm init vite@latest test
二、安装router
1. 安装
npm install vue-router@4 -S
2. 创建目录
3. 在router下新增index.js
import { createRouter, createWebHistory } from "vue-router";
import Home from "../views/Home.vue";
const routes = [
{
path: "/",
name: "Home",
component: Home,
},
{
path: "/about",
name: "About",
component: () =>import(/* webpackChunkName: "about" */ "../views/About.vue"),
},
];
const router = createRouter({
history: createWebHistory(),
routes,
});
export default router;
4.修改main.ts
// 新增引入
import router from './router'
// 使用router
createApp(App).use(router).mount('#app')
三、新增views页面
1. 新增文件夹
![[Pasted image 20230407091417.png | 400]]
2. 新增Home.vue和About.vue
// Home.vue
<template>
这是home页
</template>
// About.vue
<template>
这是About页
</template>
四、修改app.vue
1. 修改app.vue
<template>
<router-view />
</template>