19，vue-cli原理，请求，真实的模块开发，一步一不到实战脚手架开发。

于 2020-11-08 12:48:57 发布
阅读量372 收藏 1
点赞数
分类专栏： vue.js 前端 程序员 文章标签： node.js html5 reactjs css3 es6
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cyhlili100/article/details/109557928
版权
程序员 同时被 3 个专栏收录
24 篇文章 0 订阅
订阅专栏
vue.js
22 篇文章 0 订阅
订阅专栏
前端
18 篇文章 1 订阅
订阅专栏

2021【前端VUE框架】最新/最全/最细实战课程，真实的模块开发，一步一不到实战脚手架开发

学习目标：

提示：2021【前端VUE框架】最新/最全/最细实战课程，VUE56节进阶学习
重磅来袭：3个月掌握 vue 入门知识到实战学代码。

学习内容：

提示：本节第17节内容：vue-cli知识点
学习本节视频需要掌握的知识点：
1.HTML
2.CSS
3.JavaScript
那么关于上面三个知识点，视频学习地方在：html5+css3+js+jquery课程

学习时间：

提示：2020现在-2021.1月
一。无基础的同学，有充足的事件可以一天学习两节内容，要多写代码，一个案例和知识点最少要敲代码3到4遍：
二。有基础的同学可以自由安排事件哈：
1、 周一至周五晚上 7 点—晚上9点
2、 周六上午 9 点-上午 11 点
3、 周日下午 3 点-下午 6 点

学习产出：

提示：在网站上
例如：
1、 技术笔记 2 遍 ，在你自己的电脑学代码。
2、tofacebook.com, 发布技术文章 1 篇

本节知识点内容如下：

背景

在平时工作中会有遇到许多以相同模板定制的小程序，因此想自己建立一个生成模板的脚手架工具，以模板为基础构建对应的小程序，而平时的小程序都是用mpvue框架来写的，因此首先先参考一下Vue-cli的原理。知道原理之后，再定制自己的模板脚手架肯定是事半功倍的。

在说代码之前我们首先回顾一下Vue-cli的使用，我们通常使用的是webpack模板包，输入的是以下代码。

vue init webpack [project-name]

在执行这段代码之后，系统会自动下载模板包，随后会询问我们一些问题，比如模板名称，作者，是否需要使用eslint，使用npm或者yarn进行构建等等，当所有问题我们回答之后，就开始生成脚手架项目。

我们将源码下载下来，源码仓库点击这里，平时用的脚手架还是2.0版本，要注意，默认的分支是在dev上，dev上是3.0版本。

我们首先看一下package.json，在文件当中有这么一段话

{
  "bin": {
    "vue": "bin/vue",
    "vue-init": "bin/vue-init",
    "vue-list": "bin/vue-list"
  }
}

由此可见，我们使用的命令 vue init，应该是来自bin/vue-init这个文件，我们接下来看一下这个文件中的内容

bin/vue-init

const download = require('download-git-repo')
const program = require('commander')
const exists = require('fs').existsSync
const path = require('path')
const ora = require('ora')
const home = require('user-home')
const tildify = require('tildify')
const chalk = require('chalk')
const inquirer = require('inquirer')
const rm = require('rimraf').sync
const logger = require('../lib/logger')
const generate = require('../lib/generate')
const checkVersion = require('../lib/check-version')
const warnings = require('../lib/warnings')
const localPath = require('../lib/local-path')

download-git-repo 一个用于下载git仓库的项目的模块

download-git-repo 一个用于下载git仓库的项目的模块

commander 可以将文字输出到终端当中

download-git-repo 一个用于下载git仓库的项目的模块

commander 可以将文字输出到终端当中

fs 是node的文件读写的模块

download-git-repo 一个用于下载git仓库的项目的模块

commander 可以将文字输出到终端当中

fs 是node的文件读写的模块

path 模块提供了一些工具函数，用于处理文件与目录的路径

download-git-repo 一个用于下载git仓库的项目的模块

commander 可以将文字输出到终端当中

fs 是node的文件读写的模块

path 模块提供了一些工具函数，用于处理文件与目录的路径

ora 这个模块用于在终端里有显示载入动画

download-git-repo 一个用于下载git仓库的项目的模块

commander 可以将文字输出到终端当中

fs 是node的文件读写的模块

path 模块提供了一些工具函数，用于处理文件与目录的路径

ora 这个模块用于在终端里有显示载入动画

user-home 获取用户主目录的路径

download-git-repo 一个用于下载git仓库的项目的模块

commander 可以将文字输出到终端当中

fs 是node的文件读写的模块

path 模块提供了一些工具函数，用于处理文件与目录的路径

ora 这个模块用于在终端里有显示载入动画

user-home 获取用户主目录的路径

tildify 将绝对路径转换为波形路径 比如/Users/sindresorhus/dev → ~/dev

download-git-repo 一个用于下载git仓库的项目的模块

commander 可以将文字输出到终端当中

fs 是node的文件读写的模块

path 模块提供了一些工具函数，用于处理文件与目录的路径

ora 这个模块用于在终端里有显示载入动画

user-home 获取用户主目录的路径

tildify 将绝对路径转换为波形路径 比如/Users/sindresorhus/dev → ~/dev

inquirer 是一个命令行的回答的模块，你可以自己设定终端的问题，然后对这些回答给出相应的处理

download-git-repo 一个用于下载git仓库的项目的模块

commander 可以将文字输出到终端当中

fs 是node的文件读写的模块

path 模块提供了一些工具函数，用于处理文件与目录的路径

ora 这个模块用于在终端里有显示载入动画

user-home 获取用户主目录的路径

tildify 将绝对路径转换为波形路径 比如/Users/sindresorhus/dev → ~/dev

inquirer 是一个命令行的回答的模块，你可以自己设定终端的问题，然后对这些回答给出相应的处理

rimraf 是一个可以使用 UNIX 命令 rm -rf的模块

download-git-repo 一个用于下载git仓库的项目的模块

commander 可以将文字输出到终端当中

fs 是node的文件读写的模块

path 模块提供了一些工具函数，用于处理文件与目录的路径

ora 这个模块用于在终端里有显示载入动画

user-home 获取用户主目录的路径

tildify 将绝对路径转换为波形路径 比如/Users/sindresorhus/dev → ~/dev

