vue多页面配置详情

目录
  • 1、多页面的区别
  • 2、SPA 与 MPA
  • 3、Vue Cli 脚手架配置

1、多页面的区别

单页应用这个概念，是随着前几年 AngularJS、React、Ember 等这些框架的出现而出现的。在前面的前言内容里，我们在页面渲染中讲了页面的局部刷新，而单页应用则是使用了页面的局部刷新的能力，在切换页面的时候刷新页面内容，从而获取更好的体验。

2、SPA 与 MPA

单页应用（SinglePage Web Application，简称 SPA）和多页应用（MultiPage Application，简称 MPA）的区别如下：

标题 SPA MPA
组成 一个主页面 + 多个页面片段 多个完整页面
资源共用(css,js) 共用的资源只需要加载一次 每个页面都需要加载公用的资源
url 模式 xxx/#/page1 xxx/#/page2 xxx/page1.html xxx/page2.html
刷新方式 页面局部刷新或更改 整页刷新
页面跳转 外壳不变，更新局部页面内容，容易实现跳转动画 从一个页面跳转到另一个页面，无法实现跳转动画
用户体验 页面片段间切换快，用户体验好 页面切换需要重新加载，比较慢且流畅度低，用户体验较差
数据传递 同一个页面，全局变量等很容易实现 依赖 url 传参、或者 cookie 、localStorage 等，实现麻烦
搜索引擎优化(SEO) 实现较为困难，不利于 SEO 检索 实现方法简单
适用场景 对体验要求高的应用 需要对搜索引擎友好的应用

3、Vue Cli 脚手架配置

第一步：

我们在public 文件下建一个主页面 建一个副页面,目录结构如下

第二步：

有了主页面和副页面就要有对应的主页面的入口文件和副页面的入口文件，目录结构如下

第三步：

vue.config.js中配置pages，可以理解为多页面的配置映射。

pages: {
    index: {
        entry: 'src/main.js',
        template: 'public/index.html',
        filename: 'index.html',
    },
    bangban: {
        entry: 'src/banban.js',
        template: 'bangban.html',
        filename: 'public/bangban.html'
    }
}

