vue如何搭建多页面多系统应用


Posted in Javascript onJune 17, 2020

本文为大家分享了vue如何搭建多页面多系统应用,供大家参考,具体内容如下

一、多页面多系统应用

1、思路

使用Vue搭建多页应用。所有系统都在同一目录下。配置多入口多出口。每个系统之间可以链接。每个系统内依然采用Vue单页应用开发。

2、组件复用性

可以将所有的系统公共组件放到系统目录最外面,以达到组件复用。在系统内部依然将自己独立的组件封装,复用。这样可以最大限度的提高组件的复用性。

3、路由

每个系统单独进行路由配置

4、数据管理

每个系统数据仓库单独处理

5、目录结构

vue如何搭建多页面多系统应用

6、效果

vue如何搭建多页面多系统应用

vue如何搭建多页面多系统应用

在做Vue项目的时候,需要用对多个类似系统做一个集成。想过很多种方法,比如:完全单页应用,分开独立应用,最终还是测试了一下多页面开发多系统。

准备工作:

使用vue-cli搭建最基本的vue项目。

修改webpack配置:

在这一步里我们需要改动的文件都在build文件下,分别是:

  • utils.js
  • webpack.base.conf.js
  • webpack.dev.conf.js
  • webpack.prod.conf.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/system')
 // 用于做相应的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 = {
 context: path.resolve(__dirname, '../'),
 /* 修改部分 ---------------- 开始 */
 entry: utils.entries(),
 /* 修改部分 ---------------- 结束 */
 output: {
  path: config.build.assetsRoot,
  filename: '[name].js',
  publicPath: process.env.NODE_ENV === 'production' ?
   config.build.assetsPublicPath : config.dev.assetsPublicPath
 }
 ...
 }

webpack.dev.conf.js

