《你也许不知道的Vuejs》系列文章是本人在过去一年多的时间里，从完全不知道Vuejs到熟练地使用Vuejs开发各种复杂的大型项目，从不同项目开发实践中总结的一些经验和技巧类文章。重点带你一步步熟悉如何使用Vuejs来开发基本的项目，包括周边生态中，一些较热门工具的使用和技巧，同时也会分享当面对较复杂功能需求时候，如何去分析和处理的过程。

你也许不知道的Vuejs - 前言

我们知道，下载文件是一个非常常见的需求，但通常只能通过访问某个文件的 url 来实现下载功能，但是这种用户体验非常不好。幸好，HTML 5 里面为 a 标签添加了一个 [download](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/a) 的属性，来方便我们下载文件。但是最近一个需求，迫使我不得不寻求新的下载方案，于是便有了更新后的此文。

前端js下载文件方案探索

iTerm2 快捷键集锦

Docker 技术在前端开发中的一些实践

Docker 在前端开发中的实践

由于之前本人的博客是部署在国外的一台VPS上的，但是域名是从阿里云购买备案的，然后最近被阿里云无辜断定为 `空壳网站` (仅仅是因为我的域名未指向阿里云服务器o(╯□╰)o)，虽然 [@xuexb](https://xuexb.com) 告诉我说不用管，但是自己内心还是忐忑的，于是就忍痛割爱又买了台阿里云的服务器。由于我的国外VPS上部署了我的太多项目和数据了，虽然大部分项目都在github上，可以通过 `git clone` 来重新部署，但是还有些私人项目，就得自己去拷贝了.....通过搜索，发现了强大的 `rsync` 命令，让人喜出望外。

使用 rsync 命来快速迁移服务器数据

本文结合多个项目重构经验，深入探讨如何有效利用 GitHub Copilot 辅助代码理解、优化、模块化、命名规范改进以及单元测试的辅助生成，为软件工程师和架构师提供一套可操作的借鉴与深度思考。

利用 GitHub Copilot 高效重构项目：实践与思考

最近发现身边的 AI 开发者们都在聊一个叫 MCP 的新协议，有人说它是「AI 时代的 USB-C」，有人甚至用它做出了能自动写代码的 IDE！作为技术圈的吃瓜群众，我决定扒一扒这个神奇的 MCP，看看它到底是如何让 AI 模型和各种数据源、工具无缝联动的。

初探 MCP：给大模型插上 USB-C 接口？

TRAG 架构有效弥合了自然语言与结构化数据之间的鸿沟，使得 LLM 可以更轻松地集成到各类应用程序中，助力现有系统的智能化改造，加速推进业务升级。

TRAG - 基于类型定义的检索增强生成

ChatGPT 是一种基于深度学习的自然语言处理技术，可以理解和生成人类语言。与其他自然语言处理技术不同，ChatGPT可以自我训练和生成大量的文本数据。这使得ChatGPT成为了一个强大的工具，在多个领域都被广泛应用。
如果可以通过与ChatGPT对话的方式，自动提取数据和可视化分析。这将是一件非常 Amazing 的事情！
本文将探讨如何利用 ChatGPT 实现智能数据可视化方案。

ChatGPT助力可视化方案探索

在阅读本文之前，需要读者对 Serverless 概念有一定的了解，如果你还不知道什么是 Serverless，也可以先阅读本系列之前的相关文章。笔者在之前的几篇文章，重点讲解了很多关于如何 Serverless 化传统服务和 Serverless 实战经验，比如如何实现一个后台管理系统。但是在实际开发过程中，我们不仅要考虑如何将自己的服务迁移到 Serverless 架构上，还需要了解 Serverless 架构相对于传统架构的区别，这样才能够在实际工作中，开发出更加高效稳定的服务。本章是笔者在 2 年的 Serverless 研发过程中，总结出来的认为比较重要的几点知识经验，希望对读者有所帮助。

写给 Serverless 开发者的一些建议 - 上篇

为此本篇专门针对 Next.js 的 SSR 方案进行了探索和优化，一步一步带大家了解，如何基于 Serverless 架构部署一个实际的线上业务。

如何优雅的部署一个 Serverless Next.js 应用

Serverless 通常翻译为 “无服务架构”，是一种软件系统设计架构思想和方法，并不是一个开发框架或者工具。他的出现是为了让开发者更加关注业务的开发，而将繁杂的运维和部署交给云厂商。Serverless 由 Faas 和 Baas 组成，Faas 为开发者提供业务运算环境，然后与 Baas 提供的数据和存储服务，进行交互，从而提供与传统服务一致的体验。但是由于 Faas 是无状态的，并且其运行环境是有读写限制的，最重要的是它是基于事件触发的。因此如果传统 Web 服务想迁移到 Serverless 上，是需要进行相关改造和特殊处理的，为此迁移成本是必不可少的。本文将具体帮助大家剖析下，如何 Serverless 化传统的 Web 服务。

如何将 Web 框架迁移到 Serverless

SSR 顾名思义就是 `Server-Side Render`, 即服务端渲染。原理很简单，就是服务端直接渲染出 HTML 字符串模板，浏览器可以直接解析该字符串模版显示页面，因此首屏的内容不再依赖 Javascript 的渲染（CSR - 客户端渲染）。

前端福音：Serverless 和 SSR 的天作之合

相信读完前面几篇有关 Serverless Component 文章的小伙伴已经体验到，它给我们开发带来的遍历。但是实际我们的日常开发项目中，并不仅仅只是单纯地一个项目部署那么简单，我们的敏捷开发流程中，还有开发、联调、测试、预发布、正式环境等关键词。那么有小伙伴就有疑惑了，我的业务开发完了，如何管理不同环境的配置呢？比如测试环境的数据库配置和正式环境的如何切换？于是抛转引入，写了此篇文章，来跟大家一起学习和探讨。

Serverless 多环境配置方案探索

作为一名前端开发者，在选择 Nodejs 后端服务框架时，第一时间会想到 [Egg.js](https://github.com/eggjs/egg/)，不得不说 `Egg.js` 是一个非常优秀的企业级框架，它的高扩展性和丰富的插件，极大的提高了开发效率。开发者只需要关注业务就好，比如要使用 `redis`，引入 [egg-redis](https://github.com/eggjs/egg-redis) 插件，然后简单配置就可以了。正因为如此，第一次接触它，我便喜欢上了它，之后也用它开发过不少应用。有了如此优秀的框架，那么如何将一个 `Egg.js` 的服务迁移到 `Serverless` 架构上呢？

Serverless + Egg.js 后台管理系统实战

虽然之前的文章 [基于 Serverless Component 的全栈解决方案](https://yugasun.com/post/serverless-fullstack-vue-practice.html) 介绍了如何借助 Serverless Component 快速搭建 `Restful API` 后端服务 和 `Vue.js + Parcel` 的前端开发架构，但是最终部署后，腾讯云 COS 的访问URL并非自定义的，而且实际应用中，我们更偏向于使用自定义域名，同时静态文件一般都会通过 CDN 加速。那么如何为之前部署的静态网站配置 CDN 加速域名呢？

基于 Serverless Component 的全栈解决方案 - 续集

上一篇 [基于 Serverless Component 的全栈解决方案](https://yugasun.com/post/serverless-fullstack-vue-practice.html) 介绍 Serverless Component 是什么和如何使用 Serverless Component 开发一个全栈应用。但是目前社区还不够完善，当我们需要一个还没有的组件时，怎么办呢？ 与其向官方提交 `issue`，说明需求，不如自己动手撸一个，岂不快哉~

如何开发自己的第一个 Serverless Component

因为 Serverless Component 是基于无服务框架 （[Serverless Framework](https://github.com/serverless/serverless)）的，所以在阅读这篇实践文章之前，建议先大概了解下 `serverless` 命令的使用，因为下面的案例会使用到。 Serverless Component 的目标是磨平不同云服务平台之间差异，你可以将它看作是可以更轻松地构建应用程序的依赖模块。目前 Serverless Component ，已经形成一个由社区贡献驱动的生态系统，你可以浏览和使用社区的所有组件，快速开发一款自己想要的应用。

基于 Serverless Component 的全栈解决方案

作为一名程序员，日常工作和学习中，我们会接触到各种英文文档和代码，因此英文基础是不可或缺的。但是我们脑海中的英文词汇是有限的，总会碰到一些不认识的单词，因此一个好的翻译软件就显得尤为重要。由于每次点开翻译软件，然后再输入陌生单词，获得答案的操作，总觉得太繁琐，而且大多数时候我们只需要一个简单的翻译就行，并不需要翻译软件列出的一大堆翻译解释。因此，开发一款简单的翻译工具的念头应运而生。

如何基于腾讯云快速开发免费的翻译工具

相信大多数使用 Vue 项目都会面临国际化的问题，而 [vue-i18n](https://github.com/kazupon/vue-i18n) 便是国际化的不二之选，它用起来非常简单，但是同时也会带来一些问题和挑战。本篇是个人在项目上国际化时一些经验的总结，希望能在国际化的道路上帮到你。

你也许不知道的Vuejs - 最佳实践(3)

我们在实际开发过程中，当项目越来越大，组件越来越丰富时，经常会面临一个问题：很多组件会公用一些通用的 `props`、`data` 和 `methods`等声明，但是也会掺杂组件自己的一些私有特有声明，那么我们能不能像类的继承一样，来提炼和继承呢？ 当然这是可以的，这里可以通过两个基本 API [extends](https://cn.vuejs.org/v2/api/#extends) 和 [mixins](https://cn.vuejs.org/v2/api/#mixins) 来实现。这两个API是可以相互替换的，唯一的区别是，`extends` 属性接受的通常是个单一组件对象，而 `mixins` 属性接受的是个组件对象数组。当他们只继承单一组件时，是可以互换的。由于本人开发中，习惯使用 `mixins`，所以本文所有实例均使用 `mixins` 来实现。

你也许不知道的Vuejs - 最佳实践(2)

写这篇文章并不是为前端争论什么，也不想引起 “谁是世界上最好的语言” 此类的的争论（本人也并没有那个资格和能力，如果此文得评论不小心过于激烈，引起大家的不适，我会删文处理），只是想说清楚一些事情，让大家明白，做前端是一件很不容易的事情，也是一件很有创造力的事情。作为一个好的前端，同时掌握 `HTML, CSS, Javascript` 三门语言是必不可少的，而且这每一种都有她独特的魅力所在，是值得使用她的人去尊重和学习的。

朋友，你怕是对前端有什么误解

有了前面文章的铺垫，相信一路看过来的新手的你开发一个中型的 Vuejs 应用已经不在话下，包括 Vuejs 生态核心工具（vue-router，vuex）的使用也不成问题。但是在实际项目开发过程中，我们要做的工作不仅仅是完成我们的业务代码，当一个需求完成后，我们还需要考虑更多后期优化工作，本篇主要讲述代码层面的优化。

你也许不知道的Vuejs - 最佳实践(1)

今天来聊聊 Vue.js 中的状态管理，也许一提到状态管理，大家首先想到的就是 [vuex](https://github.com/vuejs/vuex/)，但是如果你的应用够简单，其实是不需要使用 vuex 的，反而会让你的项目变得繁琐起来。

你也许不知道的Vuejs - 状态管理

对于单页面应用，前端路由是必不可少的，官方也提供了 [vue-router 库](https://github.com/vuejs/vue-router) 供我们方便的实现，但是如果你的应用非常简单，就没有必要引入整个路由库了，可以通过 Vuejs 动态渲染的API来实现。 我们知道组件可以通过 `template` 来指定模板，对于单文件组件，可以通过 `template` 标签指定模板，除此之外，Vue 还提供了我们一种自定义渲染组件的方式，那就是 [渲染函数 render](https://cn.vuejs.org/v2/guide/render-function.html)，具体 `render` 的使用，请阅读官方文档。 接下来我们开始实现我们的前端路由了。

你也许不知道的Vuejs - 自定义路由实现

虽然 Vue.js 已经足够强大了，但是在实际开发中，我们还是需要引入各种模块来实现我们的功能需求，或者给全局的 Vue 对象添加一些全局功能，而 Vue `插件` 就是来帮助我们完成这项工作的。

你也许不知道的Vuejs - 插件开发

有了前面几篇文章的铺垫，我相信我们回过头来再看看用 `vue-cli` 脚手架工具初始化的项目，就很好理解了。本篇将带着大家全面认识下用 `vue-cli` 脚手架工具初始化的项目，并会讲解如何定制化自己的项目模板。

你也许不知道的Vuejs - 定制开发项目模板

Javascript 是一门弱类型语言，所以语法检查变得尤为重要。虽然有很多前端IDE开发工具，可以很好地帮助我们提示在编写时的错误，但是大多数开发者还是使用的像 `Sublime Text`、`Visual Studio Code` 之类的轻量级编辑器，这导致在开发中很容易出现各种错误，比如单词拼写错误，漏掉了括号等。而且每个人的代码编写习惯也不一样，因此有的项目的代码格式千差万别，比如 `缩进空格数`，有的习惯4个，有的习惯2个，这也导致项目维护起来越来越麻烦，遇到错误也很难定位。因此对 `Javascript` 进行语法检查的工具应运而生，目前 [ESLint](https://eslint.org/) 使用最为广泛。这篇将讲解如何将 `ESLint` 集成到我们的项目中。

你也许不知道的Vuejs - 使用ESLint检查代码质量

上一篇中我们已经学会使用 `babel` 将 ES6 转化为 ES5 了，并且展示了一些 ES6 代码，这一篇将重点聊聊 ES6 在 Vuejs 项目中一些部分应用。

你也许不知道的Vuejs - 使用ES6快乐的玩耍

在之前的实例中，我们都是通过 `Vue.component` 或者 `components` 属性的方式来定义组件，这种方式在很多中小规模的项目中还好，但在复杂的项目中，下面这些缺点就非常明显了：

你也许不知道的Vuejs - 单文件组件

组件（Component）绝对是 Vue 最强大的功能之一。它可以扩展HTML元素，封装可复用代码。从较高层面讲，可以理解组件为自定义的HTML元素，Vue 的编译器为它添加了特殊强大的功能。所有的 Vue 组件同时也都是 Vue 的实例，因此可以接受相同的选项对象（除了一些特有的选项）并提供相同的生命周期函数。

你也许不知道的Vuejs - 组件式开发

具体工具的操作界面和如何使用，这里就不展示了。随便用搜索引擎搜索，就是相关介绍。大家可以根据个人喜好，来选择适合你的开发环境。

你也许不知道的Vuejs - 工欲善其事必先利其器

当然，Vue 除了核心功能默认内置的指令外，更强大的是它允许注册自定义指令，这是个让我非常惊喜功能。因为当初在使用 `Angular1.x` 时就特别喜好自定义指令这个功能，没想到 Vue 也借鉴了进来，让我能够灵活对 DOM 进行底层操作，而且它具有非常高的复用性，书写起来也非常简洁。 当然在 Vue 中，代码的复用和抽象的主要形式还是 `组件`，这将在下一节中讲到。

你也许不知道的Vuejs - 强大的指令系统

虽然说是Vuejs实践，但是有些重要的理论还是必不可少的，本文将简单的带你了解 `Vuejs的响应式原理`。 > Vue 最独特的特性之一，是其非侵入性的响应式系统。数据模型仅仅是普通的 Javascript 对象。而当你修改它们时，视图会进行更新。这使得状态管理非常简单直接，不过理解其工作原理同样非常重要，这样你可以回避一些常见的问题。

你也许不知道的Vuejs - 深入浅出响应式系统

一般提到一个框架时，大家都喜欢跟其他框架作对比，以说服读者去使用它，但是这里就不做对比了，是不是很失望？每个人都有每个人的好，何况是由人创造出来的框架呢，单凭 [vuejs](https://github.com/vuejs/vue) 在github上8W+的star，那也值得你去尝试一回，不是吗？ 当然如果你有框架选择恐惧症，那么不妨相信我一回，直接跟着我亲自上手体验吧~

你也许不知道的Vuejs - 花式渲染目标元素

本文主要是通过分析[pinyin-engine](https://github.com/aui/pinyin-engine)源码，一步步基于Javascript实现一个拼音搜索引擎，并修复了大写英文字母搜索BUG和缓存上一次搜索结果BUG。全部源码（包括注释）都发布在Github上：[demo-pinyin-engine](https://github.com/jiandansousuo/demo-pinyin-engine)

简单拼音搜索引擎

有朋友曾经问我，`在AI的热潮中，我们前端能做点什么`，想了想，其实AI是没法离开我们前端的，因为无论AI有多牛，它提供的也是一种智能服务，最终它还是需要以产品的形态提供给用户的面前，只要是用户继续使用WEB，那么肯定是离不开我们前端工程师的。在很久之前，自己就想做一款基于语音识别的聊天AI产品了，但是这需要涉及很多自己不擅长的领域，自己还在摸索学习中，所以本文尝试借助第三方服务来实现。

Web聊天机器人

最近在进行博客升级HTTPS和HTTP2的时候遇到了各种问题，于是卸载了nginx，重新进行了安装，并参考 [@Jerry Qu](https://imququ.com) 博客完整配置的文章 [本博客 Nginx 配置之完整篇](https://imququ.com/post/my-nginx-conf.html)，由于屈大大的博客服务器是Ubuntu的，本人使用的是一台VPS，系统是Centos6.5，所以很多配置参数需要做相应的修改，其中也遇到了不同的问题，并一一解决了，因此本篇在屈大大原文的基础上进行了相关修改。最终博客实现了全站HTTPS，并升级HTTP1.1到HTTP2。

本博客 Nginx 配置完整篇

首先浏览器是多线程的，各个线程在内核控制下同步执行，一个浏览器至少实现三个常驻线程：Javascript引擎线程、界面渲染线程、浏览器事件触发线程。

深入理解和使用 Javascript 中的 setTimeout(fn,0)

Web Audio API可以在一个音频上下文中对音频进行相关处理，它允许音频基于模块化的流程处理。基本音频操作都是基于音频节点来进行的，这些节点被连接在一起，组成一个音频的路由图。它支持带有不同类型的频道层的多个音源，甚至只需要一个音频上下文。它基于模块化的设计，使得你可以动态的创建复杂的音频功能。

基于Web Audio API的音乐可视化

之前一直使用的是通过配置 `CNAME` 的方式将个人域名 `yugasun.com` 隐射到 `yugasun.github.io`，然后设置 `Github` page 服务，来实现hexo创建的静态博客。但是由于国内 `github` 有时不太稳定，而且也不方便做深入的访问统计，所以自己购买了一台 `VPS` 作为服务器，但是又闲每次博客更新需要登录服务器，更新博客，太繁琐，作为一名懒惰的程序员，于是想到用 `Github webhooks` 来实现。

使用 Github 的 webhooks 进行网站自动化部署

Javascript语言的执行环境是“单线程”的，也就是一次只能完成一个任务。如果有多个任务，就必须按照队列顺序来执行。这种模式的好处是 _实现起来简单，执行环境相对单纯_，坏处是 _只要有一个任务耗时很长，就会阻塞整个进程_ ，通常会造成浏览器无响应（假死）。 Javascript语言本身并不慢，慢的是读写外部数据，最常见的是等待一个Ajax请求返回结果，等待的时候，如果服务器无响应，或者网络慢，就会导致脚本长时间等待停滞。

异步编程之 Promise

前端基于 History API 路由的实现原理

前端路由实现 - history篇

前端路由实现 - hash篇

继上一篇 [正则表达式-基础篇](http://www.yugasun.com/2017/04/24/正则表达式-基础篇) 总结了正则表达式常用的一些基础知识点，但是要学好正则表达式，还是要多动手去写，去研究一些常用的正则表达式例子，理解例子之后再自己对例子进行修改实践，举一反三，方能融会贯通。

正则表达式(实践篇)

构造正则表达式的方法和创建数学表达式的方法一样。也就是用多种元字符与运算符可以将小的表达式结合在一起来创建更大的表达式。正则表达式的组件可以是单个的字符、字符集合、字符范围、字符间的选择或者所有这些组件的任意组合.

正则表达式(基础篇)

ES6 的扩展(spread)与剩余(rest)运算

1. 如果你的工作目录的代码做了修改，但又尚未提交，此时你不小心做了 `git pull` 操作拉取远程仓库代码到本地时，往往会提示冲突。 2. 你在分支 `dev` 上完成了功能开发，然后 `checkout master`，`git merge dev`， 此时如果其他人不慎对 `master` 进行了修改，往往也会提示冲突。 遇到以上两个问题，你改如何解决呢？

如何解决Git合并冲突

Javascript 有关数组创建的几种方法介绍

如何用JS创建包含0-99整数的数组

假设你从 [Github](https://github.com) 上克隆下来一份别人的优秀代码，然后自己有做了相应的二次开发，但是你又想同时保持源码，并需要做定期的 `pull` 操作。 并希望能将源码新的 `commit` 合并到自己修改后的源码中。而你二次开发的代码存储在自己的私有仓库 `git.mydomain.com` 中

Git-为不同分支配置不同远程仓库

本文更像是一篇Change Log介绍，不涉及的webpack2使用教程，感兴趣的可以自行谷歌。之所以直接翻译官方文档，因为只有掌握了Webpack2 之于 webpack1的区别和修改，才能更好地进行项目升级。对于具体的项目升级实例，将会在后面的有关Vue项目介绍中提及。

Webpack1 升级 Webpack2 指南

今天在家办公，配置公司项目时，安装 [node-sass](https://github.com/sass/node-sass) 各种不成功，切换node版本删了重新安装也没法解决，通过搜索终于找到了解决办法。

如何解决安装 node-sass 一直失败的问题？

前后端分离大家并不陌生，项目开发中，每当前端拿到后端给我的接口，联调的时候，往往前端代码和后端接口是不同源的，所以跨域是不可避免的。而作为一名优秀的前端工程师，怎么会忍受卑躬屈漆的找后端同学，帮忙在接口请求前多添加一行代码,将 `Access-Control-Allow-Origin` 设置为我们前端想要的呢？

前端开发中接口跨域解决方案探索

我们在日常工作中会遇到公司有个gitlab，还有些自己的一些项目放在github上。这样就导致我们要配置不同的 SSH KEY 对应不同的环境。下面我们来看看具体的操作.

Git配置多个SSH-Key

Git是个了不起但却复杂的源代码管理系统。它能支持复杂的任务，却因此经常被认为太过复杂而不适用于简单的日常工作。让我们诚实一记吧：Git是复杂的，我们不要装作它不是。但我仍然会试图教会你用（我的）基本的Git和远程代码库干活的工作步骤，在15分钟内。

Git 快速上手教程

任何人都应该学习的提问智慧，学会如何提问真的很重要

所有文章

你也许不知道的Vuejs - 前言

前端js下载文件方案探索

iTerm2 快捷键集锦

Docker 在前端开发中的实践

使用 rsync 命来快速迁移服务器数据