一、引入Vue
参考vue脚手架的文件存放路径，首先新建index.html，其中id为app的div就是vue实例要挂载到的dom元素。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app"></div>
<!-- 打包后的js -->
<script src="bundle.js"></script>
</body>
</html>
然后，新建src文件夹用来存放vue项目，新建main.js和App.vue
App.vue为根组件，我们先简单的在组件内写一个div，以验证我们搭的项目是否能正常运行。
<template>
<div>hello🎉</div>
</template>
main.js中通过createApp来创建一个新的vue实例，通过app.mount将虚拟节点渲染为真实节点，渲染App根组件到上述id为app的div上。
import { createApp } from 'vue'
import App from './App.vue'
const app = createApp(App) //创建应用实例
const vm = app.mount('#app') //挂载到dom元素上，并返回根组件实例
然后我们在终端运行npm run serve，页面成功显示
二、引入vue-router
由于我们的项目需要多个页面，我们引入vue-router进行页面的切换，首先新建router文件夹，在文件夹下新建index.js，这个文件就用来配置路由。另外，新建views文件夹，用来存放跳转的页面组件。
首先，在index.js中创建router实例并导出
import { createRouter,createWebHashHistory} from "vue-router"
import home from "../views/Home.vue"
import about from "../views/About.vue"
const routes = [
{path:'/',component:home},
{path:'/about',component:about}
]
const router = createRouter({
history:createWebHashHistory(),
routes
})
export default router
然后，在main.js中导入这个实例并将他应用在全局，这样我们就可以在任意组件中以this.$router来访问这个实例，以this.$route来访问当前路由
import router from './router/index'
app.use(router)
我们简单的写了两个组件Home.vue和About.vue，业务逻辑是可以在根路径显示Home组件，在Home组件中有按钮可以跳转到About组件。在根组件App.vue中用router-view进行占位，App.vue如下所示：
<template>
<div>hello🎉</div>
<router-view ></router-view>
</template>
Home.vue如下所示：
<template>
<div>首页内容</div>
<button @click="gotoabout">跳转</button>
</template>
<script>
export default {
methods:{
gotoabout(){
this.$router.push('/about')
}
}
}
</script>
About.vue如下所示：
<template>
<div>关于页面内容</div>
</template>
最后的结果如图所示：
378
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
