脚手架工具入门

落日映苍穹つ 2022-12-23 11:19 144阅读 0赞

# 脚手架工具概要 #

就是创建一个自定义项目的基础工具，提供了约定，开发范式等等。例如AndroidStudio 创建完了就帮你创建了所有文件和目录。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70_pic_center]  
本次内容  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70_pic_center 1]

# 常用的脚手架工具 #

vue-cli和create-react-app-angular-cli等，类似yeoman这些可以提供根据自己模板自定义的脚手架。

# Yeoman 简介 #

可以定制自己的脚手架。Yeoman 非常通用。

# Yeoman 基础使用 #

yarn global add yo npm install -g yo  
安装  
yeoman必须搭配对应的generator使用  
安装generator  
yarn add generator-node  
创建脚手架项目  
yo node  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70_pic_center 2]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70_pic_center 3]  
总结  
不同的generator生成不同的项目  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70_pic_center 4]

# Sub Generator #

有时候不需要生成全新项目，想给原有项目增加文件，可以用Sub Generator。  
![在这里插入图片描述][2020112421505044.png_pic_center]  
link到全局范围  
![在这里插入图片描述][20201124215136592.png_pic_center]

# Yeoman 使用步骤总结 #

Yeoman 通用型脚手架，几乎可以创建任何项目的脚手架  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70_pic_center 5]

# 自定义 Generator #

# 创建 Generator 模块 #

![在这里插入图片描述][2020112421562413.png_pic_center]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70_pic_center 6]  
模块名必须这种格式 不然无法找到  
![在这里插入图片描述][20201126213532588.png_pic_center]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70_pic_center 7]

创建新目录  
yarn init  
yarn add yeoman-generator  
vscode打开  
创建generators/app/index文件  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70_pic_center 8]

const Generator = require('yeoman-generator')
    
    module.exports = class extends Generator { 
    
        writing () { 
            this.fs.write(
                this.destinationPath('temp.txt'),
                Math.random().toString()
            )
        }
    
    }

配置好index后 yarn link一下 使成为全局模块包,yoeman就可以找到我们的generator了

创建一个新的目录

yo sample  
提示 yo sample未安装  
npm install generator-sample  
安装后  
提示  
Error sample

primordials is not defined

切换 node8版本解决

踩了个大坑，搞了一晚上。记录一下  
当我运行yo sample的时候一直提示这个  
![在这里插入图片描述][20201126215507117.png_pic_center]  
排查了一晚上才知道，这里的sample 就是generator-sample也就是本项目，因为之前link了这个包，所以  
一直执行的都是这段代码  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70_pic_center 9]  
而不是这段代码

this.fs.write(
          this.destinationPath('temp.txt'),
          Math.random().toString()
        )

后面我把项目改了个名字，然后在重新yarn link 一下  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70_pic_center 10]  
创建新目录 然后进去 yo testsample 成功！

![在这里插入图片描述][20201126215743195.png_pic_center]  
这个自定义生成器其实就是npm模块，自己自定义好后，link到全局，然后在用到的地方 yo 你自定义项目名称就行了，也就是

generator-testsample -后面的testsample  
![在这里插入图片描述][20201124215948488.png_pic_center]

// 此文件作为 Generator 的核心入口
    // 需要导出一个继承自 Yeoman Generator 的类型
    // Yeoman Generator 在工作时会自动调用我们在此类型中定义的一些生命周期方法
    // 我们在这些方法中可以通过调用父类提供的一些工具方法实现一些功能，例如文件写入
    
    const Generator = require('yeoman-generator')
    
    module.exports = class extends Generator { 
      prompting () { 
        // Yeoman 在询问用户环节会自动调用此方法
        // 在此方法中可以调用父类的 prompt() 方法发出对用户的命令行询问
        return this.prompt([
          { 
            type: 'input',
            name: 'name',
            message: 'Your project name',
            default: this.appname // appname 为项目生成目录名称
          }
        ])
        .then(answers => { 
          // answers => { name: 'user input value' }
          this.answers = answers
        })
      }
      writing () { 
        // Yeoman 自动在生成文件阶段调用此方法
    
        // // 我们这里尝试往项目目录中写入文件
        // this.fs.write(
        // this.destinationPath('temp.txt'),
        // Math.random().toString()
        // )
    
        // -------------------------------------------------------
    
        // // 通过模板方式写入文件到目标目录
    
        // // 模板文件路径
        // const tmpl = this.templatePath('foo.txt')
        // // 输出目标路径
        // const output = this.destinationPath('foo.txt')
        // // 模板数据上下文
        // const context = { title: 'Hello zce~', success: false }
    
        // this.fs.copyTpl(tmpl, output, context)
    
        // -------------------------------------------------------
    
        // 模板文件路径
        const tmpl = this.templatePath('bar.html')
        // 输出目标路径
        const output = this.destinationPath('bar.html')
        // 模板数据上下文
        const context = this.answers
    
        this.fs.copyTpl(tmpl, output, context)
      }
    }

