活在当下

《PPT：深入浅出Vue.js - VirtualDOM篇》 链接失效了 @berwin

same error

# 微信扫码功能url参数丢失问题 #技术笔记/日常开发问题总结 前端生成一个二维码如果地址中携带参数，微信第一次访问的时候wx浏览器会丢失参数！ 微信扫码二维码，第一次显示接口没有返回值，在扫一次就好了正常显示了页面。这种诡异的情况，在内测上，测试人员是一脸的懵逼状态。为啥第二次扫就没问题。 ### 排查问题之前的思考🤔 排查问题之前的分析，第一次扫，这个第一次是个特殊情况，第一次我们服务做了什么呢 微信匿名用户： 第一次访问的时候，我们对用户进行了匿名用户处理，去微信服务器获取签名认证[OAuth验证接口 - 企业号开发者接口文档](https://qydev.weixin.qq.com/wiki/index.php?title=OAuth%E9%AA%8C%E8%AF%81%E6%8E%A5%E5%8F%A3) 这里面的关键点在于 redirect 重定向，获取签名后有一个重定向的问题。是不是重定向搞掉了参数？ 然后排查微信签名处的代码， `encodeURIComponent(route.path）` **路由对象属性** * **$route.path** * 类型:string 字符串，对应当前路由的路径，总是解析为绝对路径，如”/foo/bar”。 * **$route.fullPath** * 类型:string 完成解析后的 URL，包含查询参数和 hash...

针对发现的问题通过清晰、明确的责任制度，倒逼团队的每个人在开发阶段主动关注项目的质量，谨慎判断是否可以妥协当前的技术债。

**step 1 生成一个基础框架** > 构建vue组件库，直接可以拿来vue-cli初始化一个项目来做架子，一来方便，二来你可以直接测试你写的组件在项目中能不能run的起来。 执行 ``` vue init webpack projectname ``` 初始化一个项目 **step 2 整理文件结构** > 我们只需要component 用来存放组件 和 pages 可以用来展示组件，其他我们可以先不管，或自行处理 有了写组件的地方，我们就可以开始编写组件了。 **step 3 写一个组件** > src/component/button/button.vue src/component/button/button.scss ```vue...

> 至此 一个组件库开发就完结了。当然过程并没有这么顺利，还是遇到了一些问题。但是都不至于非常棘手，如果你在过程中遇到问题可以在这里提问，有时间我会解答。

**问题 1 nuxt 中使用 ssr 服务端渲染组件的时候发现报错 window or document is not defined** 这个问题排查了很久，思路陷入了怎么写一个服务端渲染的组件。 最后发现是因为打包的过程中，没有抽离css文件，导致js会使用docment动态添加样式 所以打包出来的index.js 有 window 和 document 字段，抽离css样式 就会fix

**问题 2 既然维护的是一个库， 就要有一个规范，包括代码规范，提交规范。** - **代码规范** 代码规范 我们直接依赖```eslint``` 使用 ``` eslint-config-standard ``` 相关规则 - **提交规范** 一个代码的提交日志，是快速定位问题解决问题的关键字，所以提交规范很重要 框架中使用了``` husky ``` 强制在提交之前进行commit message 检查 不符合规范直接fail 并给予提示

**问题 3 CHANGELOG 版本日志是有必要的，好的版本日志依赖于好的提交 所以我们前面强制了提交规范 为版本日志打下了良好的基础** ``` conventional-changelog-cli ``` 版本日志插件 一行命令根据提交记录生成日志

**问题 4 组件预览怎么做？** 组件预览可以自己写一个页面来做，但是重复工作太多，还要自己定义目录结构有些麻烦就找一个了框架来帮我们干活 [storybook](https://storybook.js.org/) 使用起来比较简单 而且支持搜索和自动生成目录结构