目录
概述
我们知道使用vue脚手架vue-cli创建的项目默认是SPA(单页面应用),但是许多场景单页面应用并不能满足我们的需求。
对于vue-cli创建的项目配置多页面应用,最近有需求,但是很久没有配置了有点生疏,百度了一下,许多文章对于我来说篇幅过于长且繁琐,所以自己总结一下简单配置多页面应用的步骤。
多页面的配置
目标 :使用vue-cli创建vue“空”项目,为这个项目搭建多页面配置,登录页和首页。
前提:创建一个vue空项目,这个不做演示了(vue create more_page)
创建好的项目结构:
步骤1:编写配置文件 vue.config.js
添加编写配置项:pages
pages: {
// 配置主页
index: {
entry: './src/main.js', // 页面入口文件
template: './public/index.html', // 页面主组件挂载的html文件
title: '首页' // 页面标题
},
// 配置其他页面
login: {
entry: './src/pages/Login/Login.js',
template: './public/login.html',
title: '登录'
}
}
注意看注释
这里的index是默认访问的首页,例如,我们把服务器跑在本地的8080端口,
那么访问localhost:8080或localhost:8080/index都是访问到项目首页,
而访问localhost:8080/login就会访问到登录页。
** 这样配置后,多页面是不是就有眉目了,接下来就去创建相应的文件夹和文件基本就没问题了。
步骤2:在src目录下创建目录pages
在pages目录中,就可以定义每一个子页面了,就像上图中的这样,需要有最基本的两个文件(示例中的Login.js 和 Login.vue),入口文件和主组件(类似APP,全部组件的父组件)。
入口文件login.js:
import Vue from 'vue'
import Login from './Login.vue';
new Vue({
render: h => h(Login),
}).$mount('#login')
注意导入的主组件Login.vue,将主组件挂载到HTML页面上(待会儿创建),#login是自定义的,下面会说明到。
主组件Login.vue
内容随意了,因为仅说明多页面的访问。
步骤3:创建HTML文件(主组件挂载点)
在public下创建login.html,在<body>中添加一个盒子div给id(此处的id就是Login.js中挂载的#id)
测试
启动项目,访问localhost:8080 (模拟首页)和 localhost:8080/login(模拟登录页) 进行测试。
完毕,总结
其实实现多页面很简单,就是在vue.config.js文件中进行多页面的配置,把入口文件,主组件,html文件做好关联即可。
关于其他文件夹(如component, view)的放置,其实组件间能相互引用就行,但最好把一个页面(例如登录页面)的所有东西(组件,vue视图)放在一个文件夹下。
**注意** :本片博客仅在说明多页面的配置,有诸多不规范,更多用途请自行发挥。
文章评论