vue.js 学习笔记、开发问题汇总 201808
vue.js 学习笔记、开发问题汇总 201808
vue-router.js 无法后退、无法返回
使用 vue router 路由功能的时候，遇到一个神奇的bug，点击浏览器返回，发现无法返回！点击自己页面上的返回按钮也无法后退返回。
后来的后来，才发现是因为 router.beforeEach() 回调函数中，没有调用 next() 函数，直接使用 replace 再次做了导航转向引起的问题。
如果你在 beforeEach 使用 replace() 重新导航，你可能就会遇到了此bug，
把replace导航换成 next('/') 试试就好了。// 或 next({ path: '/' })
这个问题，主要还是自己造成的，next() 是必须调用的，在大量的 if 判断之后，忘记了，导致的问题，之前还以为 vue-router 路由有bug。
参考 vue router 文档
router.beforeEach((to, from, next) => {
// ...
})
确保要调用
next 方法，否则钩子就不会被 resolved。node-sass 安装总报错，FQ就很快就能装好
npm install node-sass
报错信息：
node-sass@4.8.3
Downloading binary from https://github.com/sass/node-sass/releases/download/v4.8.3/win32-x64-64_binding.node
Cannot download "https://github.com/sass/node-sass/releases/download/v4.8.3/win32-x64-64_binding.node":
HTTP error 404 Not Found
在墙内，好像一直不能安装。但是到了墙外好像就完全没问题，可以正常安装。
node-sass@4.9.3 在国内（墙内）也能顺利安装
再后来发现，node-sass@4.9.3 在国内（墙内）也能顺利安装。
4.8安装失败，试试v4.9.3吧。
不FQ的情况下，node-sass@4.9.3我也安装成功了。
node-sass@4.9.3 似乎解决了依赖： node-gyp、python、vcbuild 等错误。试试吧。
我的windows安装是挺顺畅的，安装很快。记得切换 cnpm 的源，下载包更快，npm 的源在国内太慢了。
vue 组件 computed/methods 使用ES6单行 return 返回怎么写？
今天想在 computed 计算属性上实现快速返回，想用 ES6 箭头函数的单行快速return返回功能，发现怎么写都是语法错误。
学艺不精，竟然一时想不通。
后来想通了，才知道是这样写：
正确写法：
isCheckedAll: () => false,
错误写法：
isCheckedAll () => false
注意，如果你在箭头函数使用 this，这个this 不是 vue 示例本身。使用的时候要注意。
我知道单行返回里面的箭头函数的 this 不是 vue 组件示例本身，但是我不需要这个 示例的 this，我只是想实现快速 return 一个其他变量。
模板中的 v-once 是干嘛的？有什么作用？
v-once 用来一次性插值。
什么意思呢？
就是说：你在模板中插入一个值，后面这个值变化了，模板中也不再跟着变化。
有些特殊的场景，你是需要这个 v-once 指令的。
使用了之后，注意！这可能引起bug：你的内容已经变化了，但是模板视图一直不更新！因为，是一次性绑定，后面变化了，视图也不会再跟着变化了！
moment.js 太大怎么办？建议用 dayjs 替换
moment.js 默认情况下，webpack 打包出来，moment js 在 gzip压缩的情况下，也有64kb。
真是太大了。
打包的时候，修改配置，删除全部的 moment locale 语言包，打包出来，gzip 体积还是有16kb。
dayjs 官方说的是 2KB！很厉害的样子。
vue webpack 前端项目优化 2018-8
这是记录一次前端项目优化的大致过程、思路。
以下说的减少的流量，都是 gzip 后的文件体积。
缩减体积的优化
压缩moment.js（减少42kb，60多kb压缩到20多kb）
未登录不加载游戏音乐文件（减少约600kb）
按业务功能分组按需加载（避免一次加载整个站点的资源）
语言包异步加载（减少约155kb）
按需加载部分资源（使用条款、隐私协议）（减少约30kb）
使用 vue-runtime.min.js 版本（减少约14kb）
（很多情况下，我们的vue模板已经在webpack构建层已经编译了，所以前端不需要带 compiler 版本的vue，删除compiler 能减少10kb的体积）
我还发现，vue的多个版本中，使用 vue.runtime 的体积打包出来，比使用 vue.runtime.min.js 打包出来还大了不少，所以选择了 min 版本。好像 esm 版本也不错。
重构
重构注入项目版本、git hash、打包时间
优化产出的文件名，让名称更可读（webpack chunk 自定义名称）
重构网站统计的烂代码
重构烂其他代码vue cli 3
vue-cli 新版的构建工具更新到 v3.0 了。
但是注意：
vue-cli 的 Github 仓库地址没变，但是 npm 包名换了新的，使用了：@vue/cli
vue-cli 的 Github 仓库地址没变，但是 npm 包名换了新的，使用了：@vue/cli
vue-cli 的github项目仍然是：https://github.com/vuejs/vue-cli
但是 npm 包的名称换了：https://www.npmjs.com/package/@vue/cli
旧版 vue-cli v2.0 是：https://www.npmjs.com/package/vue-cli
vue-cli v2.0 安装和使用：
npm install -g @vue/cli
vue create my-project