到此这篇关于vue多页面配置详情的文章就介绍到这了,更多相关vue多页面配置内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • vue 配置多页面应用的示例代码

    前言: 本文基于vue 2.5.2, webpack 3.6.0(配置多页面原理类似,实现方法各有千秋,可根据需要进行定制化) vue 是单页面应用.但是在做大型项目时,单页面往往无法满足我们的需求,因此需要配置多页面应用. 1. 新建 vue 项目 vue init webpack vue_multiple_test cd vue_multiple_test npm install 2. 安装 glob npm i glob --save-dev glob 模块用于查找符合要求的文件 3. 目

  • Vue-cli3多页面配置详解

    Vue-cli3发布已经好长时间了,笔者也在一直使用,由于公司业务需要要使用多页面配置,于是花时间研究了一下Vue-cli3如何配置多页面.由于Vue-cli3相比之前的版本做了很大的改动,在研究过程中也遇到一些问题. 对于Vue-cli3创建项目这里就不做太多的赘述了,毕竟不属于本文内容,有关相关博客也有很多,大家可以自行Google一下就好了. 多页面应用(mpa)与单页面应用(spa)优缺点 在项目中我们用到的大多数都是单页面应用(spa),对于多页面可能用到的比较少一些,具体还是要根据具

  • vue配置多页面的实现方法

    vue配置多页面的实现方法

    1.安装环境 ①安装node.js 并添加入环境变量PATH ②安装淘宝NPM镜像 $ npm install -g cnpm --registry=https://registry.npm.taobao.org ③安装webpack npm install webpack -g ④安装vue-cli脚手架 npm install -g vue-cli ⑤创建项目模板 vue init wepack vue-multipage-demo ⑥cmd进入到要放项目的文件夹 ⑦安装 cnpm inst

  • WebPack配置vue多页面的技巧

    WebPack虐我千百遍,我带她如初恋.一个项目前台页面写差不多了,webpack几乎零配置,也算work起来了.现在需要编写后台管理界面,另起一个单独的项目,那是不存在的.于是网上了搜了大把大把的文章,很多都是修改了项目的结构,讨厌,vue-cli搞的那一套,干嘛要修改来修改去的.像我这种前端小萌新,webpack的配置改着就把前台部分run不起来了... 于是就有了这个笔记: 先看看项目的结构: ├── build ├── config ├── src │   ├── api │   ├──

  • vue项目添加多页面配置的步骤详解

    公司使用 vue-cli 创建的 vue项目 在初始化时并没有做多页面配置,随着需求的不断增加,发现有必要使用多页面配置.看了很多 vue多页面配置 的文章,基本都是在初始化时就配置了多页面.而且如果使用这些实现,需要调整当前项目的目录结构,这点也是不能接受的. 最后,参考这些文章,在不调整当前项目目录结构实现了多页面的配置的添加.这里做下记录.总结,方便以后复用.如果还能有幸帮助到有同样需求的童鞋的话,那就更好了. 实现步骤 1.添加新增入口相关文件; 2.使用变量维护多入口: 3.开发环境读

  • vue-cli创建的项目,配置多页面的实现方法

    vue官方提供的命令行工具vue-cli,能够快速搭建单页应用.默认一个页面入口index.html,那么,如果我们需要多页面该如何配置,实际上也不复杂 假设要新建的页面是rule,以下以rule为例 创建新的html页面 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=d

  • VUE.CLI4.0配置多页面入口的实现

    为何需要配置多页面? 在实际工作中,肯定会遇到大型项目,往往一个架构里面会开发多个应用,而这些应用又没有太大的关联,但有可能会共用一些组件或者是样式表等,那么就会出现一个问题,打包的时候会将这些互不相关的应用全部打包. 而因为脚手架VueCli所以构建的项目属于单页面应用,因此我们就需要手动去配置,搭建一个多入口,多应用的体系 需求 首页显示各个应用名称,点击进去各自应用 实现 使用vue/cli生成一个vue项目 npm install -g @vue/cli 个人不建议直接全局安装,因为可能

  • vue多页面配置详情

    vue多页面配置详情

    目录 1.多页面的区别 2.SPA 与 MPA 3.Vue Cli 脚手架配置 1.多页面的区别 单页应用这个概念,是随着前几年 AngularJS.React.Ember 等这些框架的出现而出现的.在前面的前言内容里,我们在页面渲染中讲了页面的局部刷新,而单页应用则是使用了页面的局部刷新的能力,在切换页面的时候刷新页面内容,从而获取更好的体验. 2.SPA 与 MPA 单页应用(SinglePage Web Application,简称 SPA)和多页应用(MultiPage Applicat

  • Vue多页面配置打包性能优化方式(解决加载包太大加载慢问题)

    目录 一.问题描述及解决方案 1. 多入口存在的问题 2. 我的预期效果 3. 可行方案 二.方案一:打公共 chunks,单独分离各自的ui库 三.方案二:删除默认splitChunk配置,抽离公共资源 四.方案对比 总结 通常我们使用vue-cli开发多页面的时候,不知道您是否注意一个问题没有? 默认情况:webpack 会将多入口通用的组件库等,打包一个 vendor 的 chunk js 中 现在假设有两个页面: 入口 admin 使用到了element-ui组件库和echarts图表库

  • Vue项目全局配置页面缓存之按需读取缓存的实现详解

    写在前面 一个web app的实际使用场景中,有一些情景的交互要求,是记录用户的浏览状态的.最常见的就是在列表页进入详情页之后,再返回到列表页,用户希望返回到进入详情页之前的状态继续操作.但是有些使用场景,用户又是希望能够获取最新的数据,例如同级列表页之间切换的时候. 如此,针对上述两种使用场景,需要实现按需读取页面缓存.由于SPA应用的路由逻辑也是在前端实现的,因此可以在前端对路由的逻辑进行设置以实现所需效果. 使用技术 Vue.js作为主要框架 Vue-router作为前端路由管理器 Vue

  • Vue拖拽组件列表实现动态页面配置功能

    Vue拖拽组件列表实现动态页面配置功能

    需求描述 最近在做一个后台系统,有一个功能产品需求是页面分为左右两部分,通过右边的组件列表来动态配置左边的页面视图,并且左边由组件拼装起来的视图,可以实现上下拖拽改变顺序,也可以删除. 根据这个需求我做了下面这个demo. 功能分解 右边的组件列表,可以通过拖拽克隆到左边,拖拽结束后右边组件列表数量不会减少 左边的组件可以展开或收起 左边的组件可以上下拖拽,删除,但不可向右边拖拽 左边组件拖拽过程中不改变其展开和收起状态 demo截图 代码地址 vue-draggable-list 代码预览 <

  • vue路由的配置和页面切换详解

    1.vue路由 可以实现单页面应用. 路由三要素: vue路由通过hash的变化切换页面(组件/div) <router-link>导航 <router-view>存储页面(组件)的容器 src/router/index.js路由的配置 实现步骤: 2.router配置 对router文件夹下的index.js进行配置 path:url name:对应的参数的模块名称 component:组件名 用组件时一定要注册 { path: '/product', name: 'Produc

  • 浅谈Vue单页面做SEO的四种方案

    目录 1.Nuxt 服务端渲染应用部署 (SSR服务器渲染) 优势: 不足:(开发中遇到的坑) 2.Nuxt 静态应用部署 优势: 不足: 3.预渲染prerender-spa-plugin 优势: 不足: 4.Phantomjs 针对爬虫做处理 优势: 不足: 总结 众所周知,Vue SPA单页面应用对SEO不友好,当然也有相应的解决方案,通过查找资料,大概有以下4种方法.(本人只用过第一,第三种方案) 1.Nuxt 服务端渲染应用部署 (SSR服务器渲染) 关于服务器渲染:Vue官网介绍 ,

  • vue实现页面缓存功能

    本文实例为大家分享了vue实现页面缓存功能的具体代码,供大家参考,具体内容如下 主要利用keep-alive实现从列表页跳转到详情页,然后点击返回时,页面缓存不用重新请求资源. 一.在router里配置路由 在meta里定义页面是否需要缓存 import Vue from "vue"; import Router from "vue-router"; // 避免到当前位置的冗余导航 const originalPush = Router.prototype.push

  • vue 中使用 bimface详情

    vue 中使用 bimface详情

    目录 1. 安装 vue 脚手架 2. 创建项目 3. 引入 bimface 文件 3.1 运行项目 3.2 引入 bimface 文件 4. 实现页面渲染 4.1 修改 html 4.2 修改 CSS 4.3 修改 JS 整个过程分为如下几个步骤: 1.安装 vue 脚手架 2.创建项目 3.引入 bimface 响应的文件 4.修改 App.vue 文件,实现页面渲染 1. 安装 vue 脚手架 这里还是使用 Vue CLI 通过如下命令,全局安装 vue 脚手架工具 npm install

  • vue 中使用 bimface详情

    vue 中使用 bimface详情

    目录 1. 安装 vue 脚手架 2. 创建项目 3.1 运行项目 3.2 引入 bimface 文件 4. 实现页面渲染 4.1 修改 html 4.2 修改 CSS 4.3 修改 JS 整个过程分为如下几个步骤: 1.安装 vue 脚手架 2.创建项目 3.引入 bimface 响应的文件 4.修改 App.vue 文件,实现页面渲染 1. 安装 vue 脚手架 这里还是使用 Vue CLI 通过如下命令,全局安装 vue 脚手架工具 npm install -g @vue/cli 安装好之

随机推荐