blog icon indicating copy to clipboard operation
blog copied to clipboard

🈲黄书伟的个人博客

Results 58 blog issues
Sort by recently updated
recently updated
newest added

### 前言 由于前端相关的技术依赖node版本不一致的问题,我们不得不在一台电脑上安装不同的node版本。这里介绍一款 针对 windows 系统的 node 版本管理工具 [nvm](https://github.com/coreybutler/nvm-windows). ### 安装 在发布版本中找到一个下载即可:https://github.com/coreybutler/nvm-windows/releases 验证 nvm 是否安装完成 ``` nvm version ``` ### 使用 以下常用的命令 1、通过 `nvm install [arch]`去安装你需要的nodejs 版本。如 `nvm install 14.17.0`...

后端

### 前言 为了方便维护以及代码的复用,我们会把组件库、工具库这样可以复用的内容通过npm方式发布出去,但是如果对这些npm包进行调试将非常麻烦,有些问题需要在当前项目环境才能复现。而[ `yarn link`](https://classic.yarnpkg.com/en/docs/cli/link)可以很好的解决这个问题 ### 场景 我们有一个项目A,项目A引用了一个叫做 [vue-easytable](https://github.com/Happy-Coding-Clans/vue-easytable) 的组件库。而在项目A中发现这个组件库存在bug需要调试。 ### yarn link 很简单,我们只需要通过 cmd命令 cd 到 vue-easytable 项目目录,然后执行: ``` yarn link ``` 执行成功会有如下类似提示: ``` yarn link v1.22.0 success Registered...

包管理器

### 前言 按照[上一篇](https://github.com/huangshuwei/blog/issues/54)的配置,如果使用流模式我们会发现一个问题,如果推送服务挂了再恢复,我们的浏览器是无法再收到推送消息的,直到浏览器刷新或者代理服务重启才行。 ### 重试策略 目前没有发现可以通过 grpc-web 代码方式解决上面的问题,在官网发现了[路由重试策略](https://cloudnative.to/envoy/configuration/http/http_filters/router_filter.html#x-envoy-max-retries)的介绍,我们可以通过` retry_on`配置重试的条件,通过`num_retries`配置重试的次数。 修改如下配置: ``` # 省略 route: cluster: greeter_service timeout: 0s retry_policy: #retry_on: connect-failure,refused-stream,unavailable,cancelled,retriable-status-codes retry_on: 5xx num_retries: 10 max_stream_duration: grpc_timeout_header_max: 0s # 省略...

### 前言 有时我们需要将一类包发布到统一的名称作用域下,典型的如 `@vue/cli-plugin-vuex`、`@vue/cli-plugin-router`,它们的名称作用域为 "vue"。接下来会介绍如何利用 npm 创建名称作用域。 ### 创建组织 按照npm官网的 [创建组织步骤](https://docs.npmjs.com/creating-an-organization) 即可。比如我们创建的组织名称为“our-patches”,创建成功后可以通过 https://www.npmjs.com/org/our-patches 查看当前组织下发布的包。 ### 发布名称作用域包 创建项目时,可以通过命令 `npm init --scope=organizationName` 初始化,按照提示完成即可。如: ``` npm init --scope=our-patches ``` 组织默认发布为私有的,可以通过下面命令修改为公共包并发布: ``` npm publish...

包管理器

### 前言 我们在做主题切换时希望统一通过 [css var](https://developer.mozilla.org/zh-CN/docs/Web/CSS/var()) 处理。假设我们希望做白色和黑色两种主题,背景图的切换理想情况我们希望通过以下方式实现。 首先定义2套 css var 样式 ```css // theme-vars.less .theme-white{ --bg-img:url('./bg-img-white.png'); } .theme-black{ --bg-img:url('./bg-img-black.png'); } ``` 组件中我们希望这样使用: ```css .your-comp{ background: var(--bg-img) top no-repeat; } ``` ###...

### 前言 windows环境生成Protobuf消息和客户端服务存根(Generate Protobuf Messages and Client Service Stub On Windows) 示例项目:https://github.com/huangshuwei/vue-grpc-demo ### 配置 protoc > protoc is the main protocol buffer code generator tool. 1、 下载 protoc 。 [下载地址](https://github.com/protocolbuffers/protobuf/releases)...

grpc-web

### 前言 [grpc-web](https://github.com/grpc/grpc-web) 封装了常用的API ,允许我们从浏览器访问 grpc 服务。[envoy](https://github.com/envoyproxy/envoy) 允许我们将浏览器的请求转发到grpc 服务上。截止目前位置,envoy 配置是必须的。 至于为什么要使用 envoy,可以参考[这个issue](https://github.com/grpc/grpc-web/issues/347) 示例项目:https://github.com/huangshuwei/vue-grpc-demo ### 安装docker 容器 [下载并安装 docker](https://www.docker.com/get-started) > 在windows 环境你需要使用docker 安装 envoy ### 安装 envoy 安装好docker 你可以使用 docker 安装...

grpc-web

### 前言 介绍 .proto 协议缓冲文件的基本用途,我们下面以一个helloworld 示例介绍。 示例项目:https://github.com/huangshuwei/vue-grpc-demo ### 什么是 .proto 协议缓冲文件 协议缓冲(Protocol Buffers),官方有很详细的[协议缓冲的介绍](https://developers.google.com/protocol-buffers/docs/overview)。总结下有这些功能点: - Defining A Message Type - Scalar Value Types - Optional And Default Values - Enumerations -...

grpc-web

### 前言 我们在开发H5 页面时,经常会遇到在chrome 模拟器上运行正常,到了真机上偶尔出现问题的情况。这篇文章介绍在windows10 chrome 调试 iOS Safari 页面方案。特此记录 > 原理是利用 `remotedebug-ios-webkit-adapter`插件 ### 准备环境 - nodejs > 8.x - windows10 - chrome(此示例用的84版本) ### 安装 [scoop](https://scoop.sh/) > 利用 scoop 安装插件,后面会涉及到...

### 前言 vue 项目陆续上线了几个,也暴露了不少问题。今天记录的是如何在路由切换的时候,滚动条回到顶部。 ### 分析 首先简单分析下,为什么路由切换会导致滚动条不会自动到顶部。多页应用每次点击菜单导航都会重新刷新整个页面,自然有滚动条时,也会回到顶部。而单页应用不同,每次点击菜单导航都会触发对应的路由局部更新,这样就可能出现了滚动条就无法回到顶部(内容高度不够也不会滚动条)。 ### 路由 hash 模式滚动条回到顶部 路由是通过 hash 方式,没有太好的办法,目前我想到的办法简单粗暴,就是在路由改变的时候去让可能存在滚动条的内容强制回到顶部。 一般是路由改变对应的内容切换的区域会出现滚动条,我们给会出现滚动条的区域设置一个class 样式为`scroll-content`: ```html ``` > 也有可能存在双滚动条,即页面结构是左右结构,左侧的菜单高度没有进行设置,会导致body 存在滚动条,路由改变对应的内容区域也会出现滚动条。这一般是你要优化的,这样页面毕竟不好看。 **方案1**: 我们在 vue 项目的入口文件的路由改变中做处理 ``` watch:{ $route(to, from) {...

vue