inquirer 是一个命令行的回答的模块，你可以自己设定终端的问题，然后对这些回答给出相应的处理

rimraf 是一个可以使用 UNIX 命令 rm -rf的模块

剩下的本地路径的模块其实都是一些工具类，等用到的时候我们再来讲

// 是否为本地路径的方法 主要是判断模板路径当中是否存在 `./`
const isLocalPath = localPath.isLocalPath
// 获取模板路径的方法 如果路径参数是绝对路径 则直接返回 如果是相对的 则根据当前路径拼接
const getTemplatePath = localPath.getTemplatePath

/**
 * Usage.
 */
program
  .usage('<template-name> [project-name]')
  .option('-c, --clone', 'use git clone')
  .option('--offline', 'use cached template')
/**
 * Help.
 */

program.on('--help', () => {
  console.log('  Examples:')
  console.log()
  console.log(chalk.gray('    # create a new project with an official template'))
  console.log('    $ vue init webpack my-project')
  console.log()
  console.log(chalk.gray('    # create a new project straight from a github template'))
  console.log('    $ vue init username/repo my-project')
  console.log()
})

/**
 * Help.
 */
function help () {
  program.parse(process.argv)
  if (program.args.length < 1) return program.help()
}
help()

这部分代码声明了vue init用法，如果在终端当中 输入 vue init --help或者跟在vue init 后面的参数长度小于1，也会输出下面的描述

  Usage: vue-init <template-name> [project-name]
  Options:
   -c, --clone  use git clone
    --offline    use cached template
    -h, --help   output usage information
  Examples:
    # create a new project with an official template
    $ vue init webpack my-project
    # create a new project straight from a github template
    $ vue init username/repo my-project

接下来是一些变量的获取

/**
 * Settings.
 */
// 模板路径

let template = program.args[0]
const hasSlash = template.indexOf('/') > -1
// 项目名称
const rawName = program.args[1]
const inPlace = !rawName || rawName === '.'
// 如果不存在项目名称或项目名称输入的'.' 则name取的是 当前文件夹的名称
const name = inPlace ? path.relative('../', process.cwd()) : rawName
// 输出路径
const to = path.resolve(rawName || '.')
// 是否需要用到 git clone

const clone = program.clone || false

// tmp为本地模板路径 如果 是离线状态 那么模板路径取本地的
const tmp = path.join(home, '.vue-templates', template.replace(/[\/:]/g, '-'))
if (program.offline) {
  console.log(`> Use cached template at ${chalk.yellow(tildify(tmp))}`)
  template = tmp
}

接下来主要是根据模板名称，来下载并生产模板，如果是本地的模板路径，就直接生成。

/**
 * Check, download and generate the project.
 */

function run () {
  // 判断是否是本地模板路径
 if (isLocalPath(template)) {
    // 获取模板地址
   const templatePath = getTemplatePath(template)

   // 如果本地模板路径存在 则开始生成模板
    if (exists(templatePath)) {
      generate(name, templatePath, to, err => {
        if (err) logger.fatal(err)

       console.log()
      logger.success('Generated "%s".', name)
      })

    } else {
      logger.fatal('Local template "%s" not found.', template)
    }
  } else {
    // 非本地模板路径 则先检查版本
    checkVersion(() => {
      // 路径中是否 包含'/'
      // 如果没有 则进入这个逻辑
      if (!hasSlash) {
        // 拼接路径 'vuejs-tempalte'下的都是官方的模板包
        const officialTemplate = 'vuejs-templates/' + template

        // 如果路径当中存在 '#'则直接下载

        if (template.indexOf('#') !== -1) {
		downloadAndGenerate(officialTemplate)
        } else {

          // 如果不存在 -2.0的字符串 则会输出 模板废弃的相关提示

          if (template.indexOf('-2.0') !== -1) {

            warnings.v2SuffixTemplatesDeprecated(template, inPlace ? '' : name)

            return

          }

          // 下载并生产模板
          downloadAndGenerate(officialTemplate)
        }
      } else {
        // 下载并生生成模板
        downloadAndGenerate(template)
      }

    })

  }
}

我们来看下 downloadAndGenerate这个方法

/**
 * Download a generate from a template repo.
 *
 * @param {String} template
 */

function downloadAndGenerate (template) {
  // 执行加载动画
  const spinner = ora('downloading template')
  spinner.start()
  // Remove if local template exists
  // 删除本地存在的模板
  if (exists(tmp)) rm(tmp)
  // template参数为目标地址 tmp为下载地址 clone参数代表是否需要clone
  download(template, tmp, { clone }, err => {
    // 结束加载动画
    spinner.stop()
    // 如果下载出错 输出日志
    if (err) logger.fatal('Failed to download repo ' + template + ': ' + err.message.trim())
    // 模板下载成功之后进入生产模板的方法中 这里我们再进一步讲
    generate(name, tmp, to, err => {
      if (err) logger.fatal(err)
      console.log()
      logger.success('Generated "%s".', name)
    })
  })
}

到这里为止，bin/vue-init就讲完了，该文件做的最主要的一件事情，就是根据模板名称，来下载生成模板，但是具体下载和生成的模板的方法并不在里面。

下载模板

下载模板用的download方法是属于download-git-repo模块的。

最基础的用法为如下用法，这里的参数很好理解，第一个参数为仓库地址，第二个为输出地址，第三个是否需要 git clone，带四个为回调参数

download('flipxfx/download-git-repo-fixture', 'test/tmp',{ clone: true }, function (err) {
  console.log(err ? 'Error' : 'Success')
})

在上面的run方法中有提到一个#的字符串实际就是这个模块下载分支模块的用法

download('bitbucket:flipxfx/download-git-repo-fixture#my-branch', 'test/tmp', { clone: true }, function (err) {
  console.log(err ? 'Error' : 'Success')
})

生成模板

模板生成generate方法在generate.js当中，我们继续来看一下

generate.js

const chalk = require('chalk')

const Metalsmith = require('metalsmith')
const Handlebars = require('handlebars')
const async = require('async')
const render = require('consolidate').handlebars.render
const path = require('path')
const multimatch = require('multimatch')
const getOptions = require('./options')
const ask = require('./ask')
const filter = require('./filter')
const logger = require('./logger')

chalk 是一个可以让终端输出内容变色的模块

chalk 是一个可以让终端输出内容变色的模块

Metalsmith是一个静态网站（博客，项目）的生成库

