软件

• Adobe Affect
• Adobe Premiere

AE视频模版网站

• share AE
• [CG]

教程

• AE教程-两米青年

go语言写起来真的好嗨哟！

先看效果

思路步骤

• 用到一个第三方库，github.com/nfnt/resize 用于调整大小。
• 人像图片需要放在相框的后面。
• 大小以相框为准，尤其是宽度，所以第一步就是把人像宽度变为相框宽度，或者小于相框宽度。
• 然后合成，主要用到的方法是draw()。
• 如果你要把go编译打包，部署到linux 你需要执行一下命令！

  1	CGO_ENABLED=0 GOOS=linux GOARCH=amd64 go build test.go

全部源码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67

package main

import (
	"errors"
	"github.com/nfnt/resize"
	"image"
	"image/draw"
	"image/jpeg"
	"image/png"
	"os"
	"strings"
)

func main() {

	index := os.Args[2]
	imgC := os.Args[1]

	///upload/gy/oldpic/5c44b484198c3.jpg
	k := "/opt/server/games-server/upload/gy/k" + index + ".png"
	imgb, _ := os.Open("/opt/server/games-server" + imgC)
	img, _ := jpeg.Decode(imgb)
	defer imgb.Close()

	wmb, _ := os.Open(k)
	watermark, _ := png.Decode(wmb)
	defer wmb.Close()

	offset := image.Pt(0, 0)
	b := watermark.Bounds()
	m := image.NewRGBA(b)
	imgW := b.Size().X
	imgH := b.Size().Y
	wd := 1400 / imgW
	newImg := ImageResize(img, 1400, imgH*wd)

	draw.Draw(m, newImg.Bounds().Add(image.Pt(50, 100)), newImg, image.ZP, draw.Src)
	draw.Draw(m, watermark.Bounds().Add(offset), watermark, image.ZP, draw.Over)
	imgw, _ := os.Create("/opt/server/games-server" + strings.Replace(imgC, "oldpic", "newpic", -1))
	jpeg.Encode(imgw, m, &jpeg.Options{jpeg.DefaultQuality})
	defer imgw.Close()
}

// 图片大小调整
func ImageResize(src image.Image, w, h int) image.Image {
	return resize.Resize(uint(w), uint(h), src, resize.Lanczos3)
}

// 图片裁剪 暂时没有用
func ImageCopy(src image.Image, x, y, w, h int) (image.Image, error) {

	var subImg image.Image

	if rgbImg, ok := src.(*image.YCbCr); ok {
		subImg = rgbImg.SubImage(image.Rect(x, y, x+w, y+h)).(*image.YCbCr) //图片裁剪x0 y0 x1 y1
	} else if rgbImg, ok := src.(*image.RGBA); ok {
		subImg = rgbImg.SubImage(image.Rect(x, y, x+w, y+h)).(*image.RGBA) //图片裁剪x0 y0 x1 y1
	} else if rgbImg, ok := src.(*image.NRGBA); ok {
		subImg = rgbImg.SubImage(image.Rect(x, y, x+w, y+h)).(*image.NRGBA) //图片裁剪x0 y0 x1 y1
	} else {

		return subImg, errors.New("图片解码失败")
	}

	return subImg, nil
}

欢迎访问我的Blog: http://yondu.vip

简介

布兰登·艾克（英语：Brendan Eich，1961年7月4日－）美国程序员与企业家，JavaScript主要创造者与架构师，曾任Mozilla公司的首席技术官，并曾短暂担任首席执行官[2]。

生平

布兰登·艾克生于美国加州的森尼维尔市，在圣塔克拉拉大学（Santa Clara University）就读时，最初主修物理学，大三时因兴趣转变转投计算机科学领域，后获取数学与计算机科学学士学位。
1986年获取伊利诺伊大学香槟分校计算机科学硕士学位。

