使用 hexo next 搭建静态博客

场景

在碎片化学习的时代，没有体系化/总结的知识很快会被彻底遗忘，而博客可以帮助我们记忆平时零碎的知识。有人似乎认为想玩博客就必须要域名/服务器，这里吾辈不得不说明一下，这个认知是错误的。

对于绝大多数网站来说，静态是无法满足复杂的需求的。然而我们只是想要日常写点博客，分享到网络上的话，却是不需要这些，静态博客也便是足够了。

准备

本文假设你是一位开发者并至少对下面打勾的内容有基本了解。

• git：分布式版本控制工具
• gitlab：私有代码托管平台
• Bash/PowerShell/Cmd：命令行操作
• 域名：让别人能记住你的博客
• nodejs：JavaScript 运行环境
• netlify：静态网站托管服务
• VSCode：文本编辑器（类 IDE）

使用 npm 全局安装 hexo

如果你还没有安装 nodejs 的话可以去 nodejs 官网下载页面 进行下载并安装，具体步骤可以参考 在 Windows 上安装 nodejs。

全局安装 hexo 命令行工具

1

npm i hexo -g

安装过程

验证一下

输入 hexo，应该会得到类似下面的响应

初始化 hexo 博客

创建一个空的文件夹作为 hexo 博客目录，在命令行中进入这个文件夹然后执行初始化命令。

1

hexo init

输出

安装完成后文件夹如下

本地运行博客

使用命令运行一个本地的 hexo 博客服务器

1

hexo s

在浏览器打开 http://localhost:4000/ 页面，可以看到 hexo 博客的初始页面

嗯，有点丑，我们可以更换一下主题，本文主要讲解使用 hexo next 主题。

安装 next 主题

1. 克隆并安装主题最新版本

   1	git clone https://github.com/iissnan/hexo-theme-next themes/next

2. 启用主题
   打开根目录下的 _config.yml 文件，找到 theme 字段，将之修改为 next 即可
   

3. 重新打开本地服务器测试一下
   

将代码托管到 gitlab

肯定有人会问，为什么不用 github？
原因很简单：如果你需要使用第三方服务的话肯定需要第三方服务的认证。例如 github 的 token，如果别人想要滥用这个 token 对你的博客做点什么，你却无法阻止，因为 github 托管代码是公开的。

删除掉默认的 landscape 主题和 next 主题的 git 仓库，位置分别是

• themes/landscape/
• themes/next/.git

在本地也初始化一下 git 仓库，然后初始提交全部

1
2
3

git init
git add -A
git commit -a -m "Initial Commit"

所以，在 gitlab 创建一个私有仓库（最好与本地博客文件夹同名）。

创建完成后会得到一个 git 远程仓库的地址

将之设置为本地仓库的远程仓库

1

git remote add origin [这里替换成你的远程仓库地址]

最后，提交一下吧

1

git push origin master

提交完成后回到刚才创建的远程仓库的页面，会看到远程仓库中已经有文件了

托管网站

这里声明一下：之所以不使用 github 作为静态网站托管服务是因为 github 只能托管一个静态网站，老实说这是一件很麻烦的事情。毕竟，一个人并不止一个网站。

具体差别如下：

部署 netlify

1. 首先你需要一个 netlify 的账号，只需要邮箱即可注册。

2. 登录之后进入你的 个人首页
   

3. 由于我们的远程仓库使用的是 GitLab，所以我们连接自己的 GitLab 账户
   

4. 接下来找到我们的远程仓库
   

5. 设定构建命令以及构建目录，没有意外的话 netlify 已经自动识别出这是 hexo 博客了
   

6. 部署站点
   点击部署之后就会帮你自动部署，部署完成后就可以在线访问你的博客啦
   

7. 自定义域名

   如果你还没有自己的域名（本文假定你有），可以直接跳转到步骤 9

   1. 点击 Domain settings 进入域名设置
   2. 点击 Add custom domain 添加自定义的域名
   3. 点击 Verify => Yes, add domain 验证并确认添加
   4. 点击 Check DNS configuration 检查 DNS 配置
   5. 查看其中的 CNAME DNS 记录，一会还要用

   

8. 在你的域名 DNS 记录中添加上面的 CNAME 记录

   1. 打开你的 DNS 管理器，这里以 cloudflare 为例
   2. 添加一条 CNAME 记录，Name 是我们自定义的二级域名前缀 blog-demo，Domain name 是 netlify 为我们自动生成的二级域名 confident-joliot-3c1548.netlify.com。
   3. 等待 DNS 刷新完成

   

   这里吾辈再推荐一次 cloudflare，DNS 刷新时间不会超过 5 分钟，真的是有够快的了！

9. 访问博客
   

修改博客设置

现在博客基本上部署到线上了，然而有很多地方需要配置，如果需要了解更多的功能可以访问 hexo 或 hexo next 主题，下面只说一些最重要的配置。

在 _config.yml 配置文件中

• title：博客标题
• subtitle：博客子标题
• language：博客显示语言
• author：作者

配置效果对照图

写一个新的文章

使用 hexo 命令即可创建新的文章（本质上是一个含有 yml 关于文章简介的 markdown 文件）

1

hexo new "[文章名]"

随便写点什么

最后使用 git 将之提交到 GitLab 远程仓库，netlify 会监听并帮我们自动部署好一切的，再访问网站可以看到新的篇章了（如果内容很多可能要等一段时间）

这个示例 blog 被吾辈部署到 https://hexo-next-blog-demo.rxliuli.com/

总结

最后，吾辈推荐看看下面的内容

• hexo 官网
• next 主题官网
• markdown 语法说明
• VSCode 搭建 markdown 写作环境
• Markdown 图片粘贴工具 PicGo

VSCode 在 markdown 文档中存在表格时不能格式化文档

场景

在使用 markdown 写文档时突然发现格式化功能失效了。这是个很麻烦的问题，吾辈经常要用 VSCode 写 markdown 文档，如果不能进行格式化真是个大麻烦了。

确认是否为插件问题

吾辈有关 Markdown 的插件列表

• Markdown All in One
• markdownlint
• Markdown PDF
• Prettier

不能进行格式化吾辈的第一想法就是 Markdown All in One 插件是不是出问题了，毕竟吾辈写 Markdown 文档这么久了，也是第一次遇到这种问题呢
吾辈尝试禁用了 Markdown All in One 插件后，发现文档确实能够正常格式化了。
然而这并没能解决问题，因为在 VSCode 书写 markdown 文档的话，Markdown All in One 插件的功能是必不可少的（更好的语法高亮，自动完成，生成标题等）。

实际上进行格式化的操作是由 Prettier 完成的，所以吾辈觉得应该是 Markdown All in One 阻碍 了 Prettier 插件的格式化功能。

然而吾辈也明白了一件事：Markdown All in One 和 Prettier 插件居然不兼容！

确认是否是普遍性问题

之后，吾辈想要确认这是否是一个普遍性的问题。测试了几个 markdown 文档后惊奇的发现有些能够正常格式化，有些就不行。
这就很奇怪了，吾辈在逐次删减部分 markdown 内容后终于发现了影响格式化的代码 – 表格。
这可真是太意外了，毕竟表格这种东西，感觉上不应该会影响到插件本身呀

解决

吾辈正要打算去 Markdown All in One 插件 GitHub Issues 提出这个问题时，发现上面已经有人遇到了这个问题了。https://github.com/neilsustc/vscode-markdown/issues/317

开发者回复说明了这样的内容

Thanks for the detailed description. The problem is vscode implicitly only allows one “formatter” per language. Then this extension(‘s formatter) and that of Prettier cannot co-exist.
Related Microsoft/vscode#41882.
Is there an option of Prettier to format GFM table? If it can do this, you can disable this extension’s formatter with markdown.extension.tableFormatter.enabled

大意是在 VSCode 中每种语言的格式化程序默认只能有一种，所以 Markdown All in One 的表格格式化 和 Prettier 的格式化就产生了冲突。然后他给出了解决方案，禁用掉表格格式化。
配置如下

1
2
3
4

{
  // 禁用表格格式化功能
  "markdown.extension.tableFormatter.enabled": false,
}

最后，添加这个配置之后需要重启 VSCode，不然可能不会生效哦

IDEA 创建和运行一个简单的 maven web 项目

场景

本文是为了帮助刚接触 IDEA 的萌新快速了解如何创建与运行一个 Maven Web 项目，但由于 知识的诅咒（#笑），如果有什么不太明白或者发现了什么问题，欢迎在最下方进行留言哦

创建

首先打开 IDEA，进入到了 IDEA 欢迎页，点击 Create New Project

来到项目创建面板

1. 选择 Maven
2. 勾选上 Create from archetype（根据原型创建）
3. 选择 org.apche.maven.archetypes:maven-archetype-webapp 原型

   这里可以输入 webapp，就可以通过 Top/Bottom 键来快速找到原型了

接下来设定一下 Maven 的基本配置

• GroupId：代表该项目的实体或组织。例如 com.rxliuli.example 就是一个组织 id。

  如果你对 maven 没有任何基础，可以直接使用 com.{你的英文名} 作为组织 id

• ArtifactId：实际的工件名称。例如 idea-maven-webapp-example 就指明了该项目就是一个 idea 创建的 maven webapp 案例项目
• Version：该项目的版本号，没什么好说的。

然后是使用的 Maven 程序，IDEA 内置了 Maven，所以如果你不怎么了解 Maven 可以直接 Next 过去