# 根据模板创建文件 #

创建template目录  
有了模板后就不需要 this.fs.write去生成文件了  
模板内容  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70_pic_center 11]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70_pic_center 12]

// 模板文件路径
        const tmpl = this.templatePath('bar.html')
        // 输出目标路径
        const output = this.destinationPath('bar.html')
        // 模板数据上下文
        const context = this.answers
    
        this.fs.copyTpl(tmpl, output, context)

配置好后 运行 yo mygenerator （我现在link的是刚刚创建的新项目）  
![在这里插入图片描述][20201127105424820.png_pic_center]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70_pic_center 13]

# 接收用户输入 #

# Vue Generator 案例 #

这次要批量生成提前准备好的文件，拷贝模板门到template目录  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70_pic_center 16]  
替换可能会发生变化的地方模板语法  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70_pic_center 17]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70_pic_center 18]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70_pic_center 19]  
遍历每一个文件  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70_pic_center 20]  
yarn link到全局  
这里又忘了给genenrator命名规则，一定要在前面加一个generator 不然link后找不到  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70_pic_center 21]  
![在这里插入图片描述][20201127111616680.png_pic_center]

转移到全新目录，运行刚刚创建的generator

报错  
![在这里插入图片描述][20201127111657771.png_pic_center]

解决：html里也有模板标记  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70_pic_center 22]  
转义一下就好了 <%%= 多加个百分号就ok

# 发布 Generator #

先上传git  
![在这里插入图片描述][20201124223505478.png_pic_center]  
yarn publish 发布  
版本回车默认 输入用户密码  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70_pic_center 23]  
注意 淘宝是只读镜像 会报错 要换回官方的  
![在这里插入图片描述][20201124223624422.png_pic_center]  
解决![在这里插入图片描述][20201124223636930.png_pic_center]  
yarn publish --registry=https://registry.yarnpkg.com  
发布失败  
第一次输入用户名的时候输错了：

解决：退出、重新输入：yarn logout  
继续报错  
![在这里插入图片描述][202011271202040.png_pic_center]  
解决:注册的npm账户需要邮箱验证  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70_pic_center 24]

访问  
https://www.npmjs.com/package/generator-my-vuegene  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70_pic_center 25]

想让你的脚手架 在yeoman官方出现 可以 在你的项目添加 yeoman-generator关键词就行了

# Plop 简介 #

![在这里插入图片描述][2020112422403197.png_pic_center]  
类似sub-generator  
一般使用在已有项目，创建同样的文件  
需求：开发的时候要经常创建相同的文件

# Plop 的基本使用 #

npm 安装plop  
npm i plop --dev  
唇膏就plopfile文件  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70_pic_center 26]

// Plop 入口文件，需要导出一个函数
    // 此函数接收一个 plop 对象，用于创建生成器任务
    
    module.exports = plop => { 
      plop.setGenerator('component', { 
        description: 'create a component',
        prompts: [
          { 
            type: 'input',
            name: 'name',
            message: 'component name',
            default: 'MyComponent'
          }
        ],
        actions: [
          { 
            type: 'add', // 代表添加文件
            path: 'src/components/{ {name}}/{ {name}}.js',//添加到哪
            templateFile: 'plop-templates/component.hbs'
          },
          { 
            type: 'add', // 代表添加文件
            path: 'src/components/{ {name}}/{ {name}}.css',
            templateFile: 'plop-templates/component.css.hbs'
          },
          { 
            type: 'add', // 代表添加文件
            path: 'src/components/{ {name}}/{ {name}}.test.js',
            templateFile: 'plop-templates/component.test.hbs'
          }
        ]
      })
    }