毕业后进入SGI工作，在此工作七年，主要负责操作系统与网络功能。之后他在MicroUnity工作了三年。
1995年4月，任职于网景期间，为网景浏览器开发出JavaScript，之后成为网页浏览器领域应用最广泛的脚本语言之一。
1998年，艾克协助成立Mozilla.org，2003年在美国在线决定结束网景部门营运后，艾克协助成立了Mozilla基金会。

2014年3月24日，艾克晋升为Mozilla公司首席执行官引发同性恋族群抗议，归咎于艾克2008年曾捐助1000美元支持加利福尼亚州8号提案。此事引发在线交友网站OkCupid抵制使用Firefox浏览器，一些Mozilla员工亦要求辞职。Mozilla董事会成员希望他留在公司中扮演不同的角色。

2014年4月3日，艾克宣布从Mozilla离职。艾克在他的个人博客中写道：“Mozilla的使命远超过我们任何一人，无法胜任Mozilla的领导职位”。美国作家安德鲁·沙利文在谈到艾克的离职时说“没有一丝证据表明他曾经在Mozilla中歧视过一个同性恋者”，而这个情节“应该让那些对包容和多元化社会感兴趣的人感到厌恶”。

2015年5月28日，艾克成立Brave软件公司，这是一家互联网安全公司，已经从天使投资者募集了250万美元的早期资金。该公司的联合创始人Brian Bondy曾在Mozilla和可汗学院工作。

2016年1月20日，该公司发布了Brave网页浏览器。2017年5月，Brendan Eich发起的去中心化网页浏览器“Brave”仅30秒就完成了约3千5百万美元的ICO发售。

https://brave.com/

一：常见模式与工具

学习Java技术体系，设计模式，流行的框架与组件，常见的设计模式，编码必备，Spring5，做应用必不可少的最新框架，MyBatis，玩数据库必不可少的组件……

二：工程化与工具

工欲善其事必先利其器，选择好的工具，提升开发效率和团队协作效率，是必不可少的：Maven，项目管理，Jenkins，持续集成，Sonar，代码质量管理，Git，版本管理

三：分布式架构

高并发，高可用，海量数据，没有分布式的架构知识肯定是玩不转的，要了解分布式中的，分布式架构原理，分布式架构策略，分布式中间件，分布式架构实战等等内容

四：微服务架构

业务越来越复杂，服务分层，微服务架构是架构升级的必由之路。比如：微服务框架，Spring Cloud，Docker与虚拟化，微服务架构

五：性能优化

任何脱离细节的ppt架构师都是耍流氓，向上能运筹帷幄，向下能解决一线性能问题，比如：性能指标体系，JVM调优，Web调优，DB调优

六：底层知识

从架构设计，到应用层调优，再深入了解底层原理，扎实的Java基本功才能让自己变为扫地神僧：内存模型，并发模式，线程模型，锁细节

这个问题让你有必要深刻的看看tabindex="-1"的原理。

由于这个问题实在不好描述，那就直接上图。

问题如下

解决后

那我是怎么解决的呢？先来看看下面的使用代码。

测试代码

你可以在github上看到：https://github.com/lihongbin100/use-react-image-lightbox

主要代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59

import React, { Component } from 'react'
import Lightbox from 'react-image-lightbox'
import 'react-image-lightbox/style.css' // This only needs to be imported once in your app

const images = [
  '//placekitten.com/1500/500',
  '//placekitten.com/4000/3000',
  '//placekitten.com/800/1200',
  '//placekitten.com/1500/1500'
]

export default class LightboxExample extends Component {
  constructor (props) {
    super(props)

    this.state = {
      photoIndex: 0,
      isOpen: false
    }
  }

