- 构建项目
1
2
3
| yarn create vite-app <project-name>
cd <project-name>
yarn
|
2.安装所需的包
1
2
3
4
| yarn add less --dev
yarn add less-loader --dev
yarn add vue-router@next
yarn add
|
3.在src下新建router目录并在目录下新建index.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
| import { createWebHistory, createRouter } from "vue-router";
import Home from "../views/Home.vue";
import HelloWorld from "../views/HelloWorld.vue";
const routes = [
{
path: "/",
name: "Home",
component: Home,
},
{
path: "/hello",
name: "HelloWorld",
component: HelloWorld,
},
];
const router = createRouter({
history: createWebHistory(),
routes,
});
export default router;
|
4.修改main.js支持vue-router
1
2
3
4
5
6
7
| import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
createApp(App)
.use(router)
.mount('#app')
|
5.使用
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| //app.vue
<template>
<div id="app">
<div id="nav">
<router-link to="/">Home</router-link> |
<router-link to="/hello">Hello</router-link>
</div>
<router-view />
</div>
</template>
<script>
export default {
name: "App",
};
</script>
<style lang="less" scoped>
</style>
|
