单页应用会随着项目越大，导致首屏加载速度很慢！！！以下给出在下知道的几种优化方案 使用CDN资源,减小服务器带宽压力路由懒加载将一些静态js css放到其他地方（如OSS），减小服务器压力按需加载三方资源，如iview,建议按需引入iview中的组件使用nginx开启gzip减小网络传输的流量大小webpack开启gzip压缩若首屏为登录页，可以做成多入口，登录页单独分离为一个入口使用CDN资源,减小服务器带宽压力 在index.html中引入cdn资源 ...<...
vux微信分享说明 分享接口只有认证公众号才能使用，域名必须备案且在微信后台设置。 先确认已经满足使用jssdk的要求再进行开发。 引入 在 main.js 中全局引入： import { WechatPlugin } from vux Vue.use(WechatPlugin)console.log(Vue.wechat) // 可以直接访问 wx 对象。 组件外使用 考虑到你需要在引入插件后调用config方法进行配置，你可以通过 Vue.wechat 在组件外部访问wx对象。 jssdk需要请求签名配置接口，你可以直接使用...
在做项目的时候，遇到需要做路由跳转，但当用户输入错误url地址，或是其它非法url路由地址，我们或许会想到跳转至404页面。不管你有没有写一个404页面，当出现未匹配路由都需重新指定页面跳转。可能大家首先想到会是路由重定向，redirect来解决这个问题。但实际上通过redirect是没办法更好解决这个问题的。 看代码红色部分 import Vue from vueimport Router from vue-router import Hello from @/components/Hello Vue.use(Router...
在用vue-cli脚手架搭建手机H5页面应用的时候，其中一页中部有input，底部有position：absolute；bottom：0的元素， 当点击input框时在安卓手机上出现了： 1 虚拟键盘弹出盖住input 2 底部定位的元素被挤上来 网络上很多关于body设定宽高以及scrolltop的方法都不管用，因为这里是路由页面，根据网上的思路，吊起输入键盘的时候页面的高度是变化的，监听window.onresize，判断是否吊起键盘，然后设定底部模块的隐藏和显示，整个块元素...
上个星期，甲方说要在应用上做一个促活活动（其实就是让用户领OFO的骑车券），考虑到之前在我另一个应用上已经做过客户端token验证，想想，撸起袖子直接在之前的Node上开搞吧。 Nuxt 这个东西类似与React中的Next，做Vue服务端渲染在Nuxt确实挺方便的，整个目录结构与Vue-Cli也差不多，但我觉得更清晰明了，而且有很丰富的配置，包括我最喜欢的顶部Loadding条啊、Layer主题模板啊、服务端渲染有益于SEO啊、自动生成Router啊等等等等...
webpack 升级到4之后还没好好的同步一个可实用的webpack架子，接下来用webpack4来搭建一个简单的react的多界面应用，废话不说 直接撸码创建工程$ mkdir demo && cd demo $ npm init -y webpack 配置安装react + babel 依赖 $ npm i -S react@16.3.0 react-dom@16.3.0$ npm i -D webpack@4.4.1 webpack-cli@2.0.13 webpack-dev-server@3.1.1 webpack-merge@4.1.2 babel-cli@6.26.0 babel-preset-env@1.6.1 babel-preset-react@6.24....
本文实例讲述了JavaScript高级函数应用之分时函数。分享给大家供大家参考，具体如下： 一、前提介绍： 某些函数是用户主动调用的，但因为一些客观的原因，这些函数会严重影响页面的性能。 二、应用场景： 在短时间内往页面中大量添加DOM节点显然会让浏览器吃不消，往往会导致浏览器的卡顿甚至假死。 三、解决方案： 以上述添加节点的例子来说明问题，我们将创建节点的工作分批进行，比如把1秒钟创建1000个节点，改为每隔200毫秒创建...
next.js简介 最近在学React.js，React官方推荐使用next.js框架作为构建服务端渲染的网站，所以今天来研究一下next.js的使用。 next.js作为一款轻量级的应用框架，主要用于构建静态网站和后端渲染网站。 框架特点 使用后端渲染自动进行代码分割（code splitting），以获得更快的网页加载速度简洁的前端路由实现使用webpack进行构建，支持模块热更新（Hot Module Replacement）可与主流Node服务器进行对接（如express）可自定义babel...
部分截图安装&&运行：1、安装 node：http://nodejs.cn/download/ 安装 git：https://git-scm.com/downloads 2、从我的仓库克隆代码： $ git clone https://github.com/ColinScales/shell 3、安装vue脚手架工具vue-cli: $npm install vue-cli -g 4、进入代码根目录安装依赖： $ npm install --save-dev 5、运行命令： $ npm run dev 打开浏览器查看运行效果 6、发布代码： $ npm run build 发布完代码后会生成dist目录，保存着项目的...
最近在开发过程中遇到一个问题。在节点上面写点击事件时，点击事件不执行。代码如下： <!-- 操作 --><el-table-column label="操作"><template slot-scope="scope"><span class="poi icon-hover f16 mr20" @click=scope.row.edit=!scope.row.edit><svg-icon :icon-class="scope.row.edit?icon_edit_outline:icon_save"></svg-icon></span><span class="poi icon-hover f16"><svg-icon icon-class="icon_delete"></svg-icon></span>...
React Native(以下简称RN)为传统前端开发者打开了一扇新的大门。其中，使用浏览器的调试工具去Debug移动端的代码，无疑是最吸引开发人员的特性之一。 试想一下，当你在手机屏幕按下一个按钮，处理事件的代码就可以立即在浏览器的调试工具里进行断点调试，而且每当你对代码进行修改，界面便可以完成快速地重载，省去昂长的编译时间，这会是多么提高工作效率。 传统的Web前端开发人员自然很熟悉浏览器的调试工具，但是对于如何将其在...
vue中经常使用到<input>和<textarea>这类表单元素，vue对于这些元素的数据绑定和我们以前经常用的jQuery有些区别。vue使用v-model实现这些标签数据的双向绑定，它会根据控件类型自动选取正确的方法来更新元素。 v-model本质上是一个语法糖。如下代码<input v-model="test">本质上是<input :value="test" @input="test = $event.target.value">，其中@input是对<input>输入事件的一个监听:value="test"是将监听事件中的数据放入...
1.代码压缩(gzip)如果你用的是nginx服务器，请修改配置文件(其他web server 类似)：sudo nano /etc/nginx/nginx.conf 在Gzip Settings里加入： gzip on; gzip_min_length 1k; gzip_buffers 4 16k; gzip_comp_level 5; gzip_types text/plain application/x-javascript text/css application/xml text/javascript application/x-httpd-php;gzip开启或者关闭 gzip 模块，这里使用 on 表示启动gzip_min_length设置允许压缩的页面最小字...
本文实例讲述了JS实现图片转换成base64的各种应用场景。分享给大家供大家参考，具体如下： 网络上有很多片介绍通过js将图片转换成base64的文章，之所以再写这篇文章的原因时发现没有找到系统的介绍的文章，有的介绍如何实现本地项目的图片转码，有的介绍如何实现网络资源的图片转化，但是系统介绍的少之又少，所以我就在这里将各种场景系统的介绍一下： 场景一：将用户本地上传的资源转化，即用户通过浏览器点击文件上传时，将图片...
是什么高阶组件是一个函数，能够接受一个组件并返回一个新的组件。没有任何副作用。 为什么用封装并抽离组件的通用逻辑，让此部分逻辑在组件间更好地被复用。 如何用//hoc为我们的高阶组件，可以使用es7装饰器语法来使用高阶组件 //当然也可以不用es7，如：let hocHello = hoc(Hello)，只是es7的语法更优雅一些。 //高阶组件可以叠加使用，可以对一个组件使用多个高阶组件 @hoc class Hello extends React.Component {// } ...