  render () {
    const { photoIndex, isOpen } = this.state

    return (
      <div>
        <div style={{ height: '100px', width: '400px', background: '#ccc' }}>

        </div>
        <div tabIndex="-1" style={{ height: '1000px', width: '400px', background: '#ddd' }}
             onClick={() => this.setState({ isOpen: true })}>
          Open Lightbox
        </div>

        {isOpen && (
          <Lightbox
            // 该prop解决关闭弹窗后下层元素滑动
            reactModalProps={{ shouldReturnFocusAfterClose: false }}
            mainSrc={images[photoIndex]}
            nextSrc={images[(photoIndex + 1) % images.length]}
            prevSrc={images[(photoIndex + images.length - 1) % images.length]}
            onCloseRequest={() => this.setState({ isOpen: false })}
            onMovePrevRequest={() =>
              this.setState({
                photoIndex: (photoIndex + images.length - 1) % images.length
              })
            }
            onMoveNextRequest={() =>
              this.setState({
                photoIndex: (photoIndex + 1) % images.length
              })
            }
          />
        )}
      </div>
    )
  }
}

解决这个问题

这个问题就是tabindex的坑，由于底部高度为1000px的div，会有滑动条，而且用了tabindex=-1，react-image-lightbox 也使用了tabindex=-1，于是当关闭lightBox以后，会把焦点移到底部的div，底部div被获得焦点，于是浏览器把它置顶了。

这个问题官方也有答案，但是我真的是找了一天啊！怪我。

官方解决

来看看这个问题的答案吧：
https://github.com/frontend-collective/react-image-lightbox/issues/60

总结

使用

1	reactModalProps={{ shouldReturnFocusAfterClose: false }}

完美解决，这个属性是react-modal的props。

欢迎访问我的Blog：http://yondu.vip

怎么快速配置一个好用的WebStorm?

以下是我的配置，好用不好用不知道了，你自己感受。

1. 下载 settings.jar
2. file > import settings 选择优化的jar包。
3. 重启一下吧。

快捷键

• 打开设置：CMD+,
• 格式化代码：alt+cmd+l

如何快速打开一个项目？

1. 菜单栏 tools -> Create Command-line launcher

2. 创建 全局命令行，ws 比较简单。

3. 打开命令行输入 ws app/，app/ 是你打开的项目完整目录，就可以瞬间打开了，一个“爽”！

如何还原设置？

1. 关闭WebStorm
2. cd ~/Library/Preferences/
3. rm -rf WebStorm* 这个*视你的WebStorm版本来定。
4. 搞定，重新启动 WebStorm ，会发现所有的配置全部还原了。

怎样快速按照eslint来设置code style

1. 新建 .eslintrc 文件，右键选择 Apply Eslint Code Style Rules，搞定。
2. 当然你也可以开启WebStorm的Eslint自动化校验支持。
3. Languages & Frameworks > JavaScript > Code Quality Tools > Eslint

整理业界公开的技术学习资源和总结,此文将持续更新。

大神分享

• 从零开始建设服务化的 Web 设计规范 - 八哥分享
• Web重构之道 - 大漠分享

sizeUp 可以让你解放鼠标，使用键盘快捷键来操作窗口，是你提升macbook使用效率的必备神器。

下载

百度网盘：链接: https://pan.baidu.com/s/1IrPytbDDHtlzkJwAB2AsMg 提取码: 4vnv

遇到文件损坏的问题

使用该命令行： 显示”任何来源”选项在控制台中执行 sudo spctl --master-disable

安装

辅助功能这里需要打钩。

设置

最重要的几个设置：

• 不同屏幕之间的发送
• 最大化窗口
• 左右窗口排列

大并发，高可用，高一致性。

数据尽量少（序列化，反序列化）

• 数据库

请求要少

• 合并css和js
• 路径要短（socket链接要少），强依赖的服务要靠近。
• 较少依赖，去掉不必要的弱依赖。
• 不要有单点。（服务无状态化，配置动态化）

Javascript 库

• vue-cropper vue图片裁剪上传插件
• layabox 与白鹭齐名的h5游戏动画库
• Animatron
  HTML5 视频编辑平台。video作为 HTML5 的重要特性，很多开发者却仍然搞不清它的发布形式和加载策略，那么在 Animatron 上你可以快速编辑 HTML5 环境下的视频，利用它的自带动画素材库完成有趣的扁平风格卡通动效组件或者视频
