使用vue构建多页面应用的示例


Posted in Javascript onOctober 22, 2020

先了解一些单页面和多页面的区别

mm 多页应用模式MPA 单页应用模式SPA
应用构成 由多个完整页面构成 一个外壳页面和多个页面片段构成
跳转方式 页面之间的跳转是从一个页面跳转到另一个页面 页面片段之间的跳转是把一个页面片段删除或隐藏,加载另一个页面片段并显示出来。这是片段之间的模拟跳转,并没有开壳页面
跳转后公共资源是否重新加载
URL模式 http://xxx/page1.html  http://xxx/page1.html http://xxx/shell.html#page1  http://xxx/shell.html#page2
用户体验 页面间切换加载慢,不流畅,用户体验差,特别是在移动设备上 页面片段间的切换快,用户体验好,包括在移动设备上
能否实现转场动画 无法实现 容易实现(手机app动效)
页面间传递数据 依赖URL、cookie或者localstorage,实现麻烦 因为在一个页面内,页面间传递数据很容易实现
搜索引擎优化(SEO) 可以直接做 需要单独方案做,有点麻烦
特别适用的范围 需要对搜索引擎友好的网站 对体验要求高的应用,特别是移动应用
搜索引擎优化(SEO) 可以直接做 需要单独方案做,有点麻烦
开发难度 低一些,框架选择容易 高一些,需要专门的框架来降低这种模式的开发难度

为什么用Vue写多页面

vue只是一个工具,把他当做一个操作dom的工具来用写多页面,有单页面的优势同时是多页面的表现形式(具体要看需求)

构建多页面应用

准备工作

新建一个项目,项目需要一个"glob":"^7.0.3"的依赖

修改webpack的配置

我们需要更改的文件

  • utils.js
  • webpack.base.conf.js
  • webpack.dev.conf.js
  • webpack.prod.conf.js

utils.js在最后添加

// utils.js文件
/* 这里是添加的部分 ---------------------------- 开始 */

// glob是webpack安装时依赖的一个第三方模块,还模块允许你使用 *等符号, 例如lib/*.js就是获取lib文件夹下的所有js后缀名的文件
var glob = require('glob')
// 页面模板
var HtmlWebpackPlugin = require('html-webpack-plugin')
// 取得相应的页面路径,因为之前的配置,所以是src文件夹下的pages文件夹
var PAGE_PATH = path.resolve(__dirname, '../src/pages')
// 用于做相应的merge处理
var merge = require('webpack-merge')
//多入口配置
// 通过glob模块读取pages文件夹下的所有对应文件夹下的js后缀文件,如果该文件存在
// 那么就作为入口处理
exports.entries = function () {
  var entryFiles = glob.sync(PAGE_PATH + '/*/*.js')
  var map = {}
  entryFiles.forEach((filePath) => {
    var filename = filePath.substring(filePath.lastIndexOf('\/') + 1, filePath.lastIndexOf('.'))
    map[filename] = filePath
  })
  return map
}

//多页面输出配置
// 与上面的多页面入口配置相同,读取pages文件夹下的对应的html后缀文件,然后放入数组中
exports.htmlPlugin = function () {
  let entryHtml = glob.sync(PAGE_PATH + '/*/*.html')
  let arr = []
  entryHtml.forEach((filePath) => {
    let filename = filePath.substring(filePath.lastIndexOf('\/') + 1, filePath.lastIndexOf('.'))
    let conf = {
      // 模板来源
      template: filePath,
      // 文件名称
      filename: filename + '.html',
      // 页面模板需要加对应的js脚本,如果不加这行则每个页面都会引入所有的js脚本
      chunks: ['manifest', 'vendor', filename],
      inject: true
    }
    if (process.env.NODE_ENV === 'production') {
      conf = merge(conf, {
        minify: {
          removeComments: true,
          collapseWhitespace: true,
          removeAttributeQuotes: true
        },
        chunksSortMode: 'dependency'
      })
    }
    arr.push(new HtmlWebpackPlugin(conf))
  })
  return arr
}
/* 这里是添加的部分 ---------------------------- 结束 */

webpack.base.conf.js 文件