最后一步是创建 IDEA 项目，基本上不需要修改什么，直接 FINISH 即可

配置项目

项目初始配置

创建完成后会提示是否选择自动引入依赖，这里选择 Enable Auto import。当然，另一个要我们去配置 Web 框架的提示就不用管了，IDEA 已经自动完成了这一切。

配置 Tomcat 容器

项目搭建好了，然而我们还需要一个 Web 容器，这里以 Tomcat 作为演示

1. 使用快捷键 CS-A 打开 IDEA 结构化设置搜索
2. 输入 edit config，找到 edit configurations... 项
3. 回车打开 IDEA 运行配置面板
   
4. 添加一个新的 Tomcat 容器运行配置项
   
5. 配置 Application server，点击 CONFIGURETION 按钮
   
6. 选择本地 Tomcat 的目录并确定
   
7. 选择要运行的 war 包
   配置完成会发现下面多了一条警告 Warning:No artifacts marked for deployment，意思是没有 jar/war 包需要被部署，这里我们只要点一下 Fix，并且选择 war exploded，之后 IDEA 会自动完成剩余的事
   

   注：有人觉得每次都要配置 Tomcat 真的挺麻烦的，这里吾辈坚决声明这是误解，只有第一次才需要配置各种环境，后面 IDEA 是能够记住的。

8. 最后，修改一下运行配置的名字，然后点击 OK 按钮
   
9. 在右上角的运行配置里应该已经显示出刚才添加的运行配置项 Tomcat 了，这是点击右边的 Debug 按钮，一切就开始了
   
10. 运行完成后会自动打开浏览器 http://localhost:8080/，显示出这个项目的首页了呢
    

至此，我们已经使用 IDEA 运行起来了一个基本的 Web 项目了呢！

其他

配置项目目录结构

项目的文件菜单树大概长这样，初始只有这么几个文件，稍微解释一下用途

• pom.xml：Maven 的配置文件，所有 Maven 搭建的项目都会有，记录着项目所有的依赖
• web.xml：Web 项目所需要的一个配置文件。主要用来配置 Servlet, Filter, Listene。
• index.jsp：Maven webapp 原型自带的一个初始的 jsp 首页

配置 java/resources 目录

现在，我们已经可以写 jsp 了，那么 Servlet 之类的 java 文件应该写到哪里呢？

1. 在 src/main 新建 java 和 resources 目录
   

2. 点击 File > Project Structure 打开项目结构配置面板（或者使用快捷键 CSA-S）
   

3. 标识目录

   1. 点击 Module 项
   2. 选择需要的项目
   3. 选中 java 文件夹
   4. 点击 Source 使 java 目录变为蓝色
   5. 选中 resources 目录
   6. 点击 Resources 使 resources 目录变为紫色
   7. 完成后点击下方的 OK

   

修改 web.xml 的 servlet 版本为 3.1

其实就是把 web.xml 的内容修改为下面这样

1
2
3
4
5
6
7

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"
         version="3.1">

</web-app>

添加 servlet/jsp 依赖

虽然 tomcat 本身就有 servlet/jsp 的实现，但那是在项目运行时才会有的，而我们需要在代码中使用 Servlet 的类时，则需要添加对应的依赖。

找到 pom.xml maven 配置文件，在 dependencies 中添加 javax.servlet 和 javax.servlet.jsp 两项依赖

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<?xml version="1.0" encoding="UTF-8"?>

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
  <!-- 其他内容 -->
  <dependencies>
    <dependency>
      <groupId>javax.servlet</groupId>
      <artifactId>javax.servlet-api</artifactId>
      <version>3.1.0</version>
    </dependency>
    <dependency>
      <groupId>javax.servlet.jsp</groupId>
      <artifactId>javax.servlet.jsp-api</artifactId>
      <version>2.3.1</version>
    </dependency>
    <!-- 其他依赖 -->
  </dependencies>
  <!-- 其他内容 -->
</project>

创建 Servlet

接下来，我们的 Java 源码就全部放到 /src/main/java 下即可

新建一个简单的 Servlet 类 HomeServlet (path: com.rxliuli.example.ideamavenwebappexample.HomeServlet)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

package com.rxliuli.example.ideamavenwebappexample;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;

/**
 * @author rxliuli
 */
@WebServlet(name = "HomeServlet", urlPatterns = "/home")
public class HomeServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        doPost(req, resp);
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        resp.setCharacterEncoding("utf-8");
        resp.setContentType("text/html;charset=utf-8");
        final PrintWriter out = resp.getWriter();
        out.println("这里是首页哦");
    }
}

最后，再次点击 Debug 按钮重新运行项目，在浏览器中访问 http://localhost:8080/home，可以看到我们的 Servlet 已经生效了呢

总结

• 这个演示项目吾辈也放到了 GitHub 上，如果需要可以随便下载
• 如果你还不了解 maven 的话强烈建议稍微了解一下 maven 的基本概念。可以参照吾辈 blog 上的教程 Windows 上 Maven 安装与使用 进行安装
• 如果你还不了解 IDEA（废话，这不是当然的嘛！#打），推荐阅读 IntelliJ IDEA 简体中文专题教程 进行入门

那么，这篇教程到这里便结束啦，希望我们都能愉快地使用 IDEA 呢 o(〃＾ ▽ ＾〃)o

VSCode Markdown All in One 插件不能使用 TOC 命令创建文章目录

场景

使用 VSCode 写 Markdown 文档时，突然发现 VSCode 输入 toc 找不到生成文章目录的命令了。。。

然而输入 markdown 时发现仍然有创建文章目录的选项，说明这个功能还存在

那么，到底是为什么输入 toc 没有匹配到创建文章目录的命令了呢？

原因

吾辈突然发现一个奇怪的地方，是的，明明是英文状态下，Markdown All in One 插件的命令却是中文的，这是什么原因呢？

于是吾辈在 Markdown All in One 插件的 GitHub 仓库上提出了这个问题。
I can’t use the command to generate the title of the article, I don’t know what happened. . .
作者说有类似的问题
中文系统下，无法通过键入 TOC 命令快速创建目录。

Issues 中说是显示语言需要改成 en，然而吾辈并没有修改过 VSCode 的显示语言，所以这个解决方案对吾辈没有生效。。。

解决

不过因此吾辈想到了另一种可能，吾辈之前是安装了 Chinese (Simplified) Language Pack for Visual Studio Code 插件，以让 VSCode 显示中文，后来因为一些原因放弃中文而使用原生 VSCode 了。所以就想会不会是这个原因，于是吾辈尝试重新安装中文语言插件。

结果，233333，真的是这个原因呢！

这里吾辈的语言仍然为 en，仅仅只是安装了中文语言插件，命令由 创建目录 变成了 Create Table of Contents，插件是在中文系统下默认显示中文命令，在安装完中文语言插件后就变成了全英文（此时 VSCode 语言仍然设置为 en）。

应该是插件本身的问题，吾辈已经提交了 Issues，等待开发者回复。。。

VSCode 搭建 markdown 写作环境

吾辈发布了一个 VSCode Markdown 扩展包插件，可以直接安装 Markdown Extension Pack 以获得开箱即用的 Markdown 插件。

场景

Markdown 是一种轻量级的标记语言（Wiki），目前已经是很流行的写作语言了。因为 Markdown 真的非常简单，易读易写是 Markdown 的目标。然而，虽然 Markdown 已经足够简单了，但我们还是希望能有一个专门的写作环境，用于实现诸如 语法高亮，快捷键，即时预览，导出其他格式 等功能。
而如果你和吾辈一样是个 Developer，那么 VSCode 应该是最好的选择，不仅能拥有完善的 Markdown 写作环境，同时 VSCode 的庞大生态任你使用！

没有学习过 Markdown 的话可以去 markdown 语法说明 这里看看，15 分钟内应该就能基本了解了哦

安装

如果你已经安装并熟悉 VSCode 则可以直接跳过这一步。

首先我们去到 官网 的 下载页面。这里吾辈推荐免安装的 .zip 包，因为它是真正开箱即用的！

将文件解压到一个文件夹中，解压后的目录基本是这个样子

点击其中的 Code.exe 运行 VSCode。

安装插件

• Markdown All in One：Markdown 语言支持，
  提供比 VSCode 原生更加强大的语法高亮，以及非常好用的格式化功能
• markdownlint：Markdown 写作规范，
  没有规范是不行的，即便是 Markdown 如此简单的标记语言亦是如此。它能够提示我们写 Markdown 时的最佳实践
• Prettier：自动修复，
  markdown 文档中经常有一些不好的格式错误，上面的 markdownlint 插件提示完自然要有自动修复啦
• Markdown PDF：Markdown 导出 PDF，
  写 Markdown 文档固然很方便，然而给别人看（尤其是不会 Markdown 的人）的时候却是不太友好，还是转换为 PDF 这种通用文档更好一点呢

配置

1
2
3
4
5
6
7
8
9

{
  "markdown-pdf.executablePath": "C://Program Files (x86)//Google//Chrome//Application//chrome.exe",
  // markdown toc 设置兼容 github
  "markdown.extension.toc.githubCompatibility": true,
  // 保存时不要自动更新目录
  "markdown.extension.toc.updateOnSave": false,
  // 禁用表格格式化功能
  "markdown.extension.tableFormatter.enabled": false,
}

使用图片

众所周知，Markdown 显示图片一直是个不大不小的麻烦。但因为 VSCode 丰富的生态，所以我们可以使用插件来弥补这一缺陷。