• Google Web Designer
  以视觉设计为核心的代码可扩展工具。用来做布局和设备终端适配测试比较方便，界面很有 AE 的风格
• HYPE3
  专业级本地 HTML5 设计软件。很早以前就向大家推荐过，基于平行时间线逻辑的 HTML5 可视化设计开发平台，你甚至可以用它做一个脱机的交互演示文稿
  Ember Burger Menu
  汉堡式菜单样式生成器。越来越多的站点在自适时采用汉堡式折叠菜单，而这个网站就可以快速更改这种菜单的具体属性，并引用到你自己的项目中去▼
  https://offirgolan.github.io/ember-burger-menu/
• Anime
  CSS/JS 动画分享库。像一个在线小商城，有很多开发者自己上传的千奇百怪的 CSS 或者 JS 动画可以参考和引用
• countUp.js 一个简洁的计数器跳动 js 组件，可以用于在 WEB 完成诸如访问量、分数展示等和数字有关的计数动画
• SmoothState.js 加载优化。对于首页的启动、回跳进行加载动画优化，这对移动端 H5 营销来说尤其重要
• mo.jsCSS 动效库。这是一个正在不断开发完善的 库，虽然目前还未开放路径、弹性等控件，但是它的 CSS 形状库已经非常令人惊喜
• iTyped打字动画。不需要依赖 jQuery 的打字机效果动画，可以调节速度和大小的小巧工具
• animsition.js
• granim.js一个骚气的 js 库。用于快速创建 WEB 内的令人叹为观止的渐变动画
• create.js 一套完整的js动画库，做2d的动画他就足够了，包括 声音加载库：sound.js，预加载库 ：preload.js，canvas动画库：ease.js，补间动画库：tween.js
• greenscok.js 是国外的一套功能强大的动画库，包含大量插件，文档优雅，可视化操作，代码逻辑简洁，支持动画的回放，支持dom动画，svg动画，canvas，webgl，大量的demo库让你惊艳。
  Particles.js— 一个用来在 web 中创建炫酷的浮动粒子的库
• Three.js — 一个用来在 web 中创建 3d 物体和 3d 空间的库
• Fullpage.js— 快速实现全屏滚动特性
• Typed.js — 打字机效果
• Waypoints.js — 滚动到某个元素位置时触发一个功能
• Highlight.js — web 语法高亮
• Chart.js — 使用 JavaScript 创建漂亮的图表
• Instantclick — 能够明显加速网站加载时间，鼠标 hover 时预加载资源
• Chartist — 另一个图表库
• Motio — 一个基于动画和平移的雪碧图库
• Animstion — CSS 实现动画过渡的 jQuery 插件
• Barba.js — 流式页面过渡
• TwentyTwenty — 一个对比图片的可视化 diff 工具
• Vivus.js — 在 SVG 上绘制动画
• Wow.js — 滚动时展现动画
• Scrolline.js — 页面滚动时显示滚动进度
• Velocity.js — 快速流畅的 JavaScript 动画
• Animate on scroll — 漂亮的页面滚动元素动画
• Handlebars.js — Javascript 模板
• jInvertScroll — 视差滚动
  One page scroll — 又一个页面滚动库
  Parallax.js — 对智能设备方向变化做出响应的视差引擎
• Typeahead.js — 搜索补全
• Dragdealer.js — 炫酷拖拽
• Bounce.js — 创建炫酷的 CSS3 动画
• Pagepiling.js — 全屏滚动
• Multiscroll.js — 两列垂直反向滚动
• Favico.js — 动态 favicon
• Midnight.js — 固定头部切换效果
• Anime.js — 动画库
• Keycode — 获取键盘按键的 JavaScript keycode
• Sortable — 拖拽插件
• Flexdatalist — 自动补全
• Slideout.js — 移动应用侧滑导航
  Jquerymy — 使用 jQuery 实现双向数据绑定
