分类 Vue 下的文章

阅读Vue源码的正确姿势

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源码啦。

最近有一个项目要求SEO，于是摸索了一下vue的ssr方案，顺便总结一下。

先简单说一下ssr(Server-Side Rendering),官方是这样说的：

Vue.js 是构建客户端应用程序的框架。默认情况下，可以在浏览器中输出 Vue 组件，进行生成 DOM 和操作 DOM。然而，也可以将同一个组件渲染为服务器端的 HTML 字符串，将它们直接发送到浏览器，最后将这些静态标记"激活"为客户端上完全可交互的应用程序

其实也就是说把在客户端生成的HTML节点，改成在服务端生成

这样做的好处是，可以加快首屏的渲染（加快内容到达时间），对seo更友好。缺点是开发条件所限，需要更多的服务器端负载等，详情内容请移步官网https://ssr.vuejs.org/zh

本文总结了四种ssr方案，各有利弊

事情是这样的，上次公司内部技术分享会的时候，在vue-router这一块翻车了，就想着搞清楚vue-router内部的实现方式和原理，于是就有了这篇文章

vue-router使用的路由有两种模式

1.hash模式

2.history模式

本文只简单的实现vue-router的hash模式，先看一张图