1.clone vue源码， 切换到dev分支
https://github.com/vuejs/vue.git
2.安装相关依赖
cd vue & npm i
3.安装 rollup(rollup是一个纯代码打包工具)
npm i -g rollup
4.修改script启动脚本
// vue/package.json
"dev": "rollup -w -c scripts/config.js --sourcemap --environment TARGET:web-full-dev",
5.代码运行 npm run dev然后在vue/examples/commits/index.html中引入vue.js
<script src="../../dist/vue.js"></script>
下面就可以愉快的调试vue源码啦。
前两天，有一个需求，在同一域名下，通过不同的路径去访问完全独立的项目，大概就是这样
// 访问项目一
http://abc.com
//访问项目二
http://abc.com/admin
由于之前对nginx的一些匹配理解不对，花了点时间才搞定，还是要记录一下。
最近有一个项目要求SEO，于是摸索了一下vue的ssr方案，顺便总结一下。
先简单说一下ssr(Server-Side Rendering),官方是这样说的：
Vue.js 是构建客户端应用程序的框架。默认情况下，可以在浏览器中输出 Vue 组件，进行生成 DOM 和操作 DOM。然而，也可以将同一个组件渲染为服务器端的 HTML 字符串，将它们直接发送到浏览器，最后将这些静态标记"激活"为客户端上完全可交互的应用程序
其实也就是说把在客户端生成的HTML节点，改成在服务端生成
这样做的好处是，可以加快首屏的渲染（加快内容到达时间），对seo更友好。缺点是开发条件所限，需要更多的服务器端负载等，详情内容请移步官网https://ssr.vuejs.org/zh
本文总结了四种ssr方案，各有利弊
刚刚在知乎看到一篇分析http/3的文章，发现自己的博客还停留在http/1.1的阶段，起了折腾的心。嗯，http/1.1→http/2
关于http/2
先简单的说一下http/1.1和http/2的区别，http/2主要的是实现了多路复用，也就是说对同一个域的服务器只建立一次TCP连接，加载多个资源，使用二进制帧传输，同时会对http头部进行压缩,还有server push。
相对于http/1.1，http/2只建立一次TCP的链接，当网站资源多的时候，速度的提升越明显。这里有一个demo，可以很直观的看到两者之间加载速度的差别https://http2.akamai.com/demo
关于HTTP2.0的多路复用和HTTP1.X中的长连接复用的区别，借用一张图
事情是这样的，上次公司内部技术分享会的时候，在vue-router这一块翻车了，就想着搞清楚vue-router内部的实现方式和原理，于是就有了这篇文章
vue-router使用的路由有两种模式
1.hash模式
2.history模式
本文只简单的实现vue-router的hash模式，先看一张图
图片出自VueRouter 源码深度解析
昨天一个师弟面试遇到一道题，对于输出的结果不太理解，问我为什么是这样，题目如下
console.log(a);
var a = 1;
console.log(a);
function a() {
console.log(2);
}
console.log(a);
var a = 3;
console.log(a);
function a() {
console.log(4);
}
console.log(a);
上面代码运行输出的结果是
先create一个简单的students表，包含的字段有id,name,sex,age和tel
create table students
(
id int unsigned not null auto_increment primary key,
name char(8) not null,
sex char(4) not null,
age tinyint unsigned not null,
tel char(13) null default "-"
) ENGINE=InnoDB AUTO_INCREMENT=2 DEFAULT CHARSET=utf8;
记得建表的时候把字符集设置为utf8或者gbk,因为这里之前踩过坑，默认latin1,不支持中文，哈哈哈╮(╯﹏╰）╭
表建立好之后，可以通过describe students查看表结构
最近在撸小程序，只在微信里面运行，不用考虑其他浏览器的兼容性，flex布局超级好使，在这里总结一波。
只要在支持flex布局的浏览器下声明display:flex即可，在这个容器下的子元素就会自动成为容器的成员。容器有6个属性，分别是
flex-direction，flex-wrap，flex-flow，justify-content，align-items，align-content
flex-direction属性
flex-direction属性控制子元素的排列方向
flex-direction: row | row-reverse | column | column-reverse;
四个属性值表现如下
row（默认值）：水平方向排列，起点在左端。row-reverse：水平方向排列，起点在右端。column：垂直方向排列，起点在上沿。column-reverse：垂直方向排列，起点在下沿。关键字extends
在ES6下，class的继承可以通过关键字extends实现，比如
class A {
constructor(a) {
console.log(a);
}
}
class B extends A {}
new A("aaa");//aaa
new B("aaa");//aaa
1.上面定义了一个a类，b类使用关键字extends继承了a类所有的属性和方法。b类此时没有定义任何方法，也就是说b类把a类复制了一遍,所以new a("aaa")和new b("aaa")结果完全一样
2.a类的constructor方法就是a的构造函数
3.如果类本身不需要接收参数，那么可以省略构造函数，当省略了构造函数，这个constructor函数会自动添加
js的传统方法是通过构造函数，定义并生成新对象，是一种基于原型的面向对象系统，在ES6中新增了类的概念，可以使用class关键字声明一个类，之后以这个类来实例化对象。
生成实例对象的传统方法
const Obj = function (a, b) {
this.a = a;
this.b = b;
return this;
}
Obj.prototype = {
constructor: Obj,
print: function () {
console.log(this.a + " " + this.b);
}
}
new Obj(1, 2).print();//1 2