• Cleave.js — 实时格式化输入内容
• Page — 客户端单页应用路由
• Selectize.js — 用来添加 tag 的 Hybrid 选择框
• Nice select — 创建漂亮的选择框的 jQuery 库
• Tether — 使用固定定位来创建相关元素
• Shepherd.js — 为应用创建新手引导
• Tooltip — tooltip 提示框
• Select2 — Jquery 选择框插件
• IziToast — 通知弹窗实现
• IziModal — 模态框实现

  CSS 库 / 设计相关

• Animate.css — 动画库
• Flat UI Colors — 扁平化设计配色
• Material design lite— 基于 Google material design 的框架
• Colorrrs — 随机颜色生成器
• Section separators — CSS 实现区域分割
• Topcoat — 框架
• Create ken burns effect — 使用 CSS3 动画实现 Ken burns 特效
• DynCSS — 给 CSS 添加 function，动态化 CSS
• Magic animations — CSS3 实现动画特效
• CSSpin — css spinners 合集
• Feather icons — Icon 集合
• Ion icons — Icon 集合
• Font awesome — Icon 集合
• Font generator — 组合多个字体创建混合字体
• On/Off switch — 使用 CSS 创建 on/off 开关、radio 按钮
• UI Kit — 框架
• Bootstrap — 框架
• Foundation — 框架

  好用的产品

• waitanimate动效速度测试平台。当我们在 WEB 中构建了一些迷你的 PNG 或者 SVG 图标动画时，如何快速确定动画的延时、间隔、速度关系？反复调整和预览着实令工程师头疼。所以这个网站着力解决关键帧百分比的快速计算问题
• cheatsheet — 可以写在中的所有标签
  • Ghost — 基于 Node.js 的博客平台
• What runs — 一个用于网站技术分析的 Chrome 插件
• Learn anything — 一个强大的用于分析某个主题的思维导图

vim

• vim 教程
• spacevim：好用不好学，但是应该下载一个。

sizeUp

简直太好用的MAC桌面管理工具。如何使用?

spotlight

MAC自带的查找神器，当然最应该把他当作切换应用的神器。

网易有道词典

没发现啥别的好用，就这个还可以。

sublime Text

最清凉的text编辑器，还能编辑代码，炸了。但是不推荐大家用这个编码，可视化和编程体验并不好，写点小玩意还可以。

GIPHY

简直太好用的gif图制作器。而且是免费的，直接appstore搜索就可以了。

oh my zsh

你的macbook cmd 不装这个，效率直接降低一半。他还有一堆插件，比如添加alias，兼容Linux命令行，ll也可以用了，当然命令历史记录功能也很好用。就是牛逼！

autojump

配合zsh使用的快递定位到历史记录的目录。用起来就不肯放手。

开发

官方文档

读文档还是读代码

读代码可以知道 What , How & Detail
文档/书可以知道 What , How & Why

工具

• 注释文档生成器：TypeDoc
• TS DOC

语法糖

• 接口
• 类

1. 将图标的Size调到合适大小
2. 关闭Magnification特效（即鼠标放到Dock上图标放大的效果，此效果干扰注意力）
3. 在Position on screen一栏，选择Left
4. 勾选Minimize window into application icon

1. 你是否经常想让某个Word文档占满屏幕的左半部分，旺旺聊天占满屏幕的右半部分，从而一边对着文档一边和小伙伴聊需求？
2. 终于搞好了外接显示器，你是否经常将某个窗口在笔记本和外接显示器屏幕之间直接来回拖动？

安装php

yum安装的版本只有5.1，所以手动安装

1. 百度云下载 php-5.6.16.tar.gz：https://pan.baidu.com/s/1eSxfhXg
2. tar -xzvf php-5.6.16.tar.gz
3. 安装 libxml2 : yum install libxml2-devel
4. 安装 bzip2: yum install bzip2 bzip2-devel
5. 安装 curl: yum -y install curl-devel
6. 安装 libpng :yum install libpng libpng-devel
7. 安装 libmcrypt:yum install libmcrypt libmcrypt-devel
8. 安装 readline: yum -y install readline readline-devel

