vue-cli多页面配置(vue2.0)

得意时要看淡,失意时要看开。不论得意失意,切莫大意;不论成功失败,切莫止步。志得意满时,需要的是淡然,给自己留一条退路;失意落魄时,需要的是泰然,给自己觅一条出路vue-cli多页面配置(vue2.0),希望对大家有帮助,欢迎收藏,转发!站点地址:www.bmabk.com,来源:原文

目录

概述

多页面的配置

步骤1:编写配置文件 vue.config.js

步骤2:在src目录下创建目录pages

步骤3:创建HTML文件(主组件挂载点)

测试

完毕,总结


概述

我们知道使用vue脚手架vue-cli创建的项目默认是SPA(单页面应用),但是许多场景单页面应用并不能满足我们的需求。

对于vue-cli创建的项目配置多页面应用,最近有需求,但是很久没有配置了有点生疏,百度了一下,许多文章对于我来说篇幅过于长且繁琐,所以自己总结一下简单配置多页面应用的步骤。

多页面的配置

 目标 使用vue-cli创建vue“空”项目,为这个项目搭建多页面配置,登录页和首页

前提:创建一个vue空项目,这个不做演示了(vue create more_page)

 创建好的项目结构:

vue-cli多页面配置(vue2.0)

步骤1:编写配置文件 vue.config.js

添加编写配置项:pages

vue-cli多页面配置(vue2.0)

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:8080localhost:8080/index都是访问到项目首页,

而访问localhost:8080/login就会访问到登录页。

** 这样配置后,多页面是不是就有眉目了,接下来就去创建相应的文件夹和文件基本就没问题了。

步骤2:在src目录下创建目录pages

 vue-cli多页面配置(vue2.0)

在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  

vue-cli多页面配置(vue2.0)

内容随意了,因为仅说明多页面的访问。

步骤3:创建HTML文件(主组件挂载点)

在public下创建login.html,在<body>中添加一个盒子div给id(此处的id就是Login.js中挂载的#id)

vue-cli多页面配置(vue2.0)

 vue-cli多页面配置(vue2.0)

测试

 启动项目,访问localhost:8080 (模拟首页) localhost:8080/login(模拟登录页) 进行测试。

vue-cli多页面配置(vue2.0)

 vue-cli多页面配置(vue2.0)

完毕,总结

其实实现多页面很简单,就是在vue.config.js文件中进行多页面的配置,把入口文件,主组件,html文件做好关联即可。
关于其他文件夹(如component, view)的放置,其实组件间能相互引用就行,但最好把一个页面(例如登录页面)的所有东西(组件,vue视图)放在一个文件夹下。

 **注意** :本片博客仅在说明多页面的配置,有诸多不规范,更多用途请自行发挥。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

文章由极客之家整理,本文链接:https://www.bmabk.com/index.php/post/154528.html

(0)
飞熊的头像飞熊bm

相关推荐

发表回复

登录后才能评论
极客之家——专业性很强的中文编程技术网站,欢迎收藏到浏览器,订阅我们!