chalk 是一个可以让终端输出内容变色的模块

Metalsmith是一个静态网站（博客，项目）的生成库

handlerbars 是一个模板编译器，通过template和json，输出一个html

chalk 是一个可以让终端输出内容变色的模块

Metalsmith是一个静态网站（博客，项目）的生成库

handlerbars 是一个模板编译器，通过template和json，输出一个html

async 异步处理模块，有点类似让方法变成一个线程

chalk 是一个可以让终端输出内容变色的模块

Metalsmith是一个静态网站（博客，项目）的生成库

handlerbars 是一个模板编译器，通过template和json，输出一个html

async 异步处理模块，有点类似让方法变成一个线程

consolidate 模板引擎整合库

chalk 是一个可以让终端输出内容变色的模块

Metalsmith是一个静态网站（博客，项目）的生成库

handlerbars 是一个模板编译器，通过template和json，输出一个html

async 异步处理模块，有点类似让方法变成一个线程

consolidate 模板引擎整合库

multimatch 一个字符串数组匹配的库

chalk 是一个可以让终端输出内容变色的模块

Metalsmith是一个静态网站（博客，项目）的生成库

handlerbars 是一个模板编译器，通过template和json，输出一个html

async 异步处理模块，有点类似让方法变成一个线程

consolidate 模板引擎整合库

multimatch 一个字符串数组匹配的库

options 是一个自己定义的配置项文件

随后注册了2个渲染器，类似于vue中的 vif velse的条件渲染

// register handlebars helper

Handlebars.registerHelper('if_eq', function (a, b, opts) {
  return a === b
    ? opts.fn(this)
  : opts.inverse(this)
})

Handlebars.registerHelper('unless_eq', function (a, b, opts) {

  return a === b
    ? opts.inverse(this)
    : opts.fn(this)
})

接下来看关键的generate方法

module.exports = function generate (name, src, dest, done) {
  // 读取了src目录下的 配置文件信息， 同时将 name auther(当前git用户) 赋值到了 opts 当中
  const opts = getOptions(name, src)

  // 拼接了目录 src/{template} 要在这个目录下生产静态文件

  const metalsmith = Metalsmith(path.join(src, 'template'))

  // 将metalsmitch中的meta 与 三个属性合并起来 形成 data

  const data = Object.assign(metalsmith.metadata(), {
    destDirName: name,
    inPlace: dest === process.cwd(),
    noEscape: true
  })

  // 遍历 meta.js元数据中的helpers对象，注册渲染模板数据
  // 分别指定了 if_or 和   template_version内容
  opts.helpers && Object.keys(opts.helpers).map(key => {
    Handlebars.registerHelper(key, opts.helpers[key])
  })

  const helpers = { chalk, logger }
  // 将metalsmith metadata 数据 和 { isNotTest, isTest 合并 }
  if (opts.metalsmith && typeof opts.metalsmith.before === 'function') {
    opts.metalsmith.before(metalsmith, opts, helpers)
  }

  // askQuestions是会在终端里询问一些问题
  // 名称 描述 作者 是要什么构建 在meta.js 的opts.prompts当中
  // filterFiles 是用来过滤文件
  // renderTemplateFiles 是一个渲染插件
  metalsmith.use(askQuestions(opts.prompts))
    .use(filterFiles(opts.filters))
    .use(renderTemplateFiles(opts.skipInterpolation))
  if (typeof opts.metalsmith === 'function') {
    opts.metalsmith(metalsmith, opts, helpers)
  } else if (opts.metalsmith && typeof opts.metalsmith.after === 'function') {
    opts.metalsmith.after(metalsmith, opts, helpers)
  }
  // clean方法是设置在写入之前是否删除原先目标目录 默认为true
  // source方法是设置原路径
  // destination方法就是设置输出的目录
  // build方法执行构建
  metalsmith.clean(false)
    .source('.') // start from template root instead of `./src` which is Metalsmith's default for `source`
    .destination(dest)

    .build((err, files) => {

     done(err)
      if (typeof opts.complete === 'function') {
        // 当生成完毕之后执行 meta.js当中的 opts.complete方法
        const helpers = { chalk, logger, files }
        opts.complete(data, helpers)
      } else {
        logMessage(opts.completeMessage, data)
      }
    })

  return data
}

meta.js

接下来看以下complete方法

complete: function(data, { chalk }) {
    const green = chalk.green
    // 会将已有的packagejoson 依赖声明重新排序
    sortDependencies(data, green)
    const cwd = path.join(process.cwd(), data.inPlace ? '' : data.destDirName)
    // 是否需要自动安装 这个在之前构建前的询问当中 是我们自己选择的
    if (data.autoInstall) {
     // 在终端中执行 install 命令
     installDependencies(cwd, data.autoInstall, green)
        .then(() => {
          return runLintFix(cwd, data, green)
        })
        .then(() => {
          printMessage(data, green)
        })
        .catch(e => {
         console.log(chalk.red('Error:'), e)
      })
    } else {
      printMessage(data, chalk)
    }
  }

构建自定义模板

在看完vue-init命令的原理之后，其实定制自定义的模板是很简单的事情，我们只要做2件事

  • 首先我们需要有一个自己模板项目
  • 如果需要自定义一些变量，就需要在模板的meta.js当中定制

由于下载模块使用的是download-git-repo模块，它本身是支持在github，gitlab，bitucket上下载的，到时候我们只需要将定制好的模板项目放到git远程仓库上即可。

由于我需要定义的是小程序的开发模板，mpvue本身也有一个quickstart的模板，那么我们就在它的基础上进行定制，首先我们将它fork下来，新建一个custom分支，在这个分支上进行定制。

我们需要定制的地方有用到的依赖库，需要额外用到less以及wxparse

我们需要定制的地方有用到的依赖库，需要额外用到less以及wxparse

因此我们在 template/package.json当中进行添加

