【vue学习笔记】 vue3 + vite + route实现框架构建

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>