• PicGo：图片上传

这个插件是开箱即用的，只要安装完成后就可以直接上传图片了，不需要任何配置。

常用操作只有三个：

• 截图上传 Ctrl-Alt-U
  
• 文件管理器选择上传 Ctrl-Alt-E
  
• 输入文件路径上传 Ctrl-Alt-O
  

PicGo 默认使用 smms 图床，如果你不想使用这个图床，则可以配置 GitHub 或者其他的图床，具体参考 官方文档。

效果

最后，配置完成的 VSCode 编辑器编辑 Mardkown 的效果图如下

那么，接下来，便使用 VSCode 愉快的写作吧 ヾ（＠＾ ▽ ＾＠）ノ

markdown 语法说明

已经有更好、更全面的介绍了，此页面将没有太多参考的价值。
参考：markdown guide, 中文翻译

• markdown 语法说明
  • 概述
    • 宗旨
    • 兼容 HTML
    • 特殊字符自动转换
  • 区块元素
    • 段落和换行
    • 标题
    • 区块引用 Blockquotes
    • 列表
    • 代码区块
    • 分隔线
  • 区段元素
    • 链接
    • 强调
    • 删除
    • 代码
    • 图片
  • 其它
    • 自动链接
    • 反斜杠
  • 扩展语法
    • 使用 \ 换行
    • 语言特定代码块
    • 表格
    • 文章目录
    • 任务列表
  • Markdown 免费编辑器

概述

本文引用自 https://www.appinn.com/markdown/，吾辈添加/修复了一些内容。
本文同步部署到为了网站 https://md-syntax.rxliuli.com/，如有需要可以收藏（#笑）。

宗旨

Markdown 的目标是实现「易读易写」。

可读性，无论如何，都是最重要的。一份使用 Markdown 格式撰写的文件应该可以直接以纯文本发布，并且看起来不会像是由许多标签或是格式指令所构成。Markdown 语法受到一些既有 text-to-HTML 格式的影响，包括 Setext、atx、Textile、reStructuredText、Grutatext 和 EtText，而最大灵感来源其实是纯文本电子邮件的格式。

总之， Markdown 的语法全由一些符号所组成，这些符号经过精挑细选，其作用一目了然。比如：在文字两旁加上星号，看起来就像强调。Markdown 的列表看起来，嗯，就是列表。Markdown 的区块引用看起来就真的像是引用一段文字，就像你曾在电子邮件中见过的那样。

兼容 HTML

Markdown 语法的目标是：成为一种适用于网络的书写语言。

Markdown 不是想要取代 HTML，甚至也没有要和它相近，它的语法种类很少，只对应 HTML 标记的一小部分。Markdown 的构想不是要使得 HTML 文档更容易书写。在我看来， HTML 已经很容易写了。Markdown 的理念是，能让文档更容易读、写和随意改。HTML 是一种发布的格式，Markdown 是一种书写的格式。就这样，Markdown 的格式语法只涵盖纯文本可以涵盖的范围。

不在 Markdown 涵盖范围之内的标签，都可以直接在文档里面用 HTML 撰写。不需要额外标注这是 HTML 或是 Markdown；只要直接加标签就可以了。

要制约的只有一些 HTML 区块元素――比如 <div>、<table>、<pre>、<p> 等标签，必须在前后加上空行与其它内容区隔开，还要求它们的开始标签与结尾标签不能用制表符或空格来缩进。Markdown 的生成器有足够智能，不会在 HTML 区块标签外加上不必要的 <p> 标签。

例子如下，在 Markdown 文件里加上一段 HTML 表格：

这是一个普通段落。

<table>
  <tr>
    <td>Foo</td>
  </tr>
</table>

这是另一个普通段落。

请注意，在 HTML 区块标签间的 Markdown 格式语法将不会被处理。比如，你在 HTML 区块内使用 Markdown 样式的*强调*会没有效果。

HTML 的区段（行内）标签如 <span>、<cite>、<del> 可以在 Markdown 的段落、列表或是标题里随意使用。依照个人习惯，甚至可以不用 Markdown 格式，而直接采用 HTML 标签来格式化。举例说明：如果比较喜欢 HTML 的 <a> 或 <img> 标签，可以直接使用这些标签，而不用 Markdown 提供的链接或是图像标签语法。

和处在 HTML 区块标签间不同，Markdown 语法在 HTML 区段标签间是有效的。

特殊字符自动转换

在 HTML 文件中，有两个字符需要特殊处理： < 和 & 。 < 符号用于起始标签，& 符号则用于标记 HTML 实体，如果你只是想要显示这些字符的原型，你必须要使用实体的形式，像是 < 和 &。

& 字符尤其让网络文档编写者受折磨，如果你要打「AT&T」 ，你必须要写成「AT&T」。而网址中的 & 字符也要转换。比如你要链接到：

http://images.google.com/images?num=30&q=larry+bird

你必须要把网址转换写为：

http://images.google.com/images?num=30&q=larry+bird

才能放到链接标签的 href 属性里。不用说也知道这很容易忽略，这也可能是 HTML 标准检验所检查到的错误中，数量最多的。

Markdown 让你可以自然地书写字符，需要转换的由它来处理好了。如果你使用的 & 字符是 HTML 字符实体的一部分，它会保留原状，否则它会被转换成 &amp;。

所以你如果要在文档中插入一个版权符号 ©，你可以这样写：

©

Markdown 会保留它不动。而若你写：

AT&T

Markdown 就会将它转为：

AT&T

类似的状况也会发生在 < 符号上，因为 Markdown 允许 兼容 HTML ，如果你是把 < 符号作为 HTML 标签的定界符使用，那 Markdown 也不会对它做任何转换，但是如果你写：

4 < 5

Markdown 将会把它转换为：

4 < 5

不过需要注意的是，code 范围内，不论是行内还是区块， < 和 & 两个符号都一定会被转换成 HTML 实体，这项特性让你可以很容易地用 Markdown 写 HTML code （和 HTML 相对而言， HTML 语法中，你要把所有的 < 和 & 都转换为 HTML 实体，才能在 HTML 文件里面写出 HTML code。）

区块元素

段落和换行

一个 Markdown 段落是由一个或多个连续的文本行组成，它的前后要有一个以上的空行（空行的定义是显示上看起来像是空的，便会被视为空行。比方说，若某一行只包含空格和制表符，则该行也会被视为空行）。普通段落不该用空格或制表符来缩进。

「由一个或多个连续的文本行组成」这句话其实暗示了 Markdown 允许段落内的强迫换行（插入换行符），这个特性和其他大部分的 text-to-HTML 格式不一样（包括 Movable Type 的「Convert Line Breaks」选项），其它的格式会把每个换行符都转成 <br /> 标签。

如果你确实想要依赖 Markdown 来插入 <br /> 标签的话，在插入处先按入两个以上的空格然后回车。

的确，需要多费点事（多加空格）来产生 <br /> ，但是简单地「每个换行都转换为 <br />」的方法在 Markdown 中并不适合， Markdown 中 email 式的 区块引用 和多段落的 列表 在使用换行来排版的时候，不但更好用，还更方便阅读。

标题

Markdown 支持两种标题的语法，类 Setext 和类 atx 形式。

类 Setext 形式是用底线的形式，利用 = （最高阶标题）和 - （第二阶标题），例如：

This is an H1
=============

This is an H2
-------------

任何数量的 = 和 - 都可以有效果。

类 Atx 形式则是在行首插入 1 到 6 个 # ，对应到标题 1 到 6 阶，例如：

# 这是 H1

## 这是 H2

###### 这是 H6

你可以选择性地「闭合」类 atx 样式的标题，这纯粹只是美观用的，若是觉得这样看起来比较舒适，你就可以在行尾加上 #，而行尾的 # 数量也不用和开头一样（行首的井字符数量决定标题的阶数）：

# 这是 H1 #

## 这是 H2 ##

### 这是 H3 ######

区块引用 Blockquotes

Markdown 标记区块引用是使用类似 email 中用 > 的引用方式。如果你还熟悉在 email 信件中的引言部分，你就知道怎么在 Markdown 文件中建立一个区块引用，那会看起来像是你自己先断好行，然后在每行的最前面加上 > ：

> This is a blockquote with two paragraphs. Lorem ipsum dolor sit amet,
> consectetuer adipiscing elit. Aliquam hendrerit mi posuere lectus.
> Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus.
>
> Donec sit amet nisl. Aliquam semper ipsum sit amet velit. Suspendisse
> id sem consectetuer libero luctus adipiscing.

Markdown 也允许你偷懒只在整个段落的第一行最前面加上 > ：

> This is a blockquote with two paragraphs. Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. Aliquam hendrerit mi posuere lectus.
Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus.

> Donec sit amet nisl. Aliquam semper ipsum sit amet velit. Suspendisse
id sem consectetuer libero luctus adipiscing.

区块引用可以嵌套（例如：引用内的引用），只要根据层次加上不同数量的 > ：

> This is the first level of quoting.
>
> > This is nested blockquote.
>
> Back to the first level.

引用的区块内也可以使用其他的 Markdown 语法，包括标题、列表、代码区块等：

> ## 这是一个标题。
>
> 1.   这是第一行列表项。
> 2.   这是第二行列表项。
>
> 给出一些例子代码：
>
>     return shell_exec("echo $input | $markdown_script");

任何像样的文本编辑器都能轻松地建立 email 型的引用。例如在 BBEdit 中，你可以选取文字后然后从选单中选择增加引用阶层。