9. 执行下面的配置

   1

   ./configure --prefix=/usr/local/php --with-config-file-path=/etc --enable-inline-optimization --disable-debug --disable-rpath --enable-shared --enable-opcache --enable-fpm --with-fpm-user=www --with-fpm-group=www --with-mysql=mysqlnd --with-mysqli=mysqlnd --with-pdo-mysql=mysqlnd --with-gettext --enable-mbstring --with-iconv --with-mcrypt --with-mhash --with-openssl --enable-bcmath --enable-soap --enable-pcntl --enable-shmop --enable-sysvmsg --enable-sysvsem --enable-sysvshm --enable-sockets --with-curl --with-zlib --enable-zip --with-bz2 --with-readline --without-sqlite3 --without-pdo-sqlite --with-pear --with-gd

10. 复制php-fpm.conf

    1	cp /opt/lib/php-5.6.28/sapi/fpm/php-fpm.conf /usr/local/php/etc/php-fpm.conf

11. php-fpm 全局启动

    1	cp /usr/local/php/sbin/php-fpm /usr/local/bin/php-fpm

12.启动 php-fpm
13.新建index.php

1
2

<?php
phpinfo();

14.成功

安装nginx

1. yum 安装 yum -y install nginx
2. 删除 /etc/nginx/conf.d下所有文件

