搭建 Vue 多页面应用需遵循以下步骤:使用 Vue CLI 创建项目添加路由配置创建页面组件在 App.vue 中集成路由占位符运行应用启动开发服务器

Vue 多页面搭建
如何搭建 Vue 多页面应用?
搭建 Vue 多页面应用需要遵循以下步骤:
1. 创建新项目
立即学习“前端免费学习笔记(深入)”;
使用 Vue CLI 创建一个新的 Vue 项目:
vue create my-multipage-app
2. 添加路由
在 router/index.js 中添加路由配置:
import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App.vue'
Vue.use(VueRouter)
const router = new VueRouter({
routes: [
{
path: '/',
name: 'home',
component: Home
},
{
path: '/about',
name: 'about',
component: About
}
]
})
export default router3. 创建页面组件
为每个页面创建一个单独的 Vue 组件:
// Home.vueHome
// About.vueAbout
4. 集成到 App.vue
在 App.vue 中,使用 作为页面占位符:
5. 运行应用
运行 npm run serve 或 yarn serve 启动开发服务器,应用将针对多个页面进行路由。