module.exports = {
 /* 修改部分 ---------------- 开始 */
 entry: utils.entries(),
 /* 修改部分 ---------------- 结束 */
 output: {
  path: config.build.assetsRoot,

webpack.dev.conf.js 文件

// https://github.com/glenjamin/webpack-hot-middleware#installation--usage
  new webpack.HotModuleReplacementPlugin(),
  new webpack.NoEmitOnErrorsPlugin(),
  // https://github.com/ampedandwired/html-webpack-plugin
  /* 注释这个区域的文件 ------------- 开始 */
  // new HtmlWebpackPlugin({
  //  filename: 'index.html',
  //  template: 'index.html',
  //  inject: true
  // }),
  /* 注释这个区域的文件 ------------- 结束 */
  new FriendlyErrorsPlugin()

  /* 添加 .concat(utils.htmlPlugin()) ------------------ */
 ].concat(utils.htmlPlugin())
})

webpack.prod.conf.js 文件

new OptimizeCSSPlugin({
   cssProcessorOptions: {
    safe: true
   }
  }),
  // generate dist index.html with correct asset hash for caching.
  // you can customize output by editing /index.html
  // see https://github.com/ampedandwired/html-webpack-plugin

  /* 注释这个区域的内容 ---------------------- 开始 */
  // new HtmlWebpackPlugin({
  //  filename: config.build.index,
  //  template: 'index.html',
  //  inject: true,
  //  minify: {
  //   removeComments: true,
  //   collapseWhitespace: true,
  //   removeAttributeQuotes: true
  //   // more options:
  //   // https://github.com/kangax/html-minifier#options-quick-reference
  //  },
  //  // necessary to consistently work with multiple chunks via CommonsChunkPlugin
  //  chunksSortMode: 'dependency'
  // }),
  /* 注释这个区域的内容 ---------------------- 结束 */

  // split vendor js into its own file
  new webpack.optimize.CommonsChunkPlugin({
   name: 'vendor',
   minChunks: function (module, count) {
    // any required modules inside node_modules are extracted to vendor
    return (
     module.resource &&
     /\.js$/.test(module.resource) &&
     module.resource.indexOf(
      path.join(__dirname, '../node_modules')
     ) === 0
    )
   }
  }),
  // extract webpack runtime and module manifest to its own file in order to
  // prevent vendor hash from being updated whenever app bundle is updated
  new webpack.optimize.CommonsChunkPlugin({
   name: 'manifest',
   chunks: ['vendor']
  }),
  // copy custom static assets
  new CopyWebpackPlugin([{
   from: path.resolve(__dirname, '../static'),
   to: config.build.assetsSubDirectory,
   ignore: ['.*']
  }])
  /* 该位置添加 .concat(utils.htmlPlugin()) ------------------- */
 ].concat(utils.htmlPlugin())
})
if (config.build.productionGzip) {
 var CompressionWebpackPlugin = require('compression-webpack-plugin')

 webpackConfig.plugins.push(
  new CompressionWebpackPlugin({
   asset: '[path].gz[query]',
   algorithm: 'gzip',
   test: new RegExp(
    '\\.(' +
    config.build.productionGzipExtensions.join('|') +
    ')$'
   ),
   threshold: 10240,
   minRatio: 0.8
  })
 )
}

if (config.build.bundleAnalyzerReport) {
 var BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
 webpackConfig.plugins.push(new BundleAnalyzerPlugin())
}

module.exports = webpackConfig

src是我使用的工程文件,asset,components,pages分别是静态资源文件,组件文件,页面文件

使用vue构建多页面应用的示例

pages是按照项目的模块分的文件夹,每个模块都有三个内容:vue文件,js文件,html文件。这三个文件的作用相当于做SPA单页面应用时,根目录的index.html页面模板,src文件下的main.js和app.vue的功能。
原先,入口文件只有一个Main.js,但现在由于是多页面,因此入口也没多了,我目前就是两个:index和cell,之后如果打包,就会在dist文件夹下生成两个html文件:index.html和cell.html(可以参考一下单页面应用时,打包只会生成一个Index.html)

参考:

以上就是使用vue构建多页面应用的示例的详细内容,更多关于vue构建多页面应用的资料请关注三水点靠木其它相关文章!

