github链接借鉴吾记APP，使用 vue2.0+vue-router+vuex 为主要技术栈，elementui做为ui框架，多模块 spa 模式，webpack2.0 负责模块打包，gulp 负责处理静态资源打包、压缩，欢迎打赏star！！！吾记前端构建流程本地环境准备安装node： * （"node": ">=6.0"，对应需要升级node-sass，不然使用不了！）配置webpack： npm install -g webpack(sudo权限)windows配置cnpm：npm install -g cnpm --registry=https:依赖包安装进入wuji目录...
业务需求最近公司要求开发web版的app,由于app是偏向内容方面，而且带了一个聊天模块，所以一般的多页开发不是很适合，而且主要是手机浏览，对加载速度或者用户体验来说都比较苛刻。调研了很多框架和模式，最后自己东拼西凑搞出来了这么一个玩意。服务端毫无疑问使用node，使用typescript可以有效的在编码同时查错，强类型语言写服务端毫无压力。#app.ts 只贴重要代码var webpack = require(webpack) var webpackDevMiddleware = re...
在现在正在开发的项目中，为了实现前后端分离开发，决定使用刚刚发布不久的 vue.js 2.0 和 koa 2.0 来进行开发，深入的使用了webpack作为前端打包工具。为了更好的掌握，打算通过练习来加强对webpack的理解。接下来还会针对开发中相关的技术，做深入的练习，并且写一系列文章。 本文主要目的是对项目开发和自己练习中对webpack的使用，做一个总结。介绍开发vue.js单页面前端应用时，如何使用webpack来打包。本文同时也是之前rea...
业务需求 最近公司要求开发web版的app,由于app是偏向内容方面，而且带了一个聊天模块，所以一般的多页开发不是很适合，而且主要是手机浏览，对加载速度或者用户体验来说都比较苛刻。调研了很多框架和模式，最后自己东拼西凑搞出来了这么一个玩意。 服务端 毫无疑问使用node，使用typescript可以有效的在编码同时查错，强类型语言写服务端毫无压力。#app.ts 只贴重要代码var webpack = require('webpack') var webpackDevMiddleware...
前言 上一篇博文我们讲到了节流函数的应用场景，我们知道了节流函数可以用在模糊查询、scroller、onresize等场景；今天这篇我们来讲防抖函数的应用场景：： 通过上一篇博文的学习，我们知道了防抖函数的原理：只有在事件触发的时候才会延迟加载，如果在延迟加载之前再次触发，则会刷新延迟时间重新延迟，触发次数有且只有触发一次； 如果对防抖函数原理有疑惑，请点击链接跳转到关于防抖函数讲解的博文：https://www.gxlcms.com/ar...
上一篇讲到了javascript的节流函数和防抖函数，那么我们在实际场合中该如何运用呢？ 首先，我们来理解一下：节流函数首先是节流，就是节约流量、内存的损耗，旨在提升性能，在高频率频发的事件中才会用到，比如：onresize，onmousemove，onscroll，oninput等事件中会用到节流函数； 输入框的模糊查询功能原理分析 所谓模糊查询就是不需要用户完整的输入或者说全部输入信息即可提供查询服务，也就是用户可以在边输入的同时边看到提示...
一、函数式组件和普通组件的区别 渲染快没有实例，意味着没有（this）没有生命周期（没有响应式数据）二、组件函数的使用1.以局部组件为例，将组件标记为functional=ture; 因为函数式没有实例，因此组件需要的一切都是通过context参数传递，它是一个包括如下字段的对象： props：提供所有 prop 的对象children: VNode 子节点的数组slots: 一个函数，返回了包含所有插槽的对象scopedSlots: (2.6.0+) 一个暴露传入的作用域插槽的对象...
一、Vue项目初始化-引入typescript使用typescript构建Vue应用和使用js一样，都是通过vue-cli去初始化并创建一个vue项目，只不过使用typescript构建的时候要在脚手架问卷操作的时候勾选上typescript选项。二、typescript Vue项目比较使用typescript构建的Vue项目发生了一些变化: ① main.js变成了main.ts，但是main.ts中的内容和main.js的内容是一模一样的。 ② router.js变成了router.ts，但是router.ts中的内容和router.js中的内容...
在前端项目（PC端）中，内存泄露的定位往往比修复更加困难，即使google浏览器有提供Memory工具，但是面对成千上万的元素和错综复杂的引用关系，开发则依然很难快速定位到问题代码块。 一、什么是内存泄漏？ 系统进程不再用到的内存，没有及时释放，就叫做内存泄漏（memory leak）。当内存占用越来越高，轻则影响系统性能，重则导致进程崩溃。Chrome限制了浏览器所能使用的内存极限（64位为1.4GB，32位为1.0GB），这也就意味着浏览器...
批处理 前端现在在做项目的时候大多数遇到的都是单页面应用，但有时需要做多页面的时候，会把单页拿过来修改成多页面，如果代码多了，对单页或多页的配置可能会混乱，那么有没有更好的方式能把单页面和多页面不同的配置代码分开，能更清楚的分辩他们的区别，这里是利用 批处理 对前端构建进行部署 git地址 目录分为三块 single //单页代码 share // 共用代码 many //多页代码只需要用到 批处理 对其中两者进行合并就能生成想要的...
在上一篇文章中，我们讨论了如何提高大型数据的性能。但是我们还没有测量它提高了多少。我们可以使用Chrome DevTools 的性能选项来实现这一点。但是为了获取准确数据，我们必须在Vue上激活性能模式。我们可以在main.js或者插件中设置全局变量，代码如下：Vue.config.performance = true;如果你设置了正确的 NODE_ENV 环境变量，那么可以使用非生产环境做判断。const isDev = process.env.NODE_ENV !== "production"; Vue.config.pe...
详细信息查看：vue-weachat-title 解决问题： 1、Vuejs 单页应用在iOS系统下部分APP的webview中 标题不能通过 document.title = xxx 的方式修改 该插件只为解决该问题而生(兼容安卓) 2、在vue单页面中，通过浏览器分享到QQ、微信等应用中的链接，只有一个首页标题和默认icon图片 已测试：APP 微信 QQ 支付宝 淘宝安装 npm install vue-wechat-title --save 用法 1、在main.js中引入 import VueWechatTitle from vue-wechat-title V...
本文实例为大家分享了Vue2.x通用条件搜索组件的封装及应用，供大家参考，具体内容如下 效果 组件源码 <template><div class="search"><el-select v-model="type" @change="changeType" class="select"><el-optionv-for="item in selectItems":key="item.value":lable="item.label":value="item.value"></el-option></el-select><div class=search-input><el-input :placeholder="placeholderDes" v-model="searchValue"></el-inp...
本文实例为大家分享了Vue2.x通用编辑组件的封装及应用，供大家参考，具体内容如下 效果 组件源码 <template><div class="edit-input"><div class="editBox"><div><span class="list">{{ name }}：</span><span class="listValue" v-if="!editStatus">{{value}}</span></div><span class="editLogo iconfont icon-Edit" @click="editStatus = !editStatus" v-if="!editStatus"></span><div class="edit" v-if="editStatus"><el-in...
需求 一个平台P，包含产品a、b、c、d、e。各产品UI样式风格统一，且会用到公共配置（HOST、是否添加埋点js）、组件（头部导航、表格、搜索框）、方法（请求拦截、生成UUID）。 现状：由于历史遗留原因，各产品为独立SPA、各自维护，配置、组件也都自成一体，只是大概样式上保持了一致，但细节（比如同一面包屑样式，左边距5px、8px都有）都不一致。 这种情况下，改组件、改配置都得一改改多个地方，且有些项目是vue-cli2、有些是vu...