docs: replace img

Author: KuangPF

.DS_Store

@@ -6,7 +6,7 @@
 
 其实，不是这样的，事实是：从这以后，你要明白，你又要继续学习了，尤大，你尽管更新，我们还学得动。
 
-![vue-cli3](https://user-images.githubusercontent.com/20694238/48542845-2893a480-e8fb-11e8-8456-1b7722cfccd1.png)
+<img :src="$withBase('/assets/foreword-img01.png')">
 
 ### 版本
 
@@ -15,7 +15,7 @@
 
 [vue-cli npm versions](https://www.npmjs.com/package/@vue/cli)
 
-![foreword-vue-cli-versions](https://user-images.githubusercontent.com/20694238/48545317-98585e00-e900-11e8-867c-c048f23a458b.gif)
+<img :src="$withBase('/assets/foreword-img02.gif')">
 
 
 
@@ -25,5 +25,5 @@
 
 仓库默认分支为 `dev`， 这个分支下放着`vue-cli3.0` 以及与之配套的一些插件代码，`master` 分支为 `vue-cli 2.X.X` 的代码。其中 `vue-cli` 的源码在 `/packages/@vue/cli` 中，看这目录的格式，应该是尤大将工具以及`vue-cli` 的一些插件都归在了 `npm` `@vue` 的组织下面，[nmp @vue](https://www.npmjs.com/org/vue)。
 
-<img width="1164" alt="foreword-img02" src="https://user-images.githubusercontent.com/20694238/48545006-e3be3c80-e8ff-11e8-93d2-6b5367dbdc3c.png">
+<img :src="$withBase('/assets/foreword-img03.png')">
 

docs/.vuepress/public/assets/foreword-vue-cli-versions.gif docs/.vuepress/public/assets/foreword-img02.gif

@@ -1,3 +1,7 @@
+---
+sidebarDepth: 0
+---
+
 # generate 函数分析
 
 首先直接看代码：
@@ -50,7 +54,7 @@ module.exports = function generate (name, src, dest, done) {
 ```
 我们将这段代码分为以下部分来讲：
 
-### getOptions
+## getOptions
 根据这语以化的函数名就知道这是获取配置的，然后详细看下 `getOptions` 函数的代码：
 
 ``` javascript
@@ -75,15 +79,15 @@ module.exports = function options (name, dir) {
 <img :src="$withBase('/assets/init-img02.png')">
 
 
-### Handlebars.registerHelper
+## Handlebars.registerHelper
 
 `Handlebars.registerHelper` 用于注册一些 `helper`（或者说成是一些逻辑方法），在模版中来处理一些数据，比如像源码中注册的 `if_eq`  `helper`，他的作用就是判断两个字符串是否相等。然后在 `webpack` 的模板中就有以下的用法：
 
 <img :src="$withBase('/assets/init-img03.png')">
 
 就是根据你在构建项目时选择的 `test runner （Jest，Karma and Mocha，none configure it yourself）` 来生成对应的 `npm script`。你也可以在 `meta.js` 中添加自定义的 `helper`，`vue-cli` 会帮你注册到 `Handlebars` 中。
 
-### opts.metalsmith
+## opts.metalsmith
 先看一段源码：
 
 ``` javascript
@@ -150,7 +154,7 @@ VUE_TEMPL_TEST=full vue init webpack demo
 
 <img :src="$withBase('/assets/init-img04.png')">
 
-### metalsmith.use
+## metalsmith.use
 `metalsmith.use` 是 `metalsmith` 使用插件的写法，前面说过 `metalsmith` 最大的特点就是所有的逻辑都是由插件处理，在 `generate` 函数中一共有使用了三个 `metalsmith` 插件，分别为：`askQuestions` `filterFiles` `renderTemplateFiles` 。
 
 * askQuestions
@@ -300,7 +304,7 @@ function renderTemplateFiles (skipInterpolation) {
 `renderTemplateFiles` 的主要功能就是利用 `consolidate.handlebars.render` 将 `~/.vue-templates`下面的 `handlebars` 模板文件渲染成正式的文件。
 
 
-### metalsmith.build
+## metalsmith.build
 
 `metalsmith.build` 就是使用刚才分析的 `askQuestions` 、`filterFiles` 和 `renderTemplateFiles` 三个插件将项目的初始化文件生成出来并输出到目标目录，完成后输出相关的信息。
 

docs/.vuepress/public/assets/foreword-img02.png docs/.vuepress/public/assets/foreword-img03.png

@@ -15,7 +15,7 @@
 
 ### 从一张图开始源码的分析
 
-![env-img01](https://user-images.githubusercontent.com/20694238/48563233-d4a2b300-e92e-11e8-830e-cf964a8e25cb.png)
+<img :src="$withBase('/assets/install-env-img01.png')">
 
 ##### 安装 `vue-cli`
 

docs/.vuepress/public/assets/install-env-img01.png

@@ -82,7 +82,8 @@ var result = template(data);
 ```
 这是官方的一个 `demo`, 就是通过 `Handlebars` 的 `compile` 方法将模板编译成 `html` 。在 `vue-cli` 的 `init` 命令中，利用 `Handlebars.registerHelper` 方法注册了一些 `helper`，这样就可以在模板中方便的使用这些 `helper`，[详细文档](https://handlebarsjs.com/)。
 
-# metalsmith
+## metalsmith
+
 `metalsmith` 一个静态网站生成器，可以用在批量处理模板的场景，和 `hexo` 类似。它最大的特点就是所有的逻辑都是由插件处理，你只需要将这些插件用 `metalsmith` 连接起来使用即可，比如官方的一个 `demo`：
 
 ``` javascript
@@ -127,7 +128,7 @@ function plugin(opts){
 ```
 关于 `metalsmith` 的更多介绍以及语法可查看[详细文档](https://metalsmith.io/)。
 
-# chalk
+## chalk
 
 `chalk` 是用于修改控制台字符串的样式，包括字体样式（加粗），颜色以及背景颜色等。
 
@@ -142,7 +143,7 @@ console.log(chalk.blue('Hello world!'));
 更多的用法以及 `API` 可查看[详细文档](https://github.com/chalk/chalk)。
 
 
-# download-git-repo
+## download-git-repo
 `download-git-repo` 是用于 从 `GitHub`, `GitLab`, `Bitbucket` 下载一个 `git` 仓库，`API` 如下：
 ``` javascript
 download(repository, destination, options, callback)
@@ -155,7 +156,7 @@ download(repository, destination, options, callback)
 
 更多例子可查看 [详细文档](https://github.com/flipxfx/download-git-repo)。
 
-# consolidate
+## consolidate
 `consolidate` 是一个模版引擎整合库，它的作用是把一些著名的模板引擎适配成 `Express` 兼容的接口。在 `vue-cli` 的 `init` 命令中利用 `consolidate.handlebars.render` 是实现模版的渲染。在 `/example/metalsmith` 目录里有个 `demo`，就是通过 `metalsmith` 以及`consolidate.handlebars.render` 方法将一个 `package.json` 以 `handlebars` 的模板引擎来渲染，在项目里运行
 
 ``` bash
@@ -166,5 +167,5 @@ npm run metalsmith
 希望可以通过这个小 `demo` 可以比较好地理解 `metalsmith`， `handlebars` ，`consolidate` 以及`inquirer`，关于 `consolidate` 的更多语法请查看[详细文档](https://github.com/tj/consolidate.js)。
 
 
-# 总结
+## 总结
 这部分主要介绍了在利用 `node` 搭建脚手架工具时一些常见的 `npm` 包，对这些 `npm` 包进行一定的了解后，在后面看源码的时候会比较容易些，下面开始进行源码分析。