Javascript 相关文章推荐
判断目标是否是window,document,和拥有tagName的Element的代码
May 31 Javascript
jqTransform form表单美化插件使用方法
Jul 05 Javascript
jQuery 回车事件enter使用示例
Feb 18 Javascript
有关Promises异步问题详解
Nov 13 Javascript
angular双向绑定模拟探索
Dec 26 Javascript
ExtJs异步无法向外传值和赋值的完美解决办法
Jun 14 Javascript
JavaScript 用fetch 实现异步下载文件功能
Jul 21 Javascript
vue form 表单提交后刷新页面的方法
Sep 04 Javascript
JavaScript箭头函数中的this详解
Jun 19 Javascript
微信小程序实现手势滑动效果
Aug 26 Javascript
vue首次渲染全过程
Apr 21 Vue.js
JavaScript中document.activeELement焦点元素介绍
Nov 27 Javascript
vue 单页应用和多页应用的优劣
Oct 22 #Javascript
Javascript Symbol原理及使用方法解析
Oct 22 #Javascript
多个Vue项目部署到服务器的步骤记录
Oct 22 #Javascript
针对Vue路由history模式下Nginx后台配置操作
Oct 22 #Javascript
微信小程序基于高德地图API实现天气组件(动态效果)
Oct 22 #Javascript
ES11屡试不爽的新特性,你用上了几个
Oct 21 #Javascript
记一次vue跨域的解决
Oct 21 #Javascript
You might like
php获得当前的脚本网址
2007/12/10 PHP
php字符串替换函数substr_replace()用法实例
2015/03/17 PHP
php实现用已经过去多长时间的方式显示时间
2015/06/05 PHP
PHP实现RTX发送消息提醒的实例代码
2017/01/03 PHP
php微信开发之关注事件
2018/06/14 PHP
js验证整数加保留小数点的简单实例
2013/12/02 Javascript
在javascript中如何得到中英文混合字符串的长度
2014/01/17 Javascript
在JS中如何调用JSP中的变量
2014/01/22 Javascript
jquery JSON的解析方式示例介绍
2014/07/27 Javascript
javascript属性访问表达式用法分析
2015/04/25 Javascript
使用AngularJS实现可伸缩的页面切换的方法
2015/06/19 Javascript
JS实现自动阅读单词(有道单词本添加功能)
2016/11/14 Javascript
浅谈vue-router 路由传参的方法
2017/12/27 Javascript
浅谈JavaScript闭包
2019/04/09 Javascript
WebGL学习教程之Three.js学习笔记(第一篇)
2019/04/25 Javascript
arctext.js实现文字平滑弯曲弧形效果的插件
2019/05/13 Javascript
Vue实现点击按钮复制文本内容的例子
2019/11/09 Javascript
javascript设计模式 ? 观察者模式原理与用法实例分析
2020/04/22 Javascript
JavaScript随机数的组合问题案例分析
2020/05/16 Javascript
vue.js watch经常失效的场景与解决方案
2021/01/07 Vue.js
[40:31]Secret vs Alliacne 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
python发送邮件的实例代码(支持html、图片、附件)
2013/03/04 Python
简介Python中用于处理字符串的center()方法
2015/05/18 Python
pandas修改DataFrame列名的实现方法
2019/02/22 Python
python学习开发mock接口
2019/04/28 Python
python并发编程多进程之守护进程原理解析
2019/08/20 Python
python 实现绘制整齐的表格
2019/11/18 Python
Python Scrapy多页数据爬取实现过程解析
2020/06/12 Python
详解Python高阶函数
2020/08/15 Python
让IE6支持css3,让 IE7、IE8 都支持CSS3
2011/10/09 HTML / CSS
编写一个 C 函数,该函数在一个字符串中找到可能的最长的子字符串,且该字符串是由同一字符组成的
2015/07/23 面试题
百年校庆节目主持词
2014/03/27 职场文书
高速铁道技术专业求职信
2014/08/09 职场文书
国防教育标语
2014/10/08 职场文书
琅琊山导游词
2015/02/05 职场文书
如何在Mac上通过docker配置PHP开发环境
2021/05/29 PHP