进入一家新的公司,要开发移动端app项目,前端技术选型时前端组长选的是vue的多页面开发,当时很蒙,vue不是单页面开发吗?咋出来多页面的。接触之后才发现确实存在也挺简单的,省去了路由表的配置。...单页面开发我就不多说了,主要讲多页面的开发模式与最终效果,网上一搜单页面会有好多文章博客,但是搜多页面的就很少了,比如下面这个就是列了一下两种开发模式的优缺点。...首先多页开发,肯定是一个页面就是一个单独文件,每个文件也有自己的.vue .js 和compoent自身组件,如下page里的一个文件就是一个页面。...那这么多页面之间如果有参数需要互相传递,这时就只能借用localStorage本地存储了,或者封装一个全局传参方法,挂载注册到main.js里,我是封装的localStorage方法。...那么这些页面最终也需要打包,最核心的就是下面方框里的代码了,chunk最终就是每个页面的文件名,对应的就是文件名.html. glob是打包多页面的一个方案插件,最后把pages对象抛出就行了。
HarmonyOS开发学习(1)–多页面开发 UIAbility是一种包含用户界面的应用组件,主要用于和用户进行交互。UIAbility也是系统调度的单元,为应用提供窗口在其中绘制界面。...一个UIAbility可以对应于多个页面,建议将一个独立的功能模块放到一个UIAbility中,以多页面的形式呈现。例如新闻应用在浏览内容的时候,可以进行多页面的跳转使用。...、返回上一页等。...在单实例模式下:如果目标页面的url在页面栈中已经存在同url页面,离栈顶最近同url页面会被移动到栈顶,移动后的页面为新建页,原来的页面仍然存在栈中,页面栈的元素数量不变;如果目标页面的url在页面栈中不存在同...url页面,按多实例模式跳转,页面栈的元素数量会加1。
今天我们看看VUE怎么开发单页面应用,VUE提供了脚手架vue-cli,通过这个可以很轻松的创建VUE单页面应用, 1.创建VUE项目 首先确保电脑上安装了NODE.JS, 在创建项目的目录下,...执行如下命令,就可以启动项目 npm run dev 最新会打开浏览器 2.打开项目 项目创建完成后,我们使用visual studio code打开项目,结构如下 首先项目的启动页面是...routes: [ { path: '/', name: 'HelloWorld', component: HelloWorld } ] }) 页面路由跳转到...HelloWorld的时候,会把HelloWorld组件加载到App.vue页面中显示,APP.VUE代码 <img src="....moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } 这样就完成了整个<em>页面</em>的启动和加载的流程
在本文中,会讲到如下内容: Vue 多页面的优势与劣势 Cli 3.0 的基本配置 Cli 3.0 多页面的打包上线 Cli 3.0 的目录解析 如何提升构建效率 受众人群:经常用 Vue 单页面开发的人员...文章目录 本文梗概 前言 一、简述优劣势 二、目录文件解析 三、改造配置 配置文件 运行 四、打包上线 五、提高构建效率 优化原理 操作步骤 六、总结 前言 Vue.js 3.0 支持单页面也支持多页面...本文将围绕实际多页面开发案例,剖析多页面从构建到上线一条龙的过程。自定义配置有蛮多种,这里只是只说其中一种。供大家参考使用。...多页面应用开发(MPA) 概念:有多个页面,跳转方式是页面之间的跳转; 优点:组件化开发,组件可复用,开发便捷,首屏加载快,SEO 优化好; 缺点:跳转是整个页面刷新 。...六、总结 多页面开发让前后端分离更加变得更加方便,对已有项目进行分离,不需要做太多的修改;让该项目不再依靠后端去套,后期维护也方便。
最近参与了APP内嵌H5页面的开发,这次使用vuejs替代了jQuery,仅仅把vuejs当做一个库来使用,效率提高之外代码可读性更强,在此分享一下自己的一些开发中总结的经验。...有的设计师也许会偷懒,设计图上面没有任何的标注,如果我们边开发边量尺寸,无疑效率是比较低的。要么让设计师标注上,要么自食其力。...所以为了提高开发效率,可以使用px转化为rem的插件。...但这也有特例,比如对于一些活动注册页面,需要在一屏幕内完全显示,没有下拉,这时候所有众向或者横向都应该使用rem作为单位。...这样多个表单绑定数据问题解决了,那么怎么进行页面间数据传递?
一、现状 页面多状态布局是开发中常见的需求,即页面在不同状态需要显示不同的布局,实现的方式也比较多,最简单粗暴的方式就是在 XML 中先将不同状态对应的布局隐藏起来,根据需要改变其可见状态,如果多个界面公用相同的状态布局...简单总结下,就是用 StatusView 替换掉要进行多状态布局切换的 View,这个 View 可以时 XML 中的任意 View。...先将上边这部分内容转化成代码: public class StatusView extends FrameLayout { ...... /** * 在 Activity 中的初始化方法,默认页面的根布局使用多状态布局...getChildAt(0); setContentView(view); } } 3.2、状态布局的切换 StatusView 默认支持 Loading、Empty、Error 三种状态布局,加上原始的页面内容布局...由于StatusView 继承自 FrameLayout,所以会多一层布局嵌套。
可以利用 storage事件监控localstorge的变化 ,storege事件只能注册在window上 创建两个页面 A和B 分别在不同的Tab打开 <!
第11章 单页应用 11.1 单页应用 什么是单页应用 单页应用(single page web application,SPA),是在一个页面完成所有的业务功能,浏览器一开始会加载必需的HTML、...CSS和JavaScript,之后所有的操作都在这张页面完成,这一切都由JavaScript来控制。...单页应用优缺点 优点 操作体验流畅 完全的前端组件化 缺点 首次加载大量资源(可以只加载所需部分) 对搜索引擎不友好 开发难度相对较高 优缺点都很明显,但是我们都还没尝试过就来评价,就会显得空口无凭.../vue.js"> // 1:定义路由组件 var login = { template: '我是登录页面
写在前面 刚入门前端的时候写过很多的微信H5页面,时隔多年感觉应该是手到擒来,不曾想竟很是费了一些功夫。现在把本次开发过程中遇到的问题以及我是如何解决的,做个记录。...本地开发用webpack-dev-server,测试生产环境用nginx。....***:9090; } } 四、ios初次加载白屏、跳转白屏 问题现象: ios页面初次加载白屏,刷新后正常,但切换到其他页面再后退,又会白屏。...问题原因:在ios机器上使用webview开发Vue项目时候,go history(-1),无法将body的高度拉掉,使得内容被遮住了。...问题现象:ios微信路由到另一个页面选择图片OK,但分享失效,刷新这个页面分享就正常了。
一、概述 如果用户输入错误的网址没有提示,界面也不会有任何变化,用户体验非常不友好,所以需要设置错误提示 二、设置 设置404页面需要在配置路由文件index.js中设置,其中 '*' 代表的就是404...页面 // 404 page must be placed at the end !!!...2张图片,图片下载地址: https://github.com/PanJiaChen/vue-element-admin/tree/master/src/assets/404_images 访问404页面
image.png image.png image.png image.png
一个很个性好看的404页面 演示效果请在pc端查看 废江博客 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权 转载请注明原文链接:个性404页面
什么是404页面? 404网页是用户尝试访问网站不存在的网页(由于用户点击了损坏的链接、网页已被删除或用户输入了错误的网址)时看到的页面。...,notfound.asp为自定义的404页面,使用时请修改相应文件名。 ...Google提供的404页面工具,可以在页面错误发生时给出一个智能搜索框和一个最相关的链接地址。...拓宽对404页面设置总结 1.不要将404错误转向到网站主页,否则可能会导致主页在搜索引擎中消失 2.不要使用绝对URL,如果使用绝对URL返回的状态码是302+200 3.404页面设置完成...这涉及到404页面的制作,提供用户体验很重要,404页面制作很有学问。
网上有很多thinkphp的404页面制作方法,但大多太过繁琐不简便,很烦人,所以为大家分享了最便捷的404制作方法,如下。...Tpl/think_exception.tpl',// 异常页面的模板文件 'ERROR_PAGE' => '', // 错误定向页面 附:我是不建议改框架配置的***/ 2.只要在根目录...' => './404.html', // 错误定向页面 引导用户输入错误的url路径全部跳转到404.html页面即可。...2号坑:然后我把404页面放在了Public资源文件夹下。页面里引用的css和image失效了。试了好几种路径常量__PUBLIC__,包括在config里定义IMG和CSS的模版常量,都不行。...我没有在网上搜到具体的原因,但我猜测,404页面直接被TMPL_EXCEPTION_FILE使用,并没有被TP渲染,所以路径常量没被解析。 为了验证我的想法,我又把U函数放进去。
本文结合先前写的文章和开发经验分享给大家,希望也能帮助刚步入移动端开发的新人解惑。以下会以其中一个以公积金页面开发项目作为例子,介绍移动端的一些常见问题和使用Vuejs作为lib进行多页开发的经验。...下面附上微信端和浏览器端的效果图: 微信端:[微信端] 浏览器端: [浏览器端] Vuejs作为lib开发移动端页面 为何不使用SPA模式 一般移动端使用vue是为了数据交互频繁而且快速开发的页面,为什么不使用单页...为了快速开发,快速上线 项目其他成员不熟悉SPA,不熟悉webpack 参与项目时项目已使用多页开发,短时间无法重构 抛开使用单页的架构,开发多页应用时,一个页面交互逻辑与一个Vue实例对应。...这样多个表单绑定数据问题解决了,那么怎么进行页面间数据传递?...H5基于微信jsSDK,你一定接触过微信授权域名,微信会将授权数据传给一个回调页面,而回调页面必须在你配置的域名下(含子域名)。
尤其是 form 表单字段比较多的时候,我开始的解决方案是通过 form 的 tab 来减少表单一页的字段数量。...表单的多栏目布局 思路:我想的是 form 表单的字段外面包一次 row ,然后控制 row 里面每个字段的长宽。...当我看了 dcat-admin 的代码后,发现是已经实现好了的,所以不需要自己在开发,我这里主要讲讲表单的多栏目布局的用法和底层代码怎么实现的。... @endforeach field [‘element’]->render () 就是将字段渲染成 html 我们可以 dd 下 详情的多栏目布局 思路:详情的多栏目布局是需要重新开发的...,思路逻辑是和表单的多栏目布局类似的 主要是创建一个 Dcat\Admin\Show\Row 文件,里面的代码如下 <?
这样就用到了excel的sheet页。 导入poi包 ·····<!...index); if (row == null) { row = sheet.createRow(index); } return row; } /** * 设置sheet页的列宽...(Exception e) { // TODO: handle exception Ast.astFalse("导出分数情况表_信息出错"); } } } 解析导出sheet页方法...导出的时候, HSSFWorkbook workbook = new HSSFWorkbook();使用这个类来导出多sheet页,先把固定的头信息放到List gdHeader;中,然后把变量作业名称也放到...gdHeader中,根据循环,每次设置对应行列的数据,然后调用导出方法,这样就能导出多sheet也学科成绩。
path = require('path') let HtmlWebpackPlugin = require('html-webpack-plugin') module.exports={ //多入口
1、React多页面应用1(webpack4 开发环境搭建,包括热更新,api转发等)---2018.04.04 2、React多页面应用2(webpack4 处理CSS及图片,引入postCSS,及图片处理等...)---2018.04.08 3、React多页面应用3(webpack4 多页面实现)---2018.04.09 4、React多页面应用4(webpack4 提取第三方包及公共组件)---2018.04.10...5、React多页面应用5(webpack4 多页面自动化生成多入口文件)---2018.04.11 6、React多页面应用6(webpack4 开发环境打包性能小提升)---2018.04.12...7、React多页面应用7(webpack4 生产环境配置)---2018.04.13 8、React多页面应用8(webpack4 gulp自动化发布到多个环境,生成版本号,打包成zip等)---2018.04.16...9、React多页面应用9(webpack4 引入eslint代码检查)---2018.04.17 开发环境:Windows 8,node v8.9.1,npm 5.5.1,WebStorm 2017.2.2
前言 最近看到一些人在问单页面和多页面应用的区别。因为最近在整理 Vue 相关的内容,所以也就输出这一篇短文希望可以给你一个整体的认识。 这里也会大体介绍单页应用实现的核心 —— 前端路由。...单页应用 VS 多页应用 直观对比图 ? 单页应用(SinglePage Application,SPA) 指只有一个主页面的应用,一开始只需加载一次 js,css 等相关资源。...所有的内容都包含在主页面,对每一个功能模块组件化。单页应用跳转,就是切换相关组件,仅刷新局部资源。...多页应用(MultiPage Application,MPA) 指有多个独立的页面的应用,每个页面必须重复加载 js,css 等相关资源。多页应用跳转,需要整页资源刷新。...,使用全局变量就好(Vuex) cookie 、localStorage 等缓存方案,URL 参数,调用接口保存等 相关成本 前期开发成本较高,后期维护较为容易 前期开发成本低,后期维护就比较麻烦,因为可能一个功能需要改很多地方
领取专属 10元无门槛券
手把手带您无忧上云