使用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 相关文章推荐
jQuery 源码分析笔记(3) Deferred机制
Jun 19 Javascript
jQuery实现用方向键控制层的上下左右移动
Jan 13 Javascript
jQuery实现购物车多物品数量的加减+总价计算
Jun 06 Javascript
jQuery源码分析之jQuery中的循环技巧详解
Sep 06 Javascript
JQuery节点元素属性操作方法
Jun 11 Javascript
JS基于ocanvas插件实现的简单画板效果代码(附demo源码下载)
Apr 05 Javascript
JavaScript类型系统之布尔Boolean类型详解
Jun 26 Javascript
jQuery Select下拉框操作小结(推荐)
Jul 22 Javascript
JavaScript中各数制转换全面总结
Aug 21 Javascript
在vue中使用css modules替代scroped的方法
Mar 10 Javascript
vue.js template模板的使用(仿饿了么布局)
Aug 13 Javascript
Intellij IDEA搭建vue-cli项目的方法步骤
Oct 20 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
下载文件的点击数回填
2006/10/09 PHP
php实现约瑟夫问题的方法小结
2015/03/23 PHP
PHP翻页跳转功能实现方法
2020/11/30 PHP
php设计模式之原型模式分析【星际争霸游戏案例】
2020/03/23 PHP
把textarea中字符串里含有的回车换行替换成<br>的javascript代码
2007/04/20 Javascript
asp.net 30分钟掌握无刷新 Repeater
2011/09/16 Javascript
JS判断表单输入是否为空(示例代码)
2013/12/23 Javascript
使用jquery操作session方法分享
2015/01/22 Javascript
防止Node.js中错误导致进程阻塞的办法
2016/08/11 Javascript
Node.js connect ECONNREFUSED错误解决办法
2016/09/15 Javascript
自定义require函数让浏览器按需加载Js文件
2016/11/24 Javascript
详解vue.js组件化开发实践
2016/12/14 Javascript
JavaScript实现类似淘宝的购物车效果
2017/03/16 Javascript
使用Xcache缓存器加速PHP网站的配置方法
2017/04/22 Javascript
NodeJS链接MySql数据库的操作方法
2017/06/27 NodeJs
vue2手机APP项目添加开屏广告或者闪屏广告
2017/11/28 Javascript
Angular7中创建组件/自定义指令/管道的方法实例详解
2019/04/02 Javascript
深入解读VUE中的异步渲染的实现
2020/06/19 Javascript
Python最基本的输入输出详解
2015/04/25 Python
python调用fortran模块
2016/04/08 Python
详解python3中socket套接字的编码问题解决
2017/07/01 Python
Window10+Python3.5安装opencv的教程推荐
2018/04/02 Python
win10 64bit下python NLTK安装教程
2018/09/19 Python
python中的&&及||的实现示例
2019/08/07 Python
python解释器spython使用及原理解析
2019/08/24 Python
Python多重继承之菱形继承的实例详解
2020/02/12 Python
Python制作简单的剪刀石头布游戏
2020/12/10 Python
CSS3 border-radius圆角的实现方法及用法详解
2020/09/14 HTML / CSS
英国第一的市场和亚马逊替代品:OnBuy
2019/03/16 全球购物
收银员岗位职责
2014/02/07 职场文书
幼儿园运动会入场词
2014/02/10 职场文书
党员岗位承诺书
2014/03/25 职场文书
宣传部部长竞选演讲稿
2014/04/26 职场文书
夫妻分居协议书范文
2014/11/26 职场文书
优秀大学生事迹材料
2014/12/24 职场文书
css实现两栏布局,左侧固定宽,右侧自适应的多种方法
2021/08/07 HTML / CSS