列表

Markdown 支持有序列表和无序列表。

无序列表使用星号、加号或是减号作为列表标记：

*   Red
*   Green
*   Blue

等同于：

+   Red
+   Green
+   Blue

也等同于：

-   Red
-   Green
-   Blue

有序列表则使用数字接着一个英文句点：

1.  Bird
2.  McHale
3.  Parish

很重要的一点是，你在列表标记上使用的数字并不会影响输出的 HTML 结果，上面的列表所产生的 HTML 标记为：

<ol>
<li>Bird</li>
<li>McHale</li>
<li>Parish</li>
</ol>

如果你的列表标记写成：

1.  Bird
1.  McHale
1.  Parish

或甚至是：

3. Bird
1. McHale
8. Parish

你都会得到完全相同的 HTML 输出。重点在于，你可以让 Markdown 文件的列表数字和输出的结果相同，或是你懒一点，你可以完全不用在意数字的正确性。

如果你使用懒惰的写法，建议第一个项目最好还是从 1. 开始，因为 Markdown 未来可能会支持有序列表的 start 属性。

列表项目标记通常是放在最左边，但是其实也可以缩进，最多 3 个空格，项目标记后面则一定要接着至少一个空格或制表符。

要让列表看起来更漂亮，你可以把内容用固定的缩进整理好：

*   Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    Aliquam hendrerit mi posuere lectus. Vestibulum enim wisi,
    viverra nec, fringilla in, laoreet vitae, risus.
*   Donec sit amet nisl. Aliquam semper ipsum sit amet velit.
    Suspendisse id sem consectetuer libero luctus adipiscing.

但是如果你懒，那也行：

*   Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Aliquam hendrerit mi posuere lectus. Vestibulum enim wisi,
viverra nec, fringilla in, laoreet vitae, risus.
*   Donec sit amet nisl. Aliquam semper ipsum sit amet velit.
Suspendisse id sem consectetuer libero luctus adipiscing.

如果列表项目间用空行分开，在输出 HTML 时 Markdown 就会将项目内容用 <p>
标签包起来，举例来说：

*   Bird
*   Magic

会被转换为：

<ul>
<li>Bird</li>
<li>Magic</li>
</ul>

但是这个：

*   Bird

*   Magic

会被转换为：

<ul>
<li><p>Bird</p></li>
<li><p>Magic</p></li>
</ul>

列表项目可以包含多个段落，每个项目下的段落都必须缩进 4 个空格或是 1 个制表符：

1.  This is a list item with two paragraphs. Lorem ipsum dolor
    sit amet, consectetuer adipiscing elit. Aliquam hendrerit
    mi posuere lectus.

    Vestibulum enim wisi, viverra nec, fringilla in, laoreet
    vitae, risus. Donec sit amet nisl. Aliquam semper ipsum
    sit amet velit.

2.  Suspendisse id sem consectetuer libero luctus adipiscing.

如果你每行都有缩进，看起来会看好很多，当然，再次地，如果你很懒惰，Markdown 也允许：

*   This is a list item with two paragraphs.

    This is the second paragraph in the list item. You're
only required to indent the first line. Lorem ipsum dolor
sit amet, consectetuer adipiscing elit.

*   Another item in the same list.

如果要在列表项目内放进引用，那 > 就需要缩进：

*   A list item with a blockquote:

    > This is a blockquote
    > inside a list item.

如果要放代码区块的话，该区块就需要缩进两次，也就是 8 个空格或是 2 个制表符：

*   一列表项包含一个列表区块：

        <代码写在这>

当然，项目列表很可能会不小心产生，像是下面这样的写法：

1986. What a great season.

换句话说，也就是在行首出现数字-句点-空白，要避免这样的状况，你可以在句点前面加上反斜杠。

1986\. What a great season.

代码区块

和程序相关的写作或是标签语言原始码通常会有已经排版好的代码区块，通常这些区块我们并不希望它以一般段落文件的方式去排版，而是照原来的样子显示，Markdown 会用 <pre> 和 <code> 标签来把代码区块包起来。

要在 Markdown 中建立代码区块很简单，只要简单地缩进 4 个空格或是 1 个制表符就可以，例如，下面的输入：

这是一个普通段落：

    这是一个代码区块。

Markdown 会转换成：

<p>这是一个普通段落：</p>

<pre><code>这是一个代码区块。
</code></pre>

这个每行一阶的缩进（4 个空格或是 1 个制表符），都会被移除，例如：

Here is an example of AppleScript:

    tell application "Foo"
        beep
    end tell

会被转换为：

<p>Here is an example of AppleScript:</p>

<pre><code>tell application "Foo"
    beep
end tell
</code></pre>

一个代码区块会一直持续到没有缩进的那一行（或是文件结尾）。

在代码区块里面， & 、 < 和 > 会自动转成 HTML 实体，这样的方式让你非常容易使用 Markdown 插入范例用的 HTML 原始码，只需要复制贴上，再加上缩进就可以了，剩下的 Markdown 都会帮你处理，例如：

    <div class="footer">
        &copy; 2004 Foo Corporation
    </div>

会被转换为：

<pre><code>&lt;div class="footer"&gt;
    &amp;copy; 2004 Foo Corporation
&lt;/div&gt;
</code></pre>

代码区块中，一般的 Markdown 语法不会被转换，像是星号便只是星号，这表示你可以很容易地以 Markdown 语法撰写 Markdown 语法相关的文件。

分隔线

你可以在一行中用三个以上的星号、减号、底线来建立一个分隔线，行内不能有其他东西。你也可以在星号或是减号中间插入空格。下面每种写法都可以建立分隔线：

* * *

***

*****

- - -

---------------------------------------

区段元素

链接

Markdown 支持两种形式的链接语法： 行内式和参考式两种形式。

不管是哪一种，链接文字都是用 [方括号] 来标记。

要建立一个行内式的链接，只要在方块括号后面紧接着圆括号并插入网址链接即可，如果你还想要加上链接的 title 文字，只要在网址后面，用双引号把 title 文字包起来即可，例如：