3. 配置自己的服务 vim mysite.conf

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38

   server { charset utf-8; client_max_body_size 128M; listen 80; server_name www.wexue.top; root /opt/server/gmfitness-wx; index index.php index.html; access_log /opt/log/access.log; error_log /opt/log/error.log; location / { # Redirect everything that isn't a real file to index.php try_files $uri $uri/ /index.php$is_args$args; } #转发 location /wxnotify { proxy_pass http://XXXXX/index.php?g=Restful&m=Vip&a=wxnotify; } # uncomment to avoid processing of calls to non-existing static files by Yii #location ~ \.(js|css|png|jpg|gif|swf|ico|pdf|mov|fla|zip|rar)$ { # try_files $uri =404; #} #error_page 404 /404.html; location ~ \.php$ { include fastcgi_params; fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name; fastcgi_pass 127.0.0.1:9000; #fastcgi_pass unix:/var/run/php5-fpm.sock; try_files $uri =404; } location ~ /\.(ht|svn|git) { deny all; } }

4. 启动：yum自动安装了nginx的服务，service nginx start

安装mysql

1. yum安装

   1 2	yum -y install mysql-server mysql mysql-devel service mysqld start

2. 开机启动

   1 2	chkconfig mysqld on chkconfig --list | grep mysql

3. 密码设置

   1	mysqladmin -u root password '密码'

4. 设置全网访问mysql -uroot -p

• 输入：use mysql;
• 查询host输入： select user,host from user;
• 创建host（如果有”%”这个host值，则跳过这一步）

• 如果没有”%”这个host值,就执行下面这两句:

  1 2	mysql> update user set host='%' where user='root'; mysql> flush privileges;

• 授权用户

  • 任意主机以用户root和密码pwd连接到mysql服务器
  • 指定IP为（如192.168.1.100）的主机以用户tuser和密码tpwd连接到mysql服务器

    1 2 3 4 5

    mysql> GRANT ALL PRIVILEGES ON *.* TO 'root'@'%' IDENTIFIED BY '密码' WITH GRANT OPTION; mysql> flush privileges; mysql> GRANT ALL PRIVILEGES ON *.* TO 'tuser'@'192.168.1.100' IDENTIFIED BY '密码' WITH GRANT OPTION; mysql> flush privileges;

1. IE不支滑动条在可滑动的状态下自定义宽度和隐藏，
   解决方法是：子div宽度加20px 父级overflow:hidden
   2. stylus遇到filter怎么写：

      1	filter unquote('progid:DXImageTransform.Microsoft.Alpha(Opacity=' + round(n * 100) + ')'

3. IE video元素全屏，不能自定义控制条，解决方案是：
   采用div全屏的方式

   1 2 3 4

   <div>//全屏该div <video></video> <div class="controls"></div> </div>

4. 使用getBoundingClientRect获取元素的位置，top只是距离窗口上部的距离，必须加上scrollTop才是准确的高度

   1 2 3 4

   var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop; var scrollLeft = window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft; this.$refs.sliTip.style.top = e.target.getBoundingClientRect().top + scrollTop - 70 + "px"; this.$refs.sliTip.style.left = e.target.getBoundingClientRect().left + scrollLeft - 65 + "px";

5. ie支持的渐变
   background: linear-gradient(to bottom, #4e2c8d, rgba(78, 44, 141, 0.0))

6. IE 浏览器遇到symbol未定义的错误
   解决方法：
   安装babel-polyfill
   npm install --save-dev babel-polyfill
   页面引入：
   <script src="node_modules/babel-polyfill/dist/polyfill.min.js"></script>

7. vue 中用vue-route 打开一个页面http://ip:port/index/30 在页面中点击一个按钮需要调到http://ip:port/index/40 时，页面不会刷新，不会执行mounted ，可以用下面方法监听$route的变化来解决。

   1 2 3 4

   watch: { // 如果路由有变化，会再次执行fetchdata方法 '$route': 'fetchData' },

8. fixed 浏览器问题

9. 弹出问题

10. settimeout 和 setInterval 独立于vue组件，因此在销毁组件的时候需要cleanTimeout 和 cleanInterVal
    代码示例：

    1 2 3 4 5 6 7 8 9 10

    //将所有settimeout 和 setInterval 分别添加到两个数据中，在组件销毁前clean所有 beforeDestroy: function () { //销毁所有setinterval clearTimeout for (var i = 0; i < this.timeouts.length; i++) { clearTimeout(this.timeouts[i]) } for (var i = 0; i < this.intervals.length; i++) { clearInterval(this.intervals[i]) } },

11. 图片加载失败的时候的缺省图片问题

    1 2 3 4 5 6 7 8

    //jade img(:src="honor.name",@error="errorImgFun") //js 图片加载错误替换该图片 var noImg = require('../../img/index/honor_item_icon.png') errorImgFun(e){ e.target.src = noImg },

有最大最小高度的时候使用：absolute 设置最小宽高

11. vue router 在IE9下无法使用hash的方式跳转
    解决方法
    router-view(:hashbang="true",:history="true")

安装nodejs

安装cnpm

国内npm镜像库，淘宝的cnpm，可以有效的提高下载nodejs包的速度。

npm install -g cnpm --registry=https://registry.npm.taobao.org

安装express

cnpm install express (如果没有权限就加上sudo)
express官网

安装jade

cnpm install jade
jade基本语法和使用方法

安装Express应用生成器

npm install express-generator

新建web项目

express myapp
获得以下目录：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

create : myapp
create : myapp/package.json ：npm依赖包
create : myapp/app.js ：入口文件
create : myapp/public ：静态资源文件
create : myapp/public/javascripts
create : myapp/public/images
create : myapp/routes ：路由
create : myapp/routes/index.js
create : myapp/routes/users.js
create : myapp/public/stylesheets
create : myapp/public/stylesheets/style.css
create : myapp/views ：模板视图文件目录
create : myapp/views/index.jade
create : myapp/views/layout.jade
create : myapp/views/error.jade
create : myapp/bin
create : myapp/bin/www ：服务启动函数

安装第三方js插件包

1
2

cnpm install -g bower
bower install jquery

启动服务器

1
2
3
4
5

启动这个应用（MacOS 或 Linux 平台）：
DEBUG=myapp npm start

Windows 平台使用如下命令：
set DEBUG=myapp & npm start

访问地址：http://localhost:3000/