{
  // ... 部分省略
  "dependencies": {
    "mpvue": "^1.0.11"{{#vuex}},
    "vuex": "^3.0.1"{{/vuex}}
 },
  "devDependencies": {
   // ... 省略
    // 这是添加的包
    "less": "^3.0.4",
    "less-loader": "^4.1.0",
    "mpvue-wxparse": "^0.6.5"
  }
}

除此之外，我们还需要定制一下eslint规则，由于只用到standard，因此我们在meta.js当中 可以将 airbnb风格的提问删除

"lintConfig": {
 "when": "lint",
  "type": "list",
  "message": "Pick an ESLint preset",
  "choices": [
    {
     "name": "Standard (https://github.com/feross/standard)",
      "value": "standard",
      "short": "Standard"
    },

    {
      "name": "none (configure it yourself)",
      "value": "none",
      "short": "none"
    }
  ]
}

.eslinttrc.js

'rules': {
    {{#if_eq lintConfig "standard"}}

    "camelcase": 0,
    // allow paren-less arrow functions
    "arrow-parens": 0,
    "space-before-function-paren": 0,
    // allow async-await
   "generator-star-spacing": 0,
    {{/if_eq}}
   {{#if_eq lintConfig "airbnb"}}
    // don't require .vue extension when importing
    'import/extensions': ['error', 'always', {
      'js': 'never',
      'vue': 'never'
    }],
    // allow optionalDependencies
    'import/no-extraneous-dependencies': ['error', {
      'optionalDependencies': ['test/unit/index.js']
    }],
    {{/if_eq}}
    // allow debugger during development
    'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0
  }

最后我们在构建时的提问当中，再设置一个小程序名称的提问，而这个名称会设置到导航的标题当中。

最后我们在构建时的提问当中，再设置一个小程序名称的提问，而这个名称会设置到导航的标题当中。

提问是在meta.js当中添加

"prompts": {
    "name": {
     "type": "string",
      "required": true,
      "message": "Project name"
    },
    // 新增提问
    "appName": {
      "type": "string",
      "required": true,
      "message": "App name"
    }
}

main.json

{
  "pages": [
    "pages/index/main",
    "pages/counter/main",
    "pages/logs/main"
  ],
  "window": {
    "backgroundTextStyle": "light",
   "navigationBarBackgroundColor": "#fff",
    // 根据提问设置标题
    "navigationBarTitleText": "{{appName}}",
    "navigationBarTextStyle": "black"
  }
}

最后我们来尝试一下我们自己的模板

vue init Baifann/mpvue-quickstart#custom min-app-project

总结

以上模板的定制是十分简单的，在实际项目上肯定更为复杂，但是按照这个思路应该都是可行的。比如说将一些自行封装的组件也放置到项目当中等等，这里就不再细说。原理解析都是基于vue-cli 2.0的，但实际上 3.0也已经整装待发，如果后续有机会，深入了解之后，再和大家分享，谢谢大家。

背景

在平时工作中会有遇到许多以相同模板定制的小程序，因此想自己建立一个生成模板的脚手架工具，以模板为基础构建对应的小程序，而平时的小程序都是用mpvue框架来写的，因此首先先参考一下Vue-cli的原理。知道原理之后，再定制自己的模板脚手架肯定是事半功倍的。

在说代码之前我们首先回顾一下Vue-cli的使用，我们通常使用的是webpack模板包，输入的是以下代码。

vue init webpack [project-name]

在执行这段代码之后，系统会自动下载模板包，随后会询问我们一些问题，比如模板名称，作者，是否需要使用eslint，使用npm或者yarn进行构建等等，当所有问题我们回答之后，就开始生成脚手架项目。

我们将源码下载下来，源码仓库点击这里，平时用的脚手架还是2.0版本，要注意，默认的分支是在dev上，dev上是3.0版本。

我们首先看一下package.json，在文件当中有这么一段话

{
  "bin": {
    "vue": "bin/vue",
    "vue-init": "bin/vue-init",
    "vue-list": "bin/vue-list"
  }
}

由此可见，我们使用的命令 vue init，应该是来自bin/vue-init这个文件，我们接下来看一下这个文件中的内容

bin/vue-init

const download = require('download-git-repo')
const program = require('commander')
const exists = require('fs').existsSync
const path = require('path')
const ora = require('ora')
const home = require('user-home')
const tildify = require('tildify')
const chalk = require('chalk')
const inquirer = require('inquirer')
const rm = require('rimraf').sync
const logger = require('../lib/logger')
const generate = require('../lib/generate')
const checkVersion = require('../lib/check-version')
const warnings = require('../lib/warnings')
const localPath = require('../lib/local-path')

download-git-repo 一个用于下载git仓库的项目的模块

download-git-repo 一个用于下载git仓库的项目的模块 commander 可以将文字输出到终端当中

download-git-repo 一个用于下载git仓库的项目的模块 commander 可以将文字输出到终端当中 fs 是node的文件读写的模块

download-git-repo 一个用于下载git仓库的项目的模块 commander 可以将文字输出到终端当中 fs 是node的文件读写的模块 path 模块提供了一些工具函数，用于处理文件与目录的路径

download-git-repo 一个用于下载git仓库的项目的模块 commander 可以将文字输出到终端当中 fs 是node的文件读写的模块 path 模块提供了一些工具函数，用于处理文件与目录的路径 ora 这个模块用于在终端里有显示载入动画

download-git-repo 一个用于下载git仓库的项目的模块 commander 可以将文字输出到终端当中 fs 是node的文件读写的模块 path 模块提供了一些工具函数，用于处理文件与目录的路径 ora 这个模块用于在终端里有显示载入动画 user-home 获取用户主目录的路径

download-git-repo 一个用于下载git仓库的项目的模块 commander 可以将文字输出到终端当中 fs 是node的文件读写的模块 path 模块提供了一些工具函数，用于处理文件与目录的路径 ora 这个模块用于在终端里有显示载入动画 user-home 获取用户主目录的路径 tildify 将绝对路径转换为波形路径 比如/Users/sindresorhus/dev → ~/dev

download-git-repo 一个用于下载git仓库的项目的模块 commander 可以将文字输出到终端当中 fs 是node的文件读写的模块 path 模块提供了一些工具函数，用于处理文件与目录的路径 ora 这个模块用于在终端里有显示载入动画 user-home 获取用户主目录的路径 tildify 将绝对路径转换为波形路径 比如/Users/sindresorhus/dev → ~/dev inquirer 是一个命令行的回答的模块，你可以自己设定终端的问题，然后对这些回答给出相应的处理

download-git-repo 一个用于下载git仓库的项目的模块 commander 可以将文字输出到终端当中 fs 是node的文件读写的模块 path 模块提供了一些工具函数，用于处理文件与目录的路径 ora 这个模块用于在终端里有显示载入动画 user-home 获取用户主目录的路径 tildify 将绝对路径转换为波形路径 比如/Users/sindresorhus/dev → ~/dev inquirer 是一个命令行的回答的模块，你可以自己设定终端的问题，然后对这些回答给出相应的处理 rimraf 是一个可以使用 UNIX 命令 rm -rf的模块

download-git-repo 一个用于下载git仓库的项目的模块 commander 可以将文字输出到终端当中 fs 是node的文件读写的模块 path 模块提供了一些工具函数，用于处理文件与目录的路径 ora 这个模块用于在终端里有显示载入动画 user-home 获取用户主目录的路径 tildify 将绝对路径转换为波形路径 比如/Users/sindresorhus/dev → ~/dev inquirer 是一个命令行的回答的模块，你可以自己设定终端的问题，然后对这些回答给出相应的处理 rimraf 是一个可以使用 UNIX 命令 rm -rf的模块 剩下的本地路径的模块其实都是一些工具类，等用到的时候我们再来讲

// 是否为本地路径的方法 主要是判断模板路径当中是否存在 `./`
const isLocalPath = localPath.isLocalPath
// 获取模板路径的方法 如果路径参数是绝对路径 则直接返回 如果是相对的 则根据当前路径拼接
const getTemplatePath = localPath.getTemplatePath
/**
 * Usage.
 */
program
  .usage('<template-name> [project-name]')
  .option('-c, --clone', 'use git clone')
  .option('--offline', 'use cached template')
/**
 * Help.
 */

program.on('–help', () => {
console.log(' Examples:')
console.log()
console.log(chalk.gray(' # create a new project with an official template'))
console.log(' $ vue init webpack my-project')
console.log()
console.log(chalk.gray(' # create a new project straight from a github template'))
console.log(' $ vue init username/repo my-project')
console.log()
})

/**

  • Help.
    */
    function help () {
    program.parse(process.argv)
    if (program.args.length < 1) return program.help()
    }
    help()

    这部分代码声明了vue init用法，如果在终端当中 输入 vue init --help或者跟在vue init 后面的参数长度小于1，也会输出下面的描述

      Usage: vue-init <template-name> [project-name]
    
Options:
    
-c, --clone  use git clone
    
–offline    use cached template
    
-h, --help   output usage information
    
Examples:
    create a new project with an official template
    
$ vue init webpack my-project
    create a new project straight from a github template
    
$ vue init username/repo my-project

    接下来是一些变量的获取

    /**
  • Settings.
    */
    // 模板路径

let template = program.args[0]
const hasSlash = template.indexOf('/') > -1
// 项目名称
const rawName = program.args[1]
const inPlace = !rawName || rawName === '.'
// 如果不存在项目名称或项目名称输入的'.' 则name取的是 当前文件夹的名称
const name = inPlace ? path.relative('…/', process.cwd()) : rawName
// 输出路径
const to = path.resolve(rawName || '.')
// 是否需要用到 git clone

const clone = program.clone || false

// tmp为本地模板路径 如果 是离线状态 那么模板路径取本地的
const tmp = path.join(home, ‘.vue-templates’, template.replace(/[/:]/g, ‘-’))
if (program.offline) {
console.log(&gt; Use cached template at ${chalk.yellow(tildify(tmp))})
template = tmp
}

接下来主要是根据模板名称，来下载并生产模板，如果是本地的模板路径，就直接生成。

/**
  • Check, download and generate the project.
    */

function run () {
// 判断是否是本地模板路径
if (isLocalPath(template)) {
// 获取模板地址
const templatePath = getTemplatePath(template)

// 如果本地模板路径存在 则开始生成模板
if (exists(templatePath)) {
generate(name, templatePath, to, err => {
if (err) logger.fatal(err)

   console.log()
  logger.success(&#39;Generated &quot;%s&quot;.&#39;, name)
  })

} else {
  logger.fatal(&#39;Local template &quot;%s&quot; not found.&#39;, template)
}

} else {
// 非本地模板路径 则先检查版本
checkVersion(() => {
// 路径中是否 包含'/'
// 如果没有 则进入这个逻辑
if (!hasSlash) {
// 拼接路径 'vuejs-tempalte'下的都是官方的模板包
const officialTemplate = 'vuejs-templates/' + template

    // 如果路径当中存在 &#39;#&#39;则直接下载

    if (template.indexOf(&#39;#&#39;) !== -1) {
	downloadAndGenerate(officialTemplate)
    } else {

      // 如果不存在 -2.0的字符串 则会输出 模板废弃的相关提示

      if (template.indexOf(&#39;-2.0&#39;) !== -1) {

        warnings.v2SuffixTemplatesDeprecated(template, inPlace ? &#39;&#39; : name)

        return

      }

      // 下载并生产模板
      downloadAndGenerate(officialTemplate)
    }
  } else {
    // 下载并生生成模板
    downloadAndGenerate(template)
  }

})

}
}

我们来看下 downloadAndGenerate这个方法

/**
  • Download a generate from a template repo.
  • @param {String} template
    */

function downloadAndGenerate (template) {
// 执行加载动画
const spinner = ora(‘downloading template’)
spinner.start()
// Remove if local template exists
// 删除本地存在的模板
if (exists(tmp)) rm(tmp)
// template参数为目标地址 tmp为下载地址 clone参数代表是否需要clone
download(template, tmp, { clone }, err => {
// 结束加载动画
spinner.stop()
// 如果下载出错 输出日志
if (err) logger.fatal('Failed to download repo ’ + template + ': ’ + err.message.trim())
// 模板下载成功之后进入生产模板的方法中 这里我们再进一步讲
generate(name, tmp, to, err => {
if (err) logger.fatal(err)
console.log()
logger.success(‘Generated “%s”.’, name)
})
})
}

到这里为止，bin/vue-init就讲完了，该文件做的最主要的一件事情，就是根据模板名称，来下载生成模板，但是具体下载和生成的模板的方法并不在里面。

下载模板

下载模板用的download方法是属于download-git-repo模块的。

最基础的用法为如下用法，这里的参数很好理解，第一个参数为仓库地址，第二个为输出地址，第三个是否需要 git clone，带四个为回调参数

download(‘flipxfx/download-git-repo-fixture’, ‘test/tmp’,{ clone: true }, function (err) {

console.log(err ? ‘Error’ : ‘Success’)

})

在上面的run方法中有提到一个#的字符串实际就是这个模块下载分支模块的用法

download(‘bitbucket:flipxfx/download-git-repo-fixture#my-branch’, ‘test/tmp’, { clone: true }, function (err) {

console.log(err ? ‘Error’ : ‘Success’)

})

生成模板

模板生成generate方法在generate.js当中，我们继续来看一下

generate.js

const chalk = require(‘chalk’)

const Metalsmith = require(‘metalsmith’)
const Handlebars = require(‘handlebars’)
const async = require(‘async’)
const render = require(‘consolidate’).handlebars.render
const path = require(‘path’)
const multimatch = require(‘multimatch’)
const getOptions = require(’./options’)
const ask = require(’./ask’)
const filter = require(’./filter’)
const logger = require(’./logger’)

chalk 是一个可以让终端输出内容变色的模块

chalk 是一个可以让终端输出内容变色的模块
Metalsmith是一个静态网站（博客，项目）的生成库

chalk 是一个可以让终端输出内容变色的模块
Metalsmith是一个静态网站（博客，项目）的生成库
handlerbars 是一个模板编译器，通过template和json，输出一个html

chalk 是一个可以让终端输出内容变色的模块
Metalsmith是一个静态网站（博客，项目）的生成库
handlerbars 是一个模板编译器，通过template和json，输出一个html
async 异步处理模块，有点类似让方法变成一个线程

chalk 是一个可以让终端输出内容变色的模块
Metalsmith是一个静态网站（博客，项目）的生成库
handlerbars 是一个模板编译器，通过template和json，输出一个html
async 异步处理模块，有点类似让方法变成一个线程
consolidate 模板引擎整合库

chalk 是一个可以让终端输出内容变色的模块
Metalsmith是一个静态网站（博客，项目）的生成库
handlerbars 是一个模板编译器，通过template和json，输出一个html
async 异步处理模块，有点类似让方法变成一个线程
consolidate 模板引擎整合库
multimatch 一个字符串数组匹配的库

chalk 是一个可以让终端输出内容变色的模块
Metalsmith是一个静态网站（博客，项目）的生成库
handlerbars 是一个模板编译器，通过template和json，输出一个html
async 异步处理模块，有点类似让方法变成一个线程
consolidate 模板引擎整合库
multimatch 一个字符串数组匹配的库
options 是一个自己定义的配置项文件

随后注册了2个渲染器，类似于vue中的 vif velse的条件渲染

// register handlebars helper

Handlebars.registerHelper('if_eq', function (a, b, opts) {
return a === b
? opts.fn(this)
: opts.inverse(this)
})

Handlebars.registerHelper('unless_eq', function (a, b, opts) {

return a === b
? opts.inverse(this)
: opts.fn(this)
})

接下来看关键的generate方法

module.exports = function generate (name, src, dest, done) {

// 读取了src目录下的 配置文件信息， 同时将 name auther(当前git用户) 赋值到了 opts 当中

const opts = getOptions(name, src)

// 拼接了目录 src/{template} 要在这个目录下生产静态文件

const metalsmith = Metalsmith(path.join(src, 'template'))

// 将metalsmitch中的meta 与 三个属性合并起来 形成 data

const data = Object.assign(metalsmith.metadata(), {
destDirName: name,
inPlace: dest === process.cwd(),
noEscape: true
})

// 遍历 meta.js元数据中的helpers对象，注册渲染模板数据
// 分别指定了 if_or 和 template_version内容
opts.helpers && Object.keys(opts.helpers).map(key => {
Handlebars.registerHelper(key, opts.helpers[key])
})

const helpers = { chalk, logger }
// 将metalsmith metadata 数据 和 { isNotTest, isTest 合并 }
if (opts.metalsmith && typeof opts.metalsmith.before === 'function') {
opts.metalsmith.before(metalsmith, opts, helpers)
}

// askQuestions是会在终端里询问一些问题
// 名称 描述 作者 是要什么构建 在meta.js 的opts.prompts当中
// filterFiles 是用来过滤文件
// renderTemplateFiles 是一个渲染插件
metalsmith.use(askQuestions(opts.prompts))
.use(filterFiles(opts.filters))
.use(renderTemplateFiles(opts.skipInterpolation))
if (typeof opts.metalsmith === 'function') {
opts.metalsmith(metalsmith, opts, helpers)
} else if (opts.metalsmith && typeof opts.metalsmith.after === 'function') {
opts.metalsmith.after(metalsmith, opts, helpers)
}
// clean方法是设置在写入之前是否删除原先目标目录 默认为true
// source方法是设置原路径
// destination方法就是设置输出的目录
// build方法执行构建
metalsmith.clean(false)
.source('.') // start from template root instead of ./src which is Metalsmith's default for source
.destination(dest)

.build((err, files) =&gt; {

 done(err)
  if (typeof opts.complete === &#39;function&#39;) {
    // 当生成完毕之后执行 meta.js当中的 opts.complete方法
    const helpers = { chalk, logger, files }
    opts.complete(data, helpers)
  } else {
    logMessage(opts.completeMessage, data)
  }
})

return data
}

meta.js

接下来看以下complete方法

complete: function(data, { chalk }) {

const green = chalk.green

// 会将已有的packagejoson 依赖声明重新排序

sortDependencies(data, green)

const cwd = path.join(process.cwd(), data.inPlace ? ‘’ : data.destDirName)

// 是否需要自动安装 这个在之前构建前的询问当中 是我们自己选择的

if (data.autoInstall) {

// 在终端中执行 install 命令

installDependencies(cwd, data.autoInstall, green)

.then(() => {

return runLintFix(cwd, data, green)

})

.then(() => {

printMessage(data, green)

})

.catch(e => {

console.log(chalk.red(‘Error:’), e)

})

} else {

printMessage(data, chalk)

}

}

构建自定义模板

在看完vue-init命令的原理之后，其实定制自定义的模板是很简单的事情，我们只要做2件事

  • 首先我们需要有一个自己模板项目
  • 如果需要自定义一些变量，就需要在模板的meta.js当中定制

由于下载模块使用的是download-git-repo模块，它本身是支持在github，gitlab，bitucket上下载的，到时候我们只需要将定制好的模板项目放到git远程仓库上即可。

由于我需要定义的是小程序的开发模板，mpvue本身也有一个quickstart的模板，那么我们就在它的基础上进行定制，首先我们将它fork下来，新建一个custom分支，在这个分支上进行定制。

我们需要定制的地方有用到的依赖库，需要额外用到less以及wxparse

我们需要定制的地方有用到的依赖库，需要额外用到less以及wxparse
因此我们在 template/package.json当中进行添加

{

// … 部分省略

“dependencies”: {

“mpvue”: “^1.0.11”{{#vuex}},

“vuex”: “^3.0.1”{{/vuex}}

},

“devDependencies”: {

// … 省略

// 这是添加的包

“less”: “^3.0.4”,

“less-loader”: “^4.1.0”,

“mpvue-wxparse”: “^0.6.5”

}

}

除此之外，我们还需要定制一下eslint规则，由于只用到standard，因此我们在meta.js当中 可以将 airbnb风格的提问删除

"lintConfig": {

“when”: “lint”,

“type”: “list”,

“message”: “Pick an ESLint preset”,

“choices”: [

{

“name”: “Standard (https://github.com/feross/standard)”,

“value”: “standard”,

“short”: “Standard”

},

{
  &quot;name&quot;: &quot;none (configure it yourself)&quot;,
  &quot;value&quot;: &quot;none&quot;,
  &quot;short&quot;: &quot;none&quot;
}

]
}

.eslinttrc.js

’rules’: {

{{#if_eq lintConfig “standard”}}

&quot;camelcase&quot;: 0,
// allow paren-less arrow functions
&quot;arrow-parens&quot;: 0,
&quot;space-before-function-paren&quot;: 0,
// allow async-await

“generator-star-spacing”: 0,
{{/if_eq}}
{{#if_eq lintConfig “airbnb”}}
// don’t require .vue extension when importing
‘import/extensions’: [‘error’, ‘always’, {
‘js’: ‘never’,
‘vue’: ‘never’
}],
// allow optionalDependencies
‘import/no-extraneous-dependencies’: [‘error’, {
‘optionalDependencies’: [‘test/unit/index.js’]
}],
{{/if_eq}}
// allow debugger during development
‘no-debugger’: process.env.NODE_ENV === ‘production’ ? 2 : 0
}

最后我们在构建时的提问当中，再设置一个小程序名称的提问，而这个名称会设置到导航的标题当中。

最后我们在构建时的提问当中，再设置一个小程序名称的提问，而这个名称会设置到导航的标题当中。
提问是在meta.js当中添加

"prompts": {

“name”: {

“type”: “string”,

“required”: true,

“message”: “Project name”

},

// 新增提问

“appName”: {

“type”: “string”,

“required”: true,

“message”: “App name”

}

}

main.json

{

“pages”: [

“pages/index/main”,

“pages/counter/main”,

“pages/logs/main”

],

“window”: {

“backgroundTextStyle”: “light”,

“navigationBarBackgroundColor”: “#fff”,

// 根据提问设置标题

“navigationBarTitleText”: “{{appName}}”,

“navigationBarTextStyle”: “black”

}

}

最后我们来尝试一下我们自己的模板

vue init Baifann/mpvue-quickstart#custom min-app-project

image_1cj0ikq141je51ii31eek25t18il19.png-31.4k\

image_1cj0m986t1qdu1j97lruh4kjgo9.png-36.2k\

总结

以上模板的定制是十分简单的，在实际项目上肯定更为复杂，但是按照这个思路应该都是可行的。比如说将一些自行封装的组件也放置到项目当中等等，这里就不再细说。原理解析都是基于vue-cli 2.0的，但实际上 3.0也已经整装待发，如果后续有机会，深入了解之后，再和大家分享，谢谢大家。

加我微信号：欢迎你来撩，谢谢！在这里插入图片描述

贪吃蛇学院
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
博客
2021【前端VUE框架】最新/最全/最细实战课程，VUE56节课程.课程链接发你，偷你的心的人在此，欢迎来撩。
11-13 915
Web>>>全栈>>>Vue2021【前端VUE框架】最新/最全/最细实战课程，VUE59节课程.视频有效期无限期节数:59节课程评分:5.0分你将收获全面掌握Vue.js2.0技术栈(Vue+Vue-Router+Vuex)掌握Vue项目的搭建与开发教学全程采用笔记+代码案例的形式讲解，通俗易懂持续性更新，性价比更高，让你快速成为一名优秀的前端工程师适用人群1-2年开发经验的前端开发者初入社会的毕业生.
博客
vue[el-table]表格内附件上传、elementui 的http-request 上传附件，并且还可以传参数
04-15 2677
vue[el-table]表格内附件上传、elementui 的http-request 上传附件需求是表格中嵌套上传附件解决：通过http-request<el-uploadclass=“upload-demo”action="":headers=“importHeaders”:http-request="(file)=>{return imggreySuccess(file ,scope.row)}"multiple:limit=“3”:file-list=“fileLi
博客
刚刚，全部叫停，中央出手了。
02-17 383
赚最快的钱，演最烂的戏。躺赚的明星艺人，一夜回到解放前。该来的，终于来了。2月10日，中国广电总局一纸禁令，天价片酬全部叫停，彻底戳破了无数明星爆赚的美梦。 刚刚，全部叫停！中央重磅出手了。 ...
博客
数据迁移：将mysql某个时间的字段加上几个小时赋值给另外一个时间字段的sql语法。
01-09 695
具体逻辑是这样，在做会议系统的时候需要将老系统的数据迁移到新的系统中，然后有时间字段的数据需要加上半天的日程，具体的做法如下：mysql :脚本UPDATE cncs_meet_infoSET END_TIME = ADDTIME( date(START_TIME) + INTERVAL 3 HOUR, time(START_TIME))WHERE id IN IN ( '0023ea9de36b40419b3eccb3de25c79c', '00a0fcfa4ba747a3bac8
博客
List＜Map＞ 获取key重复数据及过滤对应key重复数据
12-28 1025
今天主要是给大家分析下：List＜Map＞ 获取key重复数据及过滤对应key重复数据import java.util.ArrayList;import java.util.HashMap;import java.util.List;import java.util.Map;import java.util.concurrent.ConcurrentHashMap;import java.util.function.Function;import java.util.function.Pre
博客
分享一个更快的 Maven，性能提升300%
12-27 533
maven-mvnd前几天在 GitHub 上闲逛的时候，发现了一个新的项目：maven-mvnd，可以读作 Maven Daemon，译作 Maven 守护版，旨在为 Maven 提供更快的构建速度，灵感借鉴了 Gradle 和 Takari（Maven 生命周期优化器）。https://github.com/apache/maven-mvndMaven 和 Gradle 可以说是项目构建工具中的绝代双骄，我自己的观点是：Maven 不比 Gradle 好，Gradle 也不比 Maven 好。
博客
mysql5.7报错求解决办法：The user specified as a definer (‘root‘@‘%‘) does not exist
11-11 306
The user specified as a definer (‘root’@’%’) does not exist此种报错主要是针对访问视图文件引起的（没有权限）事情是这样的，最近在做政府会议系统，由于下午要演示，那么就需要将uat的MySQL数据源切换到我本地MySQL5.7按照下面步骤和图进行操作，先看下mysql是否设置了环境变量，如果没设置，就需要切换到mysql的bin目录下执行命令（我的已经设置过了）mysql -hlocalhost -uroot -p123456...
博客
人大系统：获取会议app的地址：使用@ConfigurationProperties和类的方式读取yml文件中的值
11-05 187
获取springboot项目中的默认yml文件的属性如下：com personMeetSoft: appkey: XXXXXXX //这里是自己的属性值 appSecret: XXXXXXXX domainName: http://www.tofacebook.com如何通过@ConfigurationProperties注解读取这些值，并把值封装到一个内部类（PersonMeetSoft）中？解决办法1.添加一个配置类@ConfigurationProperti
博客
java.lang.UnsupportedOperationException list添加 解决方法
11-05 346
最近在做政府项目开发处理list添加时一定要注重细节。在项目中对List进行操作时报错java.lang.UnsupportedOperationException，后来发现操作的List是由数组转换而成的，通过看源码发现问题，并写测试程序如下。代码块：List<String> sonIds = new ArrayList<>();List<String> parentIds = new ArrayList<>(); if(meetLeaveF
博客
在springboot 项目中 利用websocket 搭建人工客服
09-17 956
这几天项目中有个需求是就是需要搭建一个在线聊天，经过不懈的研究有了一些小成果现在共享出来给大家分享需求网页多人聊天实现步骤：1.新建web项目（软件环境需要tomcat8）2.添加jar包commons-beanutils-1.8.0.jarcommons-collections-3.2.1.jarcommons-lang-2.5.jarcommons-logging-1.1.1.jarezmorph-1.0.6.jarjson-lib-2.4-jdk15.jarwebsocket
博客
北京大学：SpringBoot+Vue全栈开发实战文档
09-01 843
Spring 作为一个轻量级的容器，在JavaEE开发中得到了广泛的应用，但是Spring 的配置烦琐臃肿，在和各种第三方框架进行整合时代码量都非常大，并且整合的代码大多是重复的，为了使开发者能够快速上手Spring，利用Spring框架快速搭建JavaEE项目，Spring Boot应运而生。Spring Boot带来了全新的自动化配置解决方案，使用Spring Boot可以快速创建基于Spring生产级的独立应用程序。Spring Boot中对一些常用的第三方库提供了默认的自动化配置方案，使得开发者只
博客
2021-07-31--MySQL创建存储过程【java编程进阶】
07-31 674
MySQL 存储过程是一些 SQL 语句的集合，比如有的时候我们可能需要一大串的 SQL 语句，或者说在编写 SQL 语句的过程中还需要设置一些变量的值，这个时候我们就完全有必要编写一个存储过程。下面我们来介绍一下如何创建一个存储过程。基本语法可以使用 CREATE PROCEDURE 语句创建存储过程。语法格式如下：CREATE PROCEDURE <过程名> ( [过程参数[,…] ] ) <过程体>[过程参数[,…] ] 格式[ IN | OUT | INOUT ]
博客
我在大学里 -学到的java常量-带弟弟学Java：2021-7-19
07-19 171
我在大学里 -学到的java常量 视频点击观看地址：我在大学里 -学到的java常量
博客
第3集 java编程入门-资料文件结构
06-27 158
第3集 java编程入门-资料文件结构 微信号：tofacebook-com
博客
第2集 javase编程入门-资料文件结构
06-27 158
第2集 javase编程入门-资料文件结构:微信号：tofacebook-com
博客
第一集：噗？在大学几年里，用java就写出这么个破玩意儿
06-27 241
噗？在大学几年里，用java就写出这么个破玩意儿（告诉你我学的视频是这些） 微信号：tofacebook-com
博客
第1章 Java入门基础及环境搭建【阿里云15年java老鸟整理java笔记，包含思维导图】
06-09 229
Java 是当今世界最重要、使用最广泛的计算机语言之一， 在多年之前它就已经拥有这一荣誉。 全球每天有超过百万的开发者在用 Java 进行各式各样程序的开发。 Java 因为其方便学习、使用简单等特点，受到了越来越多人的青睐。 如果你也想成为 Java 开发阵营的一员， 那么就跟随教程第 1 章来全面了解一下 Java。 本章主要讲述 Java 的一些基础知识及其开发环境的搭建和使用。本章学习要点了解 Java 语言的版本及特点了解学习 Java 的方法掌握 JDK 的...
博客
为您服务：阿里云15年java老鸟整理java笔记。
06-09 254
大家好。看下面Java思维导图Java学习路线Java 是一门面向对象编程语言，不仅吸收了 C++ 语言的各种优点，还摒弃了 C++ 里难以理解的多继承、指针等概念。Java 不但可以用来开发网站后台、PC 客户端和 Android APP，还在数据分析、网络爬虫、云计算领域大显身手。从学术的角度讲，初学者需要花费不少时间来熟悉面向对象的概念、语法和编程思想。学习过程中有不理解的地方大家一定要坚持，多花时间编写代码自然会豁然开朗。只有一步一个脚印，踏踏实实学习，才能从零基础到入门，再到精通。这套教
博客
第2节-学习编程之前需要掌握哪些基础知识？
04-06 230
第2节-学习编程之前需要掌握哪些基础知识？ java入门学习，java基础。
博客
第一阶段：JavaSE-聊聊编程这条路,看看我是怎么走过来的，哈哈。
03-21 219
第一阶段：JavaSE-聊聊编程这条路,看看我是怎么走过来的，哈哈。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值