plugins: [
  new webpack.DefinePlugin({
   'process.env': require('../config/dev.env')
  }),
  new webpack.HotModuleReplacementPlugin(),
  new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update.
  new webpack.NoEmitOnErrorsPlugin(),
  // https://github.com/ampedandwired/html-webpack-plugin
  /* 注释这个区域的文件 ------------- 开始 */
  // new HtmlWebpackPlugin({
  // filename: 'index.html',
  // template: 'index.html',
  // inject: true
  // }),
  /* 注释这个区域的文件 ------------- 结束 */
  // copy custom static assets
  new CopyWebpackPlugin([{
   from: path.resolve(__dirname, '../static'),
   to: config.dev.assetsSubDirectory,
   ignore: ['.*']
  }])

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

webpack.prod.conf.js

/* 注释这个区域的内容 ---------------------- 开始 */
 // 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'
 // }),
 /* 注释这个区域的内容 ---------------------- 结束 */

添加:

vue如何搭建多页面多系统应用

目录结构介绍

  • src就是我所使用的工程文件了,assets,components,system分别是静态资源文件、组件文件、页面文件。
  • 前两个就不多说,主要是页面文件里,我目前是按照项目的模块分的文件夹,你也可以按照你自己的需求调整。然后在每个模块里又有三个内容:vue文件,js文件和html文件。这三个文件的作用就相当于做spa单页面应用时,根目录的index.html页面模板,src文件下的main.js和app.vue的功能。
  • 原先,入口文件只有一个main.js,但现在由于是多页面,因此入口页面多了,我目前就是两个:index和system2,之后如果打包,就会在dist文件下生成两个HTML文件:index.html和system2.html(可以参考一下单页面应用时,打包只会生成一个index.html,区别在这里)。

注意的地方

配置js时候:

import Vue from 'Vue'
import cell from './cell.vue'

/* eslint-disable no-new */
new Vue({
 el: '#app',
 render: h => h(cell)
})

页面跳转:

可以写成: <a href='system2.html'></a>

打包后的资源路径

├── dist
│   ├── js
│   ├── css
│   ├── index.html
│   └── system2.html

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
&amp;lt;script defer&amp;gt; defer 是什么意思
May 10 Javascript
Jquery乱码的一次解决过程 图解教程
Feb 20 Javascript
两种常用的javascript数组去重方法思路及代码
Mar 26 Javascript
javascript获取设置div的高度和宽度兼容任何浏览器
Sep 22 Javascript
JS实现仿QQ聊天窗口抖动特效
May 10 Javascript
D3.js实现散点图和气泡图的方法详解
Sep 21 Javascript
ES6概念 ymbol.for()方法
Dec 25 Javascript
javascript使用btoa和atob来进行Base64转码和解码
Mar 20 Javascript
Javascript实现运算符重载详解
Apr 07 Javascript
layui实现数据表格隐藏列的示例
Oct 25 Javascript
vue项目中极验验证的使用代码示例
Dec 03 Javascript
D3.js 实现带伸缩时间轴拓扑图的示例代码
Jan 20 Javascript
vue2.0实现列表数据增加和删除
Jun 17 #Javascript
使用next.js开发网址缩短服务的方法
Jun 17 #Javascript
vue实现前端分页完整代码
Jun 17 #Javascript
JS实现网站楼层导航效果代码实例
Jun 16 #Javascript
利用webpack理解CommonJS和ES Modules的差异区别
Jun 16 #Javascript
JS 5种遍历对象的方式
Jun 16 #Javascript
js实现小球在页面规定的区域运动
Jun 16 #Javascript
You might like
真正面向对象编程:PHP5.01发布
2006/10/09 PHP
修改了一个很不错的php验证码(支持中文)
2007/02/14 PHP
php中取得文件的后缀名?
2012/02/20 PHP
PHP对表单提交特殊字符的过滤和处理方法汇总
2014/02/18 PHP
php中filter_input函数用法分析
2014/11/15 PHP
Prototype 学习 Prototype对象
2009/07/12 Javascript
微博@符号的用户名提示效果。(想@到谁?)
2010/11/05 Javascript
javascript 基础篇3 类,回调函数,内置对象,事件处理
2012/03/14 Javascript
Javascript和Java获取各种form表单信息的简单实例
2014/02/14 Javascript
javascript制作网页图片上实现下雨效果
2015/02/26 Javascript
比例尺、缩略图、平移缩放之百度地图添加控件方法
2015/08/03 Javascript
js过滤HTML标签完整实例
2015/11/26 Javascript
浅谈js的html元素的父节点,子节点
2016/08/06 Javascript
JS冒泡事件与事件捕获实例详解
2016/11/25 Javascript
手把手教你使用vue-cli脚手架(图文解析)
2017/11/08 Javascript
vue2.0 可折叠列表 v-for循环展示的实例
2018/09/07 Javascript
详解Vue组件之间通信的七种方式
2019/04/14 Javascript
TypeScript开发Node.js程序的方法
2019/04/30 Javascript
利用vue-i18n实现多语言切换效果的方法
2019/06/19 Javascript
vue 地区选择器v-distpicker的常用功能
2019/07/23 Javascript
webpack的pitching loader详解
2019/09/23 Javascript
js+html实现点名系统功能
2019/11/05 Javascript
[02:17]DOTA2亚洲邀请赛 RAVE战队出场宣传片
2015/02/07 DOTA
[01:09:20]NB vs NAVI Supermajor小组赛A组 BO3 第二场 6.2
2018/06/03 DOTA
Python简单实现的代理服务器端口映射功能示例
2018/04/08 Python
python写入并获取剪切板内容的实例
2018/05/31 Python
python实现俄罗斯方块游戏(改进版)
2020/03/13 Python
Space NK英国站:英国热门美妆网站
2017/12/11 全球购物
如何执行一个shell程序
2012/11/23 面试题
综合实践活动方案
2014/02/14 职场文书
副护士长竞聘演讲稿
2014/04/30 职场文书
质监局领导班子践行群众路线整改方案
2014/10/26 职场文书
2014五年级班主任工作总结
2014/12/05 职场文书
西柏坡导游词
2015/02/05 职场文书
2015年银行员工工作总结
2015/04/24 职场文书
vue如何使用模拟的json数据查看效果
2022/03/31 Vue.js