1、先检查nodejs和npm是否已安装,使用npm安装vue,如下图
2、创建一个项目吧,在命令行中输入npm create vue ,如下图
3、运行项目,依次在命令行中输入
cd Demo
npm install
npm run dev
如下图。
4、运行效果如下图。
5、 在F:\RustDemo\Vue3\Demo\src\router\index.ts文件的routes中添加新的路由。
,
{
path: '/GetDemo',
name: 'GetDemo',
// route level code-splitting
// this generates a separate chunk (About.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import('../views/GetDemo.vue')
}
完整代码如下。
import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
routes: [
{
path: '/',
name: 'home',
component: HomeView
},
{
path: '/about',
name: 'about',
// route level code-splitting
// this generates a separate chunk (About.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import('../views/AboutView.vue')
},
{
path: '/GetDemo',
name: 'GetDemo',
// route level code-splitting
// this generates a separate chunk (About.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import('../views/GetDemo.vue')
}
]
})
export default router
6、在F:\RustDemo\Vue3\Demo\src\App.vue的<nav>中添加新的RouterLink。
<RouterLink to="/GetDemo">GetDemo</RouterLink>
7、在F:\RustDemo\Vue3\Demo\src\views\文件夹下,新建GetDemo.vue。代码如下。
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<p>{{ slogon }}</p>
</div>
</template>
<script>
export default {
name: 'GetDemo',
data () {
return {
msg: '这里是GetDemo',
slogon: '这里是GetDemo'
}
}
}
</script>
8、效果如下。
9、示例下载地址如下。