- 博客(46)
- 收藏
- 关注
RSS订阅原创 从vue-cli中看node.js和webpack的运作
前言vue-cli和webpack结合的脚手架挺好用的，但是初次使用对于其中的配置和npm包的引用总是会一脸懵逼，这篇文章是对其中一些相关模块的简单分析。主要目的是加深我自己对webpack和node.js的认知。正文1.项目结构vue-cli的配置文件主要在build和config文件夹中，其中config文件夹主要是放一些环境变量，webpack的路径等等一些参数。| -- build
2017-06-21 21:46:58
1343
原创 Javascript性能优化阅读笔记
第一章 加载和执行大多数浏览器都是用单一进程处理UI界面的刷新和JavaScript的脚本执行，所以同一时间只能做一件事，Javascript执行过程耗时越久，浏览器等待响应的时间就越长。所以，HTML页面在遇到无阻塞的脚本尽管减少Javascript文件的大小并限制HTTP请求次数仅仅只是第一步，下载单个较大的Javascript脚本执行也许要锁死大量的事件，所以无阻塞的脚本的意义在于页面加载完成
2017-06-21 10:54:30
1319
原创 MongoDB学习笔记
MongoDB的定义MongoDB是由C++语言编写的，是一个基于分布式文件存储的开源数据库系统。在高负载的情况下，添加更多的节点，可以保证服务器性能。MongoDB旨在为WEB应用提供可扩展的高性能数据存储解决方案。MongoDB将数据存储为一个文档，数据结构由键值对（key => value）对组成。MongoDB文档类似于JSON对象。字段值可以包含其他文档，数组及文档数组。MongoDB的主
2017-05-31 16:45:12
763
翻译 vue-cli与webpack结合如何处理静态资源
处理静态资源你也许会注意到vue-cli与webpack结合的项目中，我们通常会有两个静态资源的路径：src/assets和static/，他们两者的区别是什么呢？打包的资源为了回答这个问题，我们首先要明白Webpack是如何处理静态资源的。在*.vue组件里，所有的templates和CSS模块都被vue-html-loader和css-loader解析来查找路径URL。举个例子，在<img sr
2017-05-25 14:49:02
14356
原创 初探gulp
前言关于基本的使用方法，这里就不过多介绍了，主要是记录下自己在使用gulp中遇到的问题。正文看下结果项目目录。 // gulpfile.jsvar gulp = require('gulp'), minifycss = require('gulp-minify-css'), uglify = require('gulp-uglify'), rename = require
2017-05-17 21:13:56
370
转载 像素单位的兼容性
px：绝对单位，页面按精确像素展示em：相对单位，基准点为父节点字体的大小，如果自身定义了font-size按自身来计算（浏览器默认字体是16px），整个页面内1em不是一个固定的值。rem：相对单位，可理解为”root em”, 相对根节点html的字体大小来计算，CSS3新加属性，chrome/firefox/IE9+支持。(另外需注意chrome强制最小字体为12号，即使设置成 10px 最终
2017-05-15 10:24:10
454
转载 雅虎网站性能优化的34条黄金规则
雅虎团队经验：网站页面性能优化的34条黄金守则1、尽量减少HTTP请求次数 终端用户响应的时间中，有80%用于下载各项内容。这部分时间包括下载页面中的图像、样式表、脚本、Flash等。通过减少页面中的元素可以减少HTTP请求的次数。这是提高网页速度的关键步骤。 减少页面组件的方法其实就是简化页面设计。那么有没有一种方法既能保持页面内容的丰富性又能达到加快响应时间的
2017-05-12 20:24:50
1007
转载 express里的中间件
前言vue-cli脚手架+webpack结合的时候，后台用的是express框架搭建的简单服务器，包括热加载等等，都用到了express中的中间件概念。代码大概如下：// handle fallback for HTML5 history APIapp.use(require('connect-history-api-fallback')())// serve webpack bundle out
2017-05-06 17:04:24
580
翻译 express框架响应对象res的方法
基本使用方法var express = require('express')var app = express()app.get('/', [a, b], function(req, res, next), function(req, res))Res对象的方法res.download()提示下载文件。 res.download(path [, filename] [, fn])通过传递路径
2017-05-06 14:46:40
3764
转载 一探前端开发中的JS调试
有请提示：文中涉及较多Gif演示动画，移动端请尽量在Wifi环境中阅读前言：调试技巧，在任何一项技术研发中都可谓是必不可少的技能。掌握各种调试技巧，必定能在工作中起到事半功倍的效果。譬如，快速定位问题、降低故障概率、帮助分析逻辑错误等等。而在互联网前端开发越来越重要的今天，如何在前端开发中降低开发成本，提升工作效率，掌握前端开发调试技巧尤为重要。本文将一一讲解各种前端JS调试技巧，也许你已经熟练
2017-05-03 09:27:24
803
转载 vue-awesome-swiper（轮播图vue插件）
Vue-Awesome-Swiper轮播图插件，可以同时支持Vue.js（1.X ~ 2.X），兼顾PC和移动端，SPA和SSR。例子例子安装设置安装Install vue-awesome-swipernpm install vue-awesome-swiper --savevue挂载// importimport Vue from 'vue'import VueAwesomeSwiper fr
2017-05-02 17:32:35
43484
1
翻译 vue-lazyload
Vue-Lazyload一款适于在应用中懒加载图片的vue插件，下面是一些值得注意的地方：轻量、功能强大且易于使用可作用于任意一种图片在图片加载过程中添加加载样式同时支持Vue 1.0和Vue 2.0DemoDemo要求Vue.js 1.x 或者 2.x安装npm$ npm install vue-lazyloadCDNCDN: https://unpkg.com/vue-lazylo
2017-05-02 16:08:16
1978
1
转载 JavaScript代码规范
JavaScript编码规范1 前言2 代码风格 2.1 文件 2.2 结构 2.2.1 缩进 2.2.2 空格 2.2.3 换行 2.2.4 语句 2.3 命名 2.4 注释 2.4.1 单行注释 2.4.2 多行注释 2.4.3 文档化注释 2.4.4 类型定义 2.4.5 文件注释 2.4.6 命名空间注释 2.4.7
2017-04-26 22:23:31
1841
转载 CSS代码规范
CSS编码规范1 前言2 代码风格 2.1 文件 2.2 缩进 2.3 空格 2.4 行长度 2.5 选择器 2.6 属性3 通用 3.1 选择器 3.2 属性缩写 3.3 属性书写顺序 3.4 清除浮动 3.5 !important 3.6 z-index4 值与单位 4.1 文本 4.2 数值 4.3 url() 4.4 长度 4.5 颜色 4.6 2D 位置
2017-04-26 22:10:44
458
原创 语义化标签
正文1.定义标签语义化的目的就是让大家直观地认识标签(markup)和属性(attribute)的用途和作用。2.优点语义化的网页的好处，最主要的就是对搜索引擎友好，有了良好的结构和语义你的网页内容自然容易被搜索引擎抓取，你网站的推广就可以省下不少的功夫。语义Web技术有助于利用基于开放标准的技术，从数据、文档内容或应用代码中分离出意义。3.需要注意什么尽可能少的使用无语义的标签div和span；
2017-04-26 21:57:04
1014
原创 XML与JSON
正文1.定义介绍（1）.XML定义扩展标记语言 (Extensible Markup Language, XML) ，用于标记电子文件使其具有结构性的标记语言，可以用来标记数据、定义数据类型，是一种允许用户对自己的标记语言进行定义的源语言。 XML使用DTD(document type definition)文档类型定义来组织数据;格式统一，跨平台和语言，早已成为业界公认的标准。XML是标准通用标记
2017-04-26 11:18:07
803
原创 path与publicPath的区别
前言在webpack模块化开发的过程中，发现webpack.config.js配置文件的输出路径总有一个path与publicPath，不解其意。module.exports = { output: { path: path.resolve("./examples/dist"), filename: "app.js", publicPath: "What should I
2017-04-24 22:41:13
4308
原创 npm常用模块记录
chalk解释 命令行彩色输出。使用var chalk = require('chalk')console.log(chalk.yellow('....'))semver解释 npm以及package.json解析版本号时的辅助模块，更为语义化。使用var semver = require('semver')semver.clean(process.version)semver.clean
2017-04-24 11:31:05
4661
转载 gulp/grunt和browserify/webpack的区别
Gulp应该和Grunt比较，他们的区别我就不说了，说说用处吧。 Gulp / Grunt 是一种工具，能够优化前端工作流程。 比如自动刷新页面、combo、压缩css、js、编译less等等。 简单来说，就是使用Gulp/Grunt，然后配置你需要的插件， 就可以把以前需要手工做的事情让它帮你做了 。说到 browserify / webpack ，那还要说到 seajs / requi
2017-04-23 18:31:11
530
转载 五种前端开发必备的调试技术
正文在前端开发中，调试技术是必不可少的技能，本文将介绍五种前端开发必备的调试技术。Weinre移动调试DOM 断点debugger断点native方法hook远程映射本地调试Weinre在移动上面开发调试是很复杂的，所以就有了weinre。安装weinre可以实现pc来调试手机页面，所以对于移动开发调试是很重要的哦~安装weinreweinre可以通过npm来安装：npm install
2017-04-20 09:34:37
575
转载 在Vue项目里正确地引用jQuery插件
正文1.安装jquery依赖npm install jquery --save2.修改两处配置文件module.exports = { // 其他代码... resolve: { extensions: ['', '.js', '.vue'], fallback: [path.join(__dirname, '../node_modules')], a
2017-04-20 09:21:40
30105
2
原创 客户端存储和应用程序存储
客户端存储Web应用允许使用浏览器提供的API实现将数据存储到用户的电脑上。这种客户端存储相当于赋予了Web浏览器记忆能力。客户端存储遵循“同源策略”，因此不同站点的页面时无法互相读取对方存储的数据，而同一站点的不同页面之间是可以互相共享存储数据的，他为我们提供了一种通信机制。客户端存储包括Web存储（localStorage与sessionStorage）、cookie、IE User Data、
2017-04-19 21:22:46
706
转载 基于融云的IM
融云IM前言没什么好说，先从官方把知识点摘抄一遍，慢慢理解…正文参考文献融云官网 http://www.rongcloud.cn/docs/quick_start.html
2017-04-19 09:56:08
3858
转载 SEO介绍
前言最近阅读文献的时候经常看到SEO这个概念，但是作为一个小白的我对于这个概念只是一知半解，在网上看到一篇文章感觉还不错，就收藏到这啦。正文从网站推广到APP推广，再到微信推广运营，网站运营，好多东西都是相通的，比如网站的SEO，APP的ASO优化等等。1.什么是SEO？SEO是英文Search Engine Optimization缩写而来，中文意译为“搜索引擎优化”。它是指自然搜索结果获得网站流
2017-04-18 22:41:36
1558
原创 javascript实现图片上传以及预览（包含相关知识点汇总）
前言前端工作过程中有这么一个基本需求，要求将图片从本地选择上传到服务器，同时在本地进行预览。 这对于我这只小菜鸟来说也是难啊，为了预防写完了就忘，以及知识太过杂乱而不系统，在这里重新整理一下。正文预览代码二话不说，先把成功预览图片的代码贴上来。 在这里我用的是vue，所以图片路径是经过vue数据绑定的。// .html// input file输入框可以设置opacity为0，然后绝对定位覆盖
2017-04-18 14:16:25
2318
原创 微信公众号支付（开发文档）笔记
微信公众号支付第一章 术语公众号支付 公众号支付是用户在微信中打开商户的H5页面，商户在H5页面通过调用微信支付提供的JSAPI接口调起微信支付模块完成支付。 应用场景有：用户在微信公众账号内进入商家公众号，打开某个主页面，完成支付用户的好友在朋友圈、聊天窗口等分享商家页面链接，用户点击链接打开商家页面，完成支付将商户页面转换成二维码，用户扫描二维码后在微信浏览器中打开页面后完成支付商户
2017-04-17 20:48:03
9604
1
原创 Vue的一些API理解整理
全局配置（Vue.config）Vue.config是一个与全局配置有关的对象，可以在启动应用之前修改下列属性。1.silent类型： Boolean 取消Vue所有的日志和警告 Vue.config.silent = false2.optionMergeStrategies类型：Function 自定义合并策略的选项。 合并策略选项分别接受第一个参数作为父实例，第二个参数为子实例，Vue实
2017-04-15 10:28:40
19261
1
转载 ECMAScript6的新特性简述
ECMAScript61.ES6中的默认参数以前我们是这样来定义默认参数的：var link = function(height, color, url) { var height = height || 50 var color = color || 'red' var url = url || 'http://azat.co'}但是这么定义有个问题，因为如果参数的值是0
2017-04-14 14:40:43
760
转载 关于Vuex，官方文档笔记
VuexVuex是什么Vuex是一个专为Vue.js应用程序开发的状态管理模式。什么是状态管理模式new Vue({ // state data () { return { count: 0 } }, // view template: ` <div>{{ count }}</div> `, // actions methods:
2017-04-12 21:39:23
8924
原创 Vue-resource简述
HTTP请求类型及说明Web开发最常见的就是HTTP通信协议，该协议涉及的目的就是确保服务器与客户端之间的正确通信，其中最主要的4种方法如下。1.Http get主要用于向指定的URL请求资源，可以带参数也可以不带参数，带参数时，参数时明文传递，你可以在浏览器的地址栏看到参数及参数值，get安全性不高，所以常用于安全性要求低的场合，比如登陆后请求数据。 2.Http post主要是向指定的URL提
2017-04-11 20:37:24
1324
转载 基于Token的WEB后台认证机制
Token前言问题描述： token什么意思，前端是如何使用token的？初次接触： 最近初次做登录界面的时候，听到了token一词。token大概的意思是，客户端这边输入了账号以及密码后，将信息传送给服务器进行验证，如果验证成功，服务器端将会其他信息伴随着这个token一起传送至客户端。 下文转载至http://www.cnblogs.com/xiekeli/p/5607107.html，侵
2017-04-11 16:37:56
3278
1
原创 项目开发过程中的细节问题及解决方法（Vue，Css）（入门级）
Vue开发填坑方法methods通用问题描述： vue开发过程中很多时候，函数方法methods会在各个组件内共用，每个组件都写个比较多余。 解决方法： 1.利用CommonJS思想，单独写，然后每个组件利用import { function } from ‘../..’导入，直接使用。 2.直接全局注册Vue.protytpe.$myMethod = function(options) {
2017-04-10 16:45:56
4851
原创 Websocket
Websocket是什么Websocket是基于TCP的一种新的协议，相对于HTTP协议来说更为持久，它实现了浏览器与服务器全双工通信。Websocket原理现在很多网站为了实现即时通讯，所用的技术都是轮询。轮询是在特定的时间间隔（比如1秒），由浏览器对服务器发出HTTP请求，然后由服务器返回最新的数据给客户端的浏览器。 这种传统的HTTP请求的模式带来明显的缺点，浏览器需要不断的向服务器发出请求
2017-04-07 15:53:01
488
1
转载 轮询（Ajax）和（long）
ajax轮询ajax轮询的原理非常简单，让浏览器隔个几秒就发送一次请求，询问服务器是否有新信息。场景再现：客户端：啦啦啦，有没有新信息(Request)服务端：没有（Response）客户端：啦啦啦，有没有新信息(Request)服务端：没有。。（Response）客户端：啦啦啦，有没有新信息(Request)服务端：你好烦啊，没有啊。。（Response）客户端：啦啦啦，有没有新消息（Reques
2017-04-07 15:51:57
775
原创 socket.io
简述如何使用1.安装npm install socket.io 2.Node服务器服务器端的app.js var app = require('http').createServer(handler);var io = require('socket.io')(app);var fs = require('fs');app.listen(80);function handler(req, r
2017-04-07 15:50:18
2330
转载 gitignore的配置
.gitignore 配置文件用于配置不需要加入版本管理的文件，配置好该文件可以为我们的版本管理带来很大的便利，以下是个人对于配置 .gitignore 的一些心得。1、配置语法： 以斜杠“/”开头表示目录； 以星号“*”通配多个字符； 以问号“?”通配单个字符 以方括号“[]”包含单个字符的匹配列表； 以叹号“!”表示不忽略(跟踪)匹配到的文件或目录；
2017-03-31 09:28:16
356
原创 fb vue之坑的记录
day 1 1.如果在<style>标签里面混合使用空格与tab，会出现got eos错误。 2.如果组件之间被复用的花，生命周期钩子不会被调用 3.给某元素添加点击事件，给组件添加ref属性，则可以在Javascript中通过this.$refs.name调用这个组件
2017-03-22 20:03:50
827
转载 ES6新特性
JS 开发者必须知道的十个 ES6 新特性英文：Azat Mardan译文：伯乐在线 - 吴鹏煜 链接：http://web.jobbole.com/87140/最近我参加了一个在旧金山举行的HTML5开发者大会，听到的演讲半数都关于ES6（或者官方说法叫ECMAScript2015），我喜欢简洁的成为ES6。这篇
2017-03-18 20:25:08
468
原创 git如何使用
如何在远程数据库上共享本地数据库的修改记录本地数据库上传到远程数据库pushgit add * 添加文件到索引区域 git commit -m “ss” 提交并且注释”ss” git push [主机名] [local-branch-name]:[remote-branch-name] git checkout [branchname] 将head头切换到某分支 git status 查看状
2017-03-18 10:31:53
418
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人