配置好后  
yarn plop component  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70_pic_center 27]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70_pic_center 28]  
总结  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70_pic_center 29]

# 脚手架的工作原理 #

询问》结合你的模板》生成文件

## 利用node开发一个小型的脚手架工具 ##

mkdir 新目录  
cd 新目录  
yarn i  
code . VSCODE打开目录

package添加bin字段 制定 cli的入口  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70_pic_center 30]  
添加cli.js  
![在这里插入图片描述][20201127161518880.png_pic_center]这个很重要一点要加

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70_pic_center 31]  
如果运行一直报不是内部或外部命令，也不是可运行的程序  
可以去npm全局文件夹检查一下是否link到了全局，这里踩了个坑，没有link到全局  
坑2 yarn unlink后 link也没办法link全局，要用npm link  
执行成功！  
![在这里插入图片描述][20201127153622946.png_pic_center]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70_pic_center 32]

询问需要 inquiry模块  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70_pic_center 33]  
数组的每个对象就是每次询问的动作  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70_pic_center 34]  
创建模板  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70_pic_center 35]  
明确模板目录

安装模板引擎  
![在这里插入图片描述][20201124225533700.png_pic_center]

#!/usr/bin/env node
    
    // Node CLI 应用入口文件必须要有这样的文件头
    // 如果是 Linux 或者 macOS 系统下还需要修改此文件的读写权限为 755
    // 具体就是通过 chmod 755 cli.js 实现修改
    
    // 脚手架的工作过程：
    // 1. 通过命令行交互询问用户问题
    // 2. 根据用户回答的结果生成文件
    
    const fs = require('fs')
    const path = require('path')
    const inquirer = require('inquirer')
    const ejs = require('ejs')
    
    inquirer.prompt([
      { 
        type: 'input',
        name: 'name',
        message: 'Project name?'
      }
    ])
    .then(anwsers => { 
      // console.log(anwsers)
      // 根据用户回答的结果生成文件
    
      // 模板目录
      const tmplDir = path.join(__dirname, 'templates')
      // 目标目录
      const destDir = process.cwd()
    
      // 将模板下的文件全部转换到目标目录
      //files 拿到文件夹下的文件 [ 'index.html', 'inner-temp' ]
      fs.readdir(tmplDir, (err, files) => { 
        if (err) throw err
        
        files.forEach(file => { 
          // 通过模板引擎渲染文件
          ejs.renderFile(path.join(tmplDir, file), anwsers, (err, result) => { 
            if (err) throw err
    
            // 将结果写入目标文件路径
            fs.writeFileSync(path.join(destDir, file), result)
          })
        })
      })
    })

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/ff64ff7e1cbb436b92b3d00595c58968.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221120/957f579edc0a4c2da76a546f95cfb0b6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70_pic_center 2]: https://img-blog.csdnimg.cn/20201124214723401.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ==,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70_pic_center 3]: https://img-blog.csdnimg.cn/2020112421483857.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ==,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70_pic_center 4]: https://img-blog.csdnimg.cn/20201124214850620.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ==,size_16,color_FFFFFF,t_70#pic_center
[2020112421505044.png_pic_center]: https://img-blog.csdnimg.cn/2020112421505044.png#pic_center
[20201124215136592.png_pic_center]: https://img-blog.csdnimg.cn/20201124215136592.png#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70_pic_center 5]: https://img-blog.csdnimg.cn/20201124215313285.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ==,size_16,color_FFFFFF,t_70#pic_center
[2020112421562413.png_pic_center]: https://img-blog.csdnimg.cn/2020112421562413.png#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70_pic_center 6]: https://img-blog.csdnimg.cn/20201124215633545.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ==,size_16,color_FFFFFF,t_70#pic_center
[20201126213532588.png_pic_center]: https://img-blog.csdnimg.cn/20201126213532588.png#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70_pic_center 7]: https://img-blog.csdnimg.cn/20201126213622276.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ==,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70_pic_center 8]: https://img-blog.csdnimg.cn/20201124220231968.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ==,size_16,color_FFFFFF,t_70#pic_center
[20201126215507117.png_pic_center]: https://img-blog.csdnimg.cn/20201126215507117.png#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70_pic_center 9]: https://img-blog.csdnimg.cn/20201126215626233.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ==,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70_pic_center 10]: https://img-blog.csdnimg.cn/20201126215706950.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ==,size_16,color_FFFFFF,t_70#pic_center
[20201126215743195.png_pic_center]: https://img-blog.csdnimg.cn/20201126215743195.png#pic_center
[20201124215948488.png_pic_center]: https://img-blog.csdnimg.cn/20201124215948488.png#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70_pic_center 11]: https://img-blog.csdnimg.cn/20201127105021946.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ==,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70_pic_center 12]: https://img-blog.csdnimg.cn/20201124220512932.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ==,size_16,color_FFFFFF,t_70#pic_center
[20201127105424820.png_pic_center]: https://img-blog.csdnimg.cn/20201127105424820.png#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70_pic_center 13]: https://img-blog.csdnimg.cn/20201127105332539.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ==,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70_pic_center 14]: https://img-blog.csdnimg.cn/20201124222304572.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ==,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70_pic_center 15]: https://img-blog.csdnimg.cn/20201124222514609.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ==,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70_pic_center 16]: https://img-blog.csdnimg.cn/20201124222702594.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ==,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70_pic_center 17]: https://img-blog.csdnimg.cn/2020112422274951.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ==,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70_pic_center 18]: https://img-blog.csdnimg.cn/2020112422282710.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ==,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70_pic_center 19]: https://img-blog.csdnimg.cn/20201124222835494.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ==,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70_pic_center 20]: https://img-blog.csdnimg.cn/20201124222909765.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ==,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70_pic_center 21]: https://img-blog.csdnimg.cn/20201127111607673.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ==,size_16,color_FFFFFF,t_70#pic_center
[20201127111616680.png_pic_center]: https://img-blog.csdnimg.cn/20201127111616680.png#pic_center
[20201127111657771.png_pic_center]: https://img-blog.csdnimg.cn/20201127111657771.png#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70_pic_center 22]: https://img-blog.csdnimg.cn/20201124223127117.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ==,size_16,color_FFFFFF,t_70#pic_center
[20201124223505478.png_pic_center]: https://img-blog.csdnimg.cn/20201124223505478.png#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70_pic_center 23]: https://img-blog.csdnimg.cn/20201124223534868.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ==,size_16,color_FFFFFF,t_70#pic_center
[20201124223624422.png_pic_center]: https://img-blog.csdnimg.cn/20201124223624422.png#pic_center
[20201124223636930.png_pic_center]: https://img-blog.csdnimg.cn/20201124223636930.png#pic_center
[202011271202040.png_pic_center]: https://img-blog.csdnimg.cn/202011271202040.png#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70_pic_center 24]: https://img-blog.csdnimg.cn/20201127120238324.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ==,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70_pic_center 25]: https://img-blog.csdnimg.cn/202011271206182.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ==,size_16,color_FFFFFF,t_70#pic_center
[2020112422403197.png_pic_center]: https://img-blog.csdnimg.cn/2020112422403197.png#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70_pic_center 26]: https://img-blog.csdnimg.cn/20201124224312889.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ==,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70_pic_center 27]: https://img-blog.csdnimg.cn/20201124224621618.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ==,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70_pic_center 28]: https://img-blog.csdnimg.cn/20201124224652923.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ==,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70_pic_center 29]: https://img-blog.csdnimg.cn/20201124224801338.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ==,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70_pic_center 30]: https://img-blog.csdnimg.cn/20201124225045945.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ==,size_16,color_FFFFFF,t_70#pic_center
[20201127161518880.png_pic_center]: https://img-blog.csdnimg.cn/20201127161518880.png#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70_pic_center 31]: https://img-blog.csdnimg.cn/20201124225139346.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ==,size_16,color_FFFFFF,t_70#pic_center
[20201127153622946.png_pic_center]: https://img-blog.csdnimg.cn/20201127153622946.png#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70_pic_center 32]: https://img-blog.csdnimg.cn/20201127153404377.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ==,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70_pic_center 33]: https://img-blog.csdnimg.cn/20201124225230766.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ==,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70_pic_center 34]: https://img-blog.csdnimg.cn/2020112422533723.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ==,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70_pic_center 35]: https://img-blog.csdnimg.cn/2020112422540497.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ==,size_16,color_FFFFFF,t_70#pic_center
[20201124225533700.png_pic_center]: https://img-blog.csdnimg.cn/20201124225533700.png#pic_center