This is [an example](http://example.com/ "Title") inline link.

[This link](http://example.net/) has no title attribute.

会产生：

<p>This is <a href="http://example.com/" title="Title">
an example</a> inline link.</p>

<p><a href="http://example.net/">This link</a> has no
title attribute.</p>

如果你是要链接到同样主机的资源，你可以使用相对路径：

See my [About](/about/) page for details.

参考式的链接是在链接文字的括号后面再接上另一个方括号，而在第二个方括号里面要填入用以辨识链接的标记：

This is [an example][id] reference-style link.

你也可以选择性地在两个方括号中间加上一个空格：

This is [an example] [id] reference-style link.

接着，在文件的任意处，你可以把这个标记的链接内容定义出来：

[id]: http://example.com/  "Optional Title Here"

链接内容定义的形式为：

• 方括号（前面可以选择性地加上至多三个空格来缩进），里面输入链接文字
• 接着一个冒号
• 接着一个以上的空格或制表符
• 接着链接的网址
• 选择性地接着 title 内容，可以用单引号、双引号或是括弧包着

下面这三种链接的定义都是相同：

[foo]: http://example.com/  "Optional Title Here"
[foo]: http://example.com/  'Optional Title Here'
[foo]: http://example.com/  (Optional Title Here)

请注意：有一个已知的问题是 Markdown.pl 1.0.1 会忽略单引号包起来的链接 title。

链接网址也可以用尖括号包起来：

[id]: <http://example.com/>  "Optional Title Here"

你也可以把 title 属性放到下一行，也可以加一些缩进，若网址太长的话，这样会比较好看：

[id]: http://example.com/longish/path/to/resource/here
    "Optional Title Here"

网址定义只有在产生链接的时候用到，并不会直接出现在文件之中。

链接辨别标签可以有字母、数字、空白和标点符号，但是并不区分大小写，因此下面两个链接是一样的：

[link text][a]
[link text][A]

隐式链接标记功能让你可以省略指定链接标记，这种情形下，链接标记会视为等同于链接文字，要用隐式链接标记只要在链接文字后面加上一个空的方括号，如果你要让 “Google” 链接到 google.com，你可以简化成：

[Google][]

然后定义链接内容：

[Google]: http://google.com/

由于链接文字可能包含空白，所以这种简化型的标记内也许包含多个单词：

Visit [Daring Fireball][] for more information.

然后接着定义链接：

[Daring Fireball]: http://daringfireball.net/

链接的定义可以放在文件中的任何一个地方，我比较偏好直接放在链接出现段落的后面，你也可以把它放在文件最后面，就像是注解一样。

下面是一个参考式链接的范例：

I get 10 times more traffic from [Google] [1] than from
[Yahoo] [2] or [MSN] [3].

  [1]: http://google.com/        "Google"
  [2]: http://search.yahoo.com/  "Yahoo Search"
  [3]: http://search.msn.com/    "MSN Search"

如果改成用链接名称的方式写：

I get 10 times more traffic from [Google][] than from
[Yahoo][] or [MSN][].

  [google]: http://google.com/        "Google"
  [yahoo]:  http://search.yahoo.com/  "Yahoo Search"
  [msn]:    http://search.msn.com/    "MSN Search"

上面两种写法都会产生下面的 HTML。

<p>I get 10 times more traffic from <a href="http://google.com/"
title="Google">Google</a> than from
<a href="http://search.yahoo.com/" title="Yahoo Search">Yahoo</a>
or <a href="http://search.msn.com/" title="MSN Search">MSN</a>.</p>

下面是用行内式写的同样一段内容的 Markdown 文件，提供作为比较之用：

I get 10 times more traffic from [Google](http://google.com/ "Google")
than from [Yahoo](http://search.yahoo.com/ "Yahoo Search") or
[MSN](http://search.msn.com/ "MSN Search").

参考式的链接其实重点不在于它比较好写，而是它比较好读，比较一下上面的范例，使用参考式的文章本身只有 81 个字符，但是用行内形式的却会增加到 176 个字元，如果是用纯 HTML 格式来写，会有 234 个字元，在 HTML 格式中，标签比文本还要多。

使用 Markdown 的参考式链接，可以让文件更像是浏览器最后产生的结果，让你可以把一些标记相关的元数据移到段落文字之外，你就可以增加链接而不让文章的阅读感觉被打断。

强调

Markdown 使用星号（*）和底线（_）作为标记强调字词的符号，被 * 或 _ 包围的字词会被转成用 <em> 标签包围，用两个 * 或 _ 包起来的话，则会被转成 <strong>，例如：

*single asterisks*

_single underscores_

**double asterisks**

__double underscores__

会转成：

<em>single asterisks</em>

<em>single underscores</em>

<strong>double asterisks</strong>

<strong>double underscores</strong>

你可以随便用你喜欢的样式，唯一的限制是，你用什么符号开启标签，就要用什么符号结束。

强调也可以直接插在文字中间：

un*frigging*believable

但是如果你的 * 和 _ 两边都有空白的话，它们就只会被当成普通的符号。

如果要在文字前后直接插入普通的星号或底线，你可以用反斜线：

\*this text is surrounded by literal asterisks\*

删除

Markdown 可以在一行中用两个 (\) 符号 包裹一段文字，会被转成 <del> 包裹起来的内容，显示为 删除。

例如：

~~删除~~

会转成：

<del>删除</del>

如果需要连续使用两个 ~ 符号，则可以使用反斜线：

~\~删除~\~

代码

如果要标记一小段行内代码，你可以用反引号把它包起来（`），例如：

Use the `printf()` function.

会产生：

<p>Use the <code>printf()</code> function.</p>

如果要在代码区段内插入反引号，你可以用多个反引号来开启和结束代码区段：

``There is a literal backtick (`) here.``

这段语法会产生：

<p><code>There is a literal backtick (`) here.</code></p>

代码区段的起始和结束端都可以放入一个空白，起始端后面一个，结束端前面一个，这样你就可以在区段的一开始就插入反引号：

A single backtick in a code span: `` ` ``

A backtick-delimited string in a code span: `` `foo` ``

会产生：

<p>A single backtick in a code span: <code>`</code></p>

<p>A backtick-delimited string in a code span: <code>`foo`</code></p>

在代码区段内，& 和尖括号都会被自动地转成 HTML 实体，这使得插入 HTML 原始码变得很容易，Markdown 会把下面这段：

Please don't use any `<blink>` tags.

转为：

<p>Please don't use any <code>&lt;blink&gt;</code> tags.</p>

你也可以这样写：

`—` is the decimal-encoded equivalent of `—`.

以产生：

<p><code>&amp;#8212;</code> is the decimal-encoded
equivalent of <code>&amp;mdash;</code>.</p>

图片

很明显地，要在纯文字应用中设计一个「自然」的语法来插入图片是有一定难度的。

Markdown 使用一种和链接很相似的语法来标记图片，同样也允许两种样式： 行内式和参考式。

行内式的图片语法看起来像是：

![Alt text](/path/to/img.jpg)

![Alt text](/path/to/img.jpg "Optional title")

详细叙述如下：

• 一个惊叹号 !
• 接着一个方括号，里面放上图片的替代文字
• 接着一个普通括号，里面放上图片的网址，最后还可以用引号包住并加上
  选择性的 ‘title’ 文字。

参考式的图片语法则长得像这样：

![Alt text][id]

「id」是图片参考的名称，图片参考的定义方式则和连结参考一样：

[id]: url/to/image  "Optional title attribute"

到目前为止， Markdown 还没有办法指定图片的宽高，如果你需要的话，你可以使用普通的 <img> 标签。

其它

自动链接

Markdown 支持以比较简短的自动链接形式来处理网址和电子邮件信箱，只要是用尖括号包起来， Markdown 就会自动把它转成链接。一般网址的链接文字就和链接地址一样，例如：

<http://example.com/>

Markdown 会转为：

<a href="http://example.com/">http://example.com/</a>

邮址的自动链接也很类似，只是 Markdown 会先做一个编码转换的过程，把文字字符转成 16 进位码的 HTML 实体，这样的格式可以糊弄一些不好的邮址收集机器人，例如：

<address@example.com>

Markdown 会转成：

<a href="&#x6D;&#x61;i&#x6C;&#x74;&#x6F;:&#x61;&#x64;&#x64;&#x72;&#x65;
&#115;&#115;&#64;&#101;&#120;&#x61;&#109;&#x70;&#x6C;e&#x2E;&#99;&#111;
&#109;">&#x61;&#x64;&#x64;&#x72;&#x65;&#115;&#115;&#64;&#101;&#120;&#x61;
&#109;&#x70;&#x6C;e&#x2E;&#99;&#111;&#109;</a>

在浏览器里面，这段字串（其实是 <a href="mailto:address@example.com">address@example.com</a>）会变成一个可以点击的「address@example.com」链接。

（这种作法虽然可以糊弄不少的机器人，但并不能全部挡下来，不过总比什么都不做好些。不管怎样，公开你的信箱终究会引来广告信件的。）

反斜杠

Markdown 可以利用反斜杠来插入一些在语法中有其它意义的符号，例如：如果你想要用星号加在文字旁边的方式来做出强调效果（但不用 <em> 标签），你可以在星号的前面加上反斜杠：

\*literal asterisks\*

Markdown 支持以下这些符号前面加上反斜杠来帮助插入普通的符号：

\   反斜线
`   反引号
*   星号
_   底线
{}  花括号
[]  方括号
()  括弧
#   井字号
+   加号
-   减号
.   英文句点
!   惊叹号

扩展语法

使用 \ 换行

标准 markdown 使用两个空格换行，不仅容易忘记，而且也不够明显。所以 vscode 支持另外一种换行方式，使用反斜杠 \。

例如

1
2
3

第一行\
第二行  
第三行

会被显示为

第一行
第二行
第三行

语言特定代码块

虽然上面直接缩进 4 个空格就能得到代码块，但如果想要特定于语言的语法高亮，就不能直接缩进，而是使用 3 个以上的反引号（`） 包裹起来并告诉 markdown 解析器你需要什么语言的语法高亮。

例如

1
2
3
4
5
6
7
8
9

```js
function foo() {
  return {
    name: '灵梦',
    age: 17,
    sex: false,
  }
}
```

会被显示为

1
2
3
4
5
6
7

function foo() {
  return {
    name: '灵梦',
    age: 17,
    sex: false,
  }
}

在代码显示上会有相当的优势，还是希望尽量使用 ``` 而非缩进 4 个空格。

表格

markdown 可以制作一些简单的表格

例如

1
2
3
4

| name    | age | gender |
| ------- | --- | ------ |
| liuli   | 17  | false  |
| chuxuan | 23  | true   |

会被显示为

文章目录

markdown 还可以支持的文章目录（本质上是嵌套的无序列表）

例如

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

- [markdown 语法说明](#markdown-语法说明)
  - [概述](#概述)
    - [宗旨](#宗旨)
    - [兼容 HTML](#兼容-html)
    - [特殊字符自动转换](#特殊字符自动转换)
  - [区块元素](#区块元素)
    - [段落和换行](#段落和换行)
    - [标题](#标题)
    - [区块引用 Blockquotes](#区块引用-blockquotes)
    - [列表](#列表)
    - [代码区块](#代码区块)
    - [分隔线](#分隔线)
  - [区段元素](#区段元素)
    - [链接](#链接)
    - [强调](#强调)
    - [删除](#删除)
    - [代码](#代码)
    - [图片](#图片)
  - [其它](#其它)
    - [自动链接](#自动链接)
    - [反斜杠](#反斜杠)
  - [扩展语法](#扩展语法)
    - [使用 `\` 换行](#使用--换行)
    - [语言特定代码块](#语言特定代码块)
    - [表格](#表格)
    - [文章目录](#文章目录)
    - [任务列表](#任务列表)
  - [Markdown 免费编辑器](#markdown-免费编辑器)

会被显示为

• markdown 语法说明
  • 概述
    • 宗旨
    • 兼容 HTML
    • 特殊字符自动转换
  • 区块元素
    • 段落和换行
    • 标题
    • 区块引用 Blockquotes
    • 列表
    • 代码区块
    • 分隔线
  • 区段元素
    • 链接
    • 强调
    • 删除
    • 代码
    • 图片
  • 其它
    • 自动链接
    • 反斜杠
  • 扩展语法
    • 使用 \ 换行
    • 语言特定代码块
    • 表格
    • 文章目录
    • 任务列表
  • Markdown 免费编辑器

任务列表

如果你想要写一些任务项，markdown 恰好也是支持的。只要简单的使用 - [ ]/- [x] 的方式就可以定义未完成/完成的任务项。

例如

1
2
3

- [ ] 第一项任务
- [x] 第二项任务
- [x] 第三项任务

会被显示为

• 第一项任务
• 第二项任务
• 第三项任务

Markdown 免费编辑器

如果你是一名 Developer，那吾辈首推 VSCode，免费开源的跨平台编辑器。

Windows 平台

• MarkdownPad
• MarkPad

Linux 平台

• ReText

Mac 平台

• Mou

在线编辑器

• Dillinger.io

浏览器插件

• Markdown Here

高级应用

• VSCode + Markdown All in One / 教程
• Sublime Text 2 + MarkdownEditing / 教程

Vue 深度监听

场景

吾辈在前端项目中需要监听 Vue 组件中的一个数组的变化，然而没想到这个简单的功能却发现并没有想象中的容易。在废了一波三折之后终于算是实现了效果，所以便在这里记录一下。

代码

吾辈写一个 demo 在 GitHub，如果需要可以去看下。也有一个 网站 用来演示下面的三种方法的效果

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67

<template>
  <v-card>
    <v-card-title primary-title>
      <h2>普通监听</h2>
      <v-subheader>不会发生变化</v-subheader>
    </v-card-title>
    <v-card-text>
      <v-list>
        <v-list-tile v-for="item in items" :key="item.k">
          <v-text-field
            :label="`输入框 ${item.k}`"
            v-model="item.v"
          ></v-text-field>
        </v-list-tile>
      </v-list>
      <v-layout row wrap>
        <v-flex md4 xs12>
          <h2>旧值</h2>
          <p>{{ oldVal }}</p>
        </v-flex>

        <v-flex md4 sm4 xs12>
          <h2>差异</h2>
          <p>{{ difference }}</p>
        </v-flex>
        <v-flex md4 xs12>
          <h2>新值</h2>
          <p>{{ val }}</p>
        </v-flex>
      </v-layout>
      <v-layout row wrap>
        <v-flex xs12>
          <h4>最后更新于：{{ lastUpdateTime }}</h4>
        </v-flex>
      </v-layout>
    </v-card-text>
  </v-card>
</template>

<script>
import _ from 'lodash'
export default {
  data: () => ({
    // 吾辈想要监视这个的变化
    items: [],
    // 下面的两个属性仅用于展示
    oldVal: [],
    val: [],
    difference: [],
    lastUpdateTime: new Date()
  }),
  methods: {
    /**
     * 初始化 items
     */
    init() {
      this.items = _.range(1, 6).map(i => ({
        k: i,
        v: ''
      }))
    }
  },
  mounted() {
    this.init()
  }
}
</script>

直接使用 watch 监听

最开始吾辈使用 watch 直接监听数组 items 的变化

1
2
3
4
5
6
7
8
9
10
11
12
13

watch: {
  // 监听 items 的变化（实际上数组内部的值变化监听不到）
  items(val, oldVal) {
    this.val = val
    this.oldVal = oldVal
    this.difference = _.differenceWith(
      val,
      oldVal,
      (i, k) => JSON.stringify(i) === JSON.stringify(k)
    )
    this.lastUpdateTime = new Date().toISOString()
  }
},

结果发现完全没有一点效果，vuejs 居然认为数组没有变化。查了一下官网文档，发现在 这里 有一段话。

由于 JavaScript 的限制，Vue 不能检测以下变动的数组：

1. 当你利用索引直接设置一个项时，例如：vm.items[indexOfItem] = newValue
2. 当你修改数组的长度时，例如：vm.items.length = newLength

使用 deep 属性设置深度监听

后来，在 watch 的 API 里面，吾辈找到了一个属性：deep ，使用它就可以对数组等嵌套对象进行深度监听。

所以，吾辈的监听代码变成了这样

1
2
3
4
5
6
7
8
9
10
11
12

watch: {
  items: {
    handler (val, oldVal) {
      this.val = val
      this.oldVal = oldVal
      this.difference = _.differenceWith(val, oldVal, (i, k) => JSON.stringify(i) === JSON.stringify(k))
      this.lastUpdateTime = new Date().toISOString()
    },
    // 这里是关键，代表递归监听 items 的变化
    deep: true
  },
}

然而之后又发现了一个问题，深度监听是能够响应数组里面的元素每一次的变化，但旧的值并没有被记录。原因在 官网文档 也有指明。

注意：在变异 (不是替换) 对象或数组时，旧值将与新值相同，因为它们的引用指向同一个对象 / 数组。Vue 不会保留变异之前值的副本。

使用额外的变量保存旧值

没办法，既然 vuejs 限制如此，引用类型的变量无法保存旧值，那我们就自己保存吧

1
2
3
4
5
6
7
8
9
10
11
12
13
14

watch: {
  items: {
    handler (val) {
      this.val = val
      // itemOld 就是额外的变量
      this.oldVal = this.itemOld
      this.difference = _.differenceWith(val, this.itemOld, (i, k) => JSON.stringify(i) === JSON.stringify(k))
      // 注意：这里更新旧值采用的是深层复制而非简单的引用
      this.itemOld = _.cloneDeep(val)
      this.lastUpdateTime = new Date().toISOString()
    },
    // 这里是关键，代表递归监听 items 的变化
    deep: true
  },

总结

vuejs 的坑是真的不少呢，不过踩过去就好啦

成为 Java 高级程序员需要掌握哪些？

转自 https://blog.csdn.net/zhibuguonicuo/article/details/60345715，吾辈只修改了部分排版/错字以更好的阅读。

Section 1

1. Core Java，就是 Java 基础、JDK 的类库，很多童鞋都会说，JDK 我懂，但是懂还不足够，知其然还要知其所以然，JDK 的源代码写的非常好，要经常查看，对使用频繁的类，比如 String，集合类（List，Map，Set）等数据结构要知道它们的实现，不同的集合类有什么区别，然后才能知道在一个具体的场合下使用哪个集合类更适合、更高效，这些内容直接看源代码就 OK 了

2. 多线程并发编程，现在并发几乎是写服务端程序必须的技术，那对 Java 中的多线程就要有足够的熟悉，包括对象锁机制、synchronized 关键字，concurrent 包都要非常熟悉，这部分推荐你看看《Java 并发编程实践》这本书，讲解的很详细

3. I/O，Socket 编程，首先要熟悉 Java 中 Socket 编程，以及 I/O 包，再深入下去就是 Java NIO, 再深入下去是操作系统底层的 Socket 实现, 了解 Windows 和 Linux 中是怎么实现 socket 的

4. JVM 的一些知识，不需要熟悉，但是需要了解，这是 Java 的本质，可以说是 Java 的母体, 了解之后眼界会更宽阔，比如 Java 内存模型（会对理解 Java 锁、多线程有帮助）、字节码、JVM 的模型、各种垃圾收集器以及选择、JVM 的执行参数（优化 JVM）等等, 这些知识在《深入 Java 虚拟机》这本书中都有详尽的解释, 或者去 oracle 网站上查看具体版本的 JVM 规范.

5. 一些常用的设计模式，比如单例、模板方法、代理、适配器等等，以及在 Core Java 和一些 Java 框架里的具体场景的实现，这个可能需要慢慢积累，先了解有哪些使用场景，见得多了，自己就自然而然会去用。

6. 常用数据库（Oracle、MySQL 等）、SQL 语句以及一般的优化

7. JavaWeb 开发的框架，比如 Spring、iBatis 等框架，同样他们的原理才是最重要的，至少要知道他们的大致原理。

8. 其他一些有名的用的比较多的开源框架和包，Netty 网络框架，Apache common 的 N 多包，Google 的 Guava 等等，也可以经常去 Github 上找一些代码看看。

section 2

每逢长假都会有很多程序员跳槽，十一、过年是跳槽黄金时刻，尤其是过年。过年的时候年终奖到手，没有了多少牵挂，年终同学同事聚会比较多，沟通的就多，各种工作机会的消息也相应会多，所以跳槽的机会也就会多。跳槽就必不可少的要经过面试，那么作为一个 Java 程序员需要准备哪些面试知识呢？下面就给大家说说。

1. 集合框架
   
   从上图可以看到主要是 Collection 和 Map 的继承类和 Iterator 的实现类，重点掌握 ArrayList、LinkedList、Vector、Stack、PriorityQueue、HashSet、LinkedHashSet、TreeSet、HashMap、LinkedHashMap、TreeMap、WeakHashMap、EnumMap、TreeMap、HashTable 的特点和实现原理，还有多线程使用场景和插入多还是删除多的时候使用什么样的集合类效率会更高。

2. IO 框架
   
   主要掌握 Reader、Writer、InputStream、OutputStream 的继承类，重点掌握字节流 (FileInputStream、FileOutputSteam、BufferedInputStream、BufferedOutputStream、DataInputStream、DataOutputStream) 和字符流(FileReader、FileWriter、BufferedReader、BufferedWriter、InputStreamReader、OutputStreamWriter)，并熟练运用。还有就是 NIO 的工作原理要知道。

3. String 相关
   主要考察对 String 的处理，顺带考察多线程和算法，大公司就是喜欢考察字符串的算法，主要是字符串查找或者剔除，多线程打印字符串，超大字符串处理。

4. 异常处理
   
   掌握 Throwable 继承类，理解 Error 和 Exception 的区别，理解运行时异常和编译异常的区别，掌握异常的处理方法，掌握 try、catch、finally、throw、throws 关键字的意义，掌握 try-catch-finally 语句的执行顺序，掌握异常的工作原理，知道常见的异常有哪些。

5. 多线程
   如何创建和启动一个线程，有哪些方法？多线程如何交互，线程之间的调度、让步、合并，如何同步？生产和消费者模型。还有就是掌握线程安全、线程池，死锁。

6. JVM 知识
   掌握常见的垃圾回收机制，掌握程序计数器、堆、栈、方法区的作用，掌握类的加载机制。掌握内存分代模型和工作原理。掌握 JVM 启动参数常见配置，了解 JVM 调优。

7. 数据结构与算法：
   掌握常见查找和排序算法实现及其时间、空间复杂度。掌握常见数据结构如链表、队列、栈的基本原理和实现。

section 3

经常主持对高级工程师和中基层 Tech Leader 的面试，一年下来总有百八十场，我给大家分享一下我对于高级工程师的定位吧，虽然我主要负责. Net 团队，但是对于其他语言应该也是适用的。

一、理论基础： 高级工程师必须有较好的理论基础，既包含一些基础的学科知识，也要包含个人专攻方向的前沿理论。我遇到过形形色色的求职者，有人自称精通领域模式，却不明白什么是聚合根（领域根）。甚至有人无法列举常用的非线性结构，更别提伪码实现和应用场景分析了。这些人普遍振振有词地说， 我有丰富的开发经验，项目需要实现的功能我都能做出来，我只是没有去记那些术语名词。抱歉，你不是没有记术语名词，你是根本没有潜心看技术文章的心态，你所谓的学习就是看一些诸如《21 天精通 Java》，《7 天，从菜鸟到专家》之类的垃圾书，或者看点视频。那么你这个高工，比别人高在哪里呢？当单位需要你代表团队和合作机构沟通，甚至发表专栏的时候，你是不是也准备跟大家讲” 这个东西我不知道该怎么讲，大家可以看一下我的代码 “。只有代码可秀的人是码农，不是高工，所以我给这类求职者的综评是中 + 封顶。

二、工作经验： 高级工程师必须有过在项目中担心核心模块开发或者整体架构设计的经验，并且项目越高大上越好，比如你在互联网企业搞过读写分离的实现，你在电商搞过秒杀算法，你在电信行业做过网络层，我必定会高看一眼。如果你就仅仅只是一个人全栈搞过几个小网站，啪啪啪一大堆成熟框架用得倍溜，那么你只是一个装配工。我给这类求职者的综评是中 + 封顶。

三、培养潜力： 高级工程师必须有全局思维，如果在你过往的工作历程中，你对你兄弟团队或者部门的工作情形一问三不知，甚至于一个项目中，你只懂自己的模块，其他同事负责的模块你就只会 call 个 API，那么你就是一个很难再进一步的人。对于企业来说，有你不多，无你不少，所以我给这类求职者的综评是中 + 封顶。

四、沟通能力： 高级工程师在技术团队中是绝对的核心人中，小项目中你就是负责人，大项目中你也要负责带新人，那么良好的沟通能力必不可少，如果你仅仅是自己一个人心里亮堂，你对企业的价值就要大打折扣。这类求职者，我也有录用过不少，因为程序员木讷可以说是一种共性，在这方面没法太挑剔，但是我给他们的综评是高 - 封顶。

section 4

如果要应聘高级开发工程师职务，仅仅懂得 Java 的基础知识是远远不够的，还必须懂得常用数据结构、算法、网 络、操作系统等知识。因此本文不会讲解具体的技术，笔者综合自己应聘各大公司的经历，整理了一份大公司对 Java 高级开发工程师职位的考核纲要，希望可以帮助到需要的人。

1、Java 基础

1.1 Collection 和 Map

1. 掌握 Collection 和 Map 的继承体系。
2. 掌握 ArrayList、LinkedList、Vector、Stack、PriorityQueue、HashSet、 LinkedHashSet、TreeSet、HashMap、LinkedHashMap、TreeMap、WeakHashMap、EnumMap、 TreeMap、HashTable 的特点和实现原理。
3. 掌握 CopyOnWriteArrayList、CopyOnWriteArraySet、ConcurrentHashMap 的实现原理和适用场景。

1.2 IO

1. 掌握 InputStream、OutputStream、Reader、Writer 的继承体系。
2. 掌握字节流 (FileInputStream、DataInputStream、BufferedInputStream、 FileOutputSteam、DataOutputStream、BufferedOutputStream) 和字符流 (BufferedReader、InputStreamReader、FileReader、BufferedWriter、 OutputStreamWriter、PrintWriter、FileWriter)，并熟练运用。
3. 掌握 NIO 实现原理及使用方法。

1.3 异常

1. 掌握 Throwable 继承体系。
2. 掌握异常工作原理。
3. 了解常见受检异常 (比如 FileNotFoundException)、非受检异常(比如 NullPointerException) 和错误(比如 IOError)。

1.4 多线程

1. 掌握 Executors 可以创建的三种 (JAVA8 增加了一种，共四种) 线程池的特点及适用范围。
2. 掌握多线程同步机制，并熟练运用。

1.5 Socket

1. 掌握 Socket 通信原理。
2. 熟练使用多线程结合 Socket 进行编程。

2、Java 虚拟机

2.1 JVM 内存区域划分

1. 掌握程序计数器、堆、虚拟机栈、本地方法栈、方法区（JAVA8 已移除）、元空间（JAVA8 新增）的作用及基本原理。
2. 掌握堆的划分：新生代（Eden、Survivor1、Survivor2）和老年代的作用及工作原理。
3. 掌握 JVM 内存参数设置及调优。

2.2 类加载

1. 掌握类的加载阶段：加载、链接（验证、准备、解析）、初始化、使用、卸载。
2. 掌握类加载器分类及其应用：启动类加载器、扩展类加载器、应用程序类加载器、自定义加载器。

3、J2EE

1. 掌握 JSP 内置对象、动作及相关特点和工作原理。
2. 掌握 Servlet 的特点和工作原理。
3. 掌握 Spring 框架的 IOC 和 AOP 实现原理（反射和动态代理）。
4. 至少掌握一个 MVC 框架（Spring MVC，Struts 等）的工作原理，并熟练运用。
5. 至少掌握一个 ORM 框架 (Hibernate，MyBatis 等) 的工作原理，并熟练运用。

4、数据结构与算法

1. 掌握线性表和树的特点并熟练运用。
2. 掌握常用排序和查找算法：插入排序 (直接插入排序、希尔排序)、选择排序 (直接选择排序、堆排序)、交换排序 (冒泡排序、快速排序)、归并排序，顺序查找、二分查找、哈希查找。
3. 熟练运用常见排序和查找算法思想解决编程问题。
4. 了解几大基本算法：贪心算法、分治策略、动态规划。

5、计算机网络

1. 掌握网络的分层结构，及每层的功能特点。
2. 掌握 TCP/IP 的通信原理 (三次握手、四次挥手)

6、数据库

1. 掌握复杂的 SQL 语句编写。
2. 掌握数据库的优化（SQL 层面和表设计层面）。
3. 至少掌握一款数据库产品。
4. 熟悉高并发、大数据情况下的数据库开发。

7、Web 技术

1. 掌握 AJAX 的工作原理。
2. 至少熟悉一款 JS 框架 (比如 JQuery)。

8、设计模式

1. 熟悉常见的设计模式。
2. 会将设计模式理论应用到实际开发中。

9、Linux

1. 熟练运用 Linux 常见命令。
2. 熟悉 Linux 操作系统基本概念及特点。
3. 熟悉 Shell 脚本。

10、操作系统

1. 掌握操作系统的进程管理。
2. 了解操作系统的 I/O。

11、正则表达式

1. 掌握常见正则表达式符号。
2. 熟练运用正则表达式解决实际问题 (比如匹配电话号码、邮箱、域名等)。

Section 5

• h5edu 的源码
• pure– 响应式 css 框架
• Hadoop 大数据
• ERP 系统开发
• linux
• freemarker
• weblogic/jobss
• webwhpere
• webservice http://www.iteye.com/topic/1135747
• bootstrap
• HTML5
• android
• css/jslever
• spring aop ssh ssm 徒手搭建
• jquery 源码分析融汇
• 缓存 echacge
• 并发
• 页面静态化
• UML
• shell
• pathy
• github
• 网络编程
• ExtJS
• 网络爬虫
• 设计模式
• 多线程与并发
• 第三方支付 / 登录

============= 高级工程 =============

1、Core Java 部分

这是最基础的, 对于一个 java 高级开发 / 设计人员, 你需要对这一部分达到精通的水平, 重点内容如下:

1. 面向对象编程思想 (封装继承多态接口)
2. 字符串处理
3. java.lang 包, java.util 包等常用包
4. java 异常处理

2、Java 高级部分

1. Java I/O 流
2. Java 多线程技术
3. Java 网络编程
4. Java Swing

后两项可以了解即可, 如果项目需要可以深入研究

3、前端基本技能

• HTML + CSS 网页开发
• JavaScript
• Jquery
• 浏览器兼容性 CSS hack(了解)

4、熟练使用 JSP + Servlet 进行开发

5、MVC 设计模式, 原理, 以及相关框架, 如 Struts

6、SSH 框架

7、缓存技术 session & cookie

8、熟练使用一种以上 Java 开发工具

Eclipse/MyEclipse/Jbuilder/Jcreator

9、熟练使用 XML

JDOM w3c.dom SAX

10、Java 设计模式

工厂模式, 单例模式 ==

11、Java 反射机制

反射的各种用法

12、了解或熟悉 C, C++, .NET

13、熟悉 JDK 的配置, 环境变量

14、数据库 oracle 必学, 其他最好了解一种以上 (mysql,sql server,access==)

oracle: 视图, 索引, 存储过程, 触发器, 游标, 包, 常用函数 ==

15、数据库原理

事务的原理, 锁机制, 表连接, 复杂查询语句 (工作经验), 性能调优, 锁表以及解决方案 ==

16、JDBC, 连接池

17、Ajax, 反向 Ajax

18、HTTP 协议, request 和 response 的原理, HTTP status(了解常用的),Https 原理

19、熟悉 Linux 基本命令, 使用过 Linux/Unix 系统, 可以编写 shell 脚本, 可以在 Linux 上部署项目

20、了解 windows 系统批处理脚本 bat

21、了解 HTML5, 最好学习过

22、熟悉一种 JS 框架, 如 Prototype

23、J2EE 原理 熟悉一种以上 web 容器如 Tomcat,JBoss,websphere,weblogic==

24、熟悉 ant 或 maven

25、熟悉一门脚本语言, 如 python ,ruby

26. 了解 php/ asp

27、了解 ftp 协议及原理

28、熟练使用 Junit 测试, 熟悉 Mockito 等测试工具

29、熟悉 javac,javadoc,native,native2ascii 等常用命令

30、熟悉常用的排序算法, 如冒泡排序, 快速排序等, 最好自己研究过一些的算法, 下面的这个就是我曾经研究过的一个:

http wenku baidu com /view/391db3f0941ea76e58fa04e9 点 html
http://wenku.baidu.com/view.391db3f0941ea76e58fa04e9.html

31、了解 Flex(不学也没关系)

32、了解敏捷开发模式

33、工作流 workflow 至少用过一种, 如 OSworkflow, 了解原理

34、使用过 VPN 了解其原理

35、熟悉 jstl 表达式和 el 表达式

36、熟悉 webservice,WSDL,SOAP

37、图片处理, 如图片上传, 预览, 限制大小等, 下面共享一 (垃圾勿喷):

http wenku baidu com/view/05337bfc770bf78a6529541b 点 html

38、版本控制工具, CVS VSS SVN

39、JSON 技术, JSON+AJAX

40、分页技术, 最好自己实现过不仅仅是用过要知道原理

41、Java Mail

42、Java 读写 txt,excel

JXL 技术

43、JVM 原理, JVM 内存管理, GC,Java 堆栈池

44、熟练使用下面的工具:

• office 办公软件, word,excel,ppt 等
• plsql,sqldevelop 数据库开发工具
• outlook 大公司都用
• ue 编辑器
• 浏览器控制台, 调试
• SHH/PUTTY 远程

45、UML 建模工具 Rational Rose 等

46、使用 log4j

47、使用过开放 API 如百度地图, 腾讯街景, 新浪微博等

48、页面静态化技术 (伪静态页面)UrlRwriter

49、报表技术, 使用过报表制作工具, 如水晶易表

50、定时任务, 如 Spring batch, 学会自定义 batch 任务 (不适用第三方工具)

51、了解 uuid

52、B/s 和 C/s 架构

53、正则表达式

54、了解 JNDI JMS

55、ERP

56、unicode 编码, 乱码的解决

57、开源网络编辑器, 如 ckEditor

58、二进制原理

59、使用过, 了解开源论坛框架, 如 discuzz

60、GWT ,Closure 框架

61、了解 大数据, 云计算

62、搜索引擎搜索技术

63、软件工程, 项目管理

1. 你需要精通面向对象分析与设计 (OOA/OOD)、涉及模式(GOF，J2EEDP) 以及综合模式。你应该十分了解 UML，尤其是 class，object，interaction 以及 statediagrams。
2. 你需要学习 JAVA 语言的基础知识以及它的核心类库 (collections，serialization，streams，networking， multithreading，reflection，event，handling，NIO，localization，以及其他)。
3. 你应该了解 JVM，classloaders，classreflect，以及垃圾回收的基本工作机制等。你应该有能力反编译一个类文件并且明白一些基本的汇编指令。
4. 如果你将要写客户端程序，你需要学习 WEB 的小应用程序 (applet)，必需掌握 GUI 设计的思想和方法，以及桌面程序的 SWING，AWT， SWT。你还应该对 UI 部件的 JAVABEAN 组件模式有所了解。
   JAVABEANS 也被应用在 JSP 中以把业务逻辑从表现层中分离出来。
5. 你需要学习 java 数据库技术，如 JDBCAPI 并且会使用至少一种 persistence/ORM 构架，例如 Hibernate，JDO， CocoBase，TopLink，InsideLiberator(国产 JDO 红工厂软件) 或者 iBatis。
6. 你还应该了解对象关系的阻抗失配的含义，以及它是如何影响业务对象的与关系型数据库的交互，和它的运行结果，还需要掌握不同的数据库产品运用，比如: oracle，mysql，mssqlserver。
7. 你需要学习 JAVA 的沙盒安全模式 (classloaders，bytecodeverification，managers，policyandpermissions，
   codesigning， digitalsignatures，cryptography，certification，Kerberos，以及其他) 还有不同的安全 / 认证 API，例如 JAAS(JavaAuthenticationandAuthorizationService)，
   JCE (JavaCryptographyExtension)，JSSE(JavaSecureSocketExtension)，以及 JGSS (JavaGeneralSecurityService)。
8. 你需要学习 Servlets，JSP，以及 JSTL(StandardTagLibraries) 和可以选择的第三方 TagLibraries。
9. 你需要熟悉主流的网页框架，例如 JSF，Struts，Tapestry，Cocoon，WebWork，以及他们下面的涉及模式，如 MVC/MODEL2。
10. 你需要学习如何使用及管理 WEB 服务器，例如 tomcat，resin，Jrun，并且知道如何在其基础上扩展和维护 WEB 程序。
11. 你需要学习分布式对象以及远程 API，例如 RMI 和 RMI/IIOP。
12. 你需要掌握各种流行中间件技术标准和与 java 结合实现，比如 Tuxedo、CROBA，当然也包括 javaEE 本身。
13. 你需要学习最少一种的 XMLAPI，例如 JAXP(JavaAPIforXMLProcessing)，JDOM(JavaforXMLDocumentObjectModel)，DOM4J，或 JAXR(JavaAPIforXMLRegistries)。
14. 你应该学习如何利用 JAVAAPI 和工具来构建 WebService。例如 JAX-RPC(JavaAPIforXML/RPC)，SAAJ (SOAPwithAttachmentsAPIforJava)，JAXB(JavaArchitectureforXMLBinding)，
    JAXM(JavaAPIforXMLMessaging)， JAXR(JavaAPIforXMLRegistries)，或者 JWSDP(JavaWebServicesDeveloperPack)。
15. 你需要学习一门轻量级应用程序框架，例如 Spring，PicoContainer，Avalon，以及它们的 IoC/DI 风格 (setter，constructor，interfaceinjection)。
16. 你需要熟悉不同的 J2EE 技术，例如 JNDI(JavaNamingandDirectoryInterface)，JMS (JavaMessageService)，JTA/JTS(JavaTransactionAPI/JavaTransactionService)

Windows 下安装 Gradle

官网, GitHub

场景

吾辈需要在 Windows 下 build Android 的项目，作为 Android 官方推荐的构建工具，Gradle 也却是不得不用呀

安装

在官网的版本 发布页面 找到 Download 的 binary-only 链接，点击即可下载了（后面的 complete 指的是完整版，我们只是使用的话并不需要下载那个）。

设置环境变量

下载完成后，将文件解压出来，解压出来的文件夹内大概是这个样子

现在，我们需要设置环境变量了

在 控制面板 > 系统和安全 > 系统 中找到 高级系统设置 项

点击 环境变量

双击 系统变量 > Path

点击 新建 创建一个环境变量，随便输入点什么，然后点击 浏览

选择 gradle 解压后的文件夹位置，之后点击确定

然后一路点击确认关闭这 3 个窗口

测试

打开 Cmd，下面是从菜单中找到 Windows 系统 > 命令提示符

在 Cmd 中输入 gradle -v 验证一下，如果得到的是类似于下面的输出，那么 gradle 便是安装成功了

那么，Gradle 的安装到这里便是基本结束了呢 (★^O^★)

IntelliJ 开发者之夜@深圳之行

起因

最早，吾辈是在 活动行 上面看到这个活动的，然后果断报名参加了。

即便，吾辈本身并不住在深圳，但还是选择坐高铁赶过去了。

活动

吾辈去的比较早，接近四点钟左右到了，但那个时候活动并没有开始，也没有看到活动标识。于是，吾辈和朋友便先去咖啡厅坐了一会，然后在大约六点钟的时候到达了活动现场。嗯，还拿到了一些小礼物。

产品全系列五折优惠真的很良心了！

其实活动只有是三个主题

• IntelliJ IDEA 的使用技巧及新特性讲解
• TeamCity 持续集成工具讲解
• Kotlin 语言特性讲解

在讲完 TeamCity 之后其实有个茶歇时间的，这里吾辈拍了一张会场入口的活动海报

感想

虽然 dalao 们都是用英语进行口语交流，吾辈只能听懂七七八八，但参加活动还是感到很高兴。讲真只有在第一个主题吾辈基本能够听懂/参与的，毕竟 IDEA 用了好久。第二个主题的 TeamCity 表示没用过不明觉厉。Kotlin 虽然吾辈也没有用过，但看起来与 Scala 非常相像（语法糖真的太多了！），感觉还是很不错的！

嘛，希望以后有更多的机会参加 IDEA 举办的活动就是了呢 o((*^▽^*))o