{"id":15893756,"url":"https://github.com/chinanf-boy/vuepress-explain","last_synced_at":"2026-05-04T10:35:01.315Z","repository":{"id":90548905,"uuid":"141078306","full_name":"chinanf-boy/vuepress-explain","owner":"chinanf-boy","description":"explain: vuepress 「 easy create docs 」 {vue❤️md}  👷🀄️","archived":false,"fork":false,"pushed_at":"2018-07-17T03:29:17.000Z","size":25,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-06-24T09:48:58.497Z","etag":null,"topics":["explain","md","vue","vuepress"],"latest_commit_sha":null,"homepage":"","language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/chinanf-boy.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-07-16T02:44:01.000Z","updated_at":"2018-07-17T03:29:18.000Z","dependencies_parsed_at":"2023-07-22T07:19:05.852Z","dependency_job_id":null,"html_url":"https://github.com/chinanf-boy/vuepress-explain","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/chinanf-boy/vuepress-explain","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chinanf-boy%2Fvuepress-explain","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chinanf-boy%2Fvuepress-explain/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chinanf-boy%2Fvuepress-explain/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chinanf-boy%2Fvuepress-explain/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/chinanf-boy","download_url":"https://codeload.github.com/chinanf-boy/vuepress-explain/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chinanf-boy%2Fvuepress-explain/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32604449,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-04T10:08:07.713Z","status":"ssl_error","status_checked_at":"2026-05-04T10:08:02.005Z","response_time":58,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["explain","md","vue","vuepress"],"created_at":"2024-10-06T08:13:35.265Z","updated_at":"2026-05-04T10:35:01.299Z","avatar_url":"https://github.com/chinanf-boy.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"# Vuepress@0.12.0 [![explain]][source] \n\n[explain]: http://llever.com/explain.svg\n[source]: https://github.com/chinanf-boy/Source-Explain\n    \n「 Vue 驱动的静态网站生成器 」⏰ 2018 7.16\n\n[github source](https://github.com/vuejs/vuepress)\n\n[中文](./readme.md) | ~~[english](./readme.en.md)~~\n\n欢迎 `Issue` 和 `Pull` ❤️, 最好 `Pull` 👏\n\n---\n\n## 生活\n\n[help me live , live need money 💰](https://github.com/chinanf-boy/live-need-money)\n\n---\n\n\u003c!-- START doctoc generated TOC please keep comment here to allow auto update --\u003e\n\u003c!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE --\u003e\n\n\n- [简单使用](#%E7%AE%80%E5%8D%95%E4%BD%BF%E7%94%A8)\n- [package.json](#packagejson)\n- [bin/vuepress.js](#binvuepressjs)\n  - [命令行通用第一行](#%E5%91%BD%E4%BB%A4%E8%A1%8C%E9%80%9A%E7%94%A8%E7%AC%AC%E4%B8%80%E8%A1%8C)\n  - [检查版本](#%E6%A3%80%E6%9F%A5%E7%89%88%E6%9C%AC)\n  - [命令行分流](#%E5%91%BD%E4%BB%A4%E8%A1%8C%E5%88%86%E6%B5%81)\n    - [1. vuepress dev](#1-vuepress-dev)\n    - [2. vuepress build](#2-vuepress-build)\n    - [3. vuepress eject](#3-vuepress-eject)\n    - [其他命令勘误 和 命令错误的输出](#%E5%85%B6%E4%BB%96%E5%91%BD%E4%BB%A4%E5%8B%98%E8%AF%AF-%E5%92%8C-%E5%91%BD%E4%BB%A4%E9%94%99%E8%AF%AF%E7%9A%84%E8%BE%93%E5%87%BA)\n    - [包裹命令并且运行](#%E5%8C%85%E8%A3%B9%E5%91%BD%E4%BB%A4%E5%B9%B6%E4%B8%94%E8%BF%90%E8%A1%8C)\n- [vurepss cli](#vurepss-cli)\n\n\u003c!-- END doctoc generated TOC please keep comment here to allow auto update --\u003e\n\n---\n\n## 简单使用\n\n``` bash\n# 安装\nyarn global add vuepress # 或者：npm install -g vuepress\n\n# 新建一个 markdown 文件\necho '# Hello VuePress!' \u003e README.md\n\n# 开始写作\nvuepress dev .\n\n# 构建静态文件\nvuepress build .\n```\n\n可以看出,用户的使用 主要在 命令行-CLI 上\n\n## package.json\n\n``` json\n  \"main\": \"lib/index.js\",\n  \"bin\": {\n    \"vuepress\": \"bin/vuepress.js\"\n  },\n  \"scripts\": {\n    \"dev\": \"node bin/vuepress dev docs\",\n    \"build\": \"node bin/vuepress build docs\",\n    \"lint\": \"eslint --fix --ext .js,.vue bin/ lib/ test/\",\n    \"prepublishOnly\": \"conventional-changelog -p angular -r 2 -i CHANGELOG.md -s\",\n    \"release\": \"/bin/bash scripts/release.sh\",\n    \"test\": \"node test/prepare.js \u0026\u0026 jest --config test/jest.config.js\"\n  },\n```\n\n我们从命令行入口, `bin/vuepress.js` 开始\n\n也许你可以先看看, [vuepress 已经或要去做的事情](https://vuepress.vuejs.org/zh/guide/#%E5%AE%83%E6%98%AF%E5%A6%82%E4%BD%95%E5%B7%A5%E4%BD%9C%E7%9A%84%EF%BC%9F)\n\n## bin/vuepress.js\n\n### 命令行通用第一行\n\n``` js\n#!/usr/bin/env node\n```\n\n### 检查版本\n\n``` js\nconst chalk = require('chalk') // 颜色库\nconst semver = require('semver')\nconst requiredVersion = require('../package.json').engines.node\n\nif (!semver.satisfies(process.version, requiredVersion)) {\n  console.log(chalk.red(\n    `\\n[vuepress] minimum Node version not met:` +\n    `\\nYou are using Node ${process.version}, but VuePress ` +\n    `requires Node ${requiredVersion}.\\nPlease upgrade your Node version.\\n`\n  ))\n  process.exit(1)\n}\n\n```\n\n[chalk] 作为`node的颜色库`是众所周知, 但是当你仅仅需要 不大不小的颜色输出时\n[chalk] 就显得过大了 \n\n\u003e [chalk 大小](https://bundlephobia.com/result?p=chalk)\n\n也许我们可以使用[Turbocolor] 小点的库 \n\n\u003e [Turbocolor 大小](https://bundlephobia.com/result?p=Turbocolor)\n\n\n[turbocolor]: https://github.com/jorgebucaran/turbocolor\n[chalk]: https://github.com/chalk/chalk\n\n### 命令行分流\n\n下面可以说是 `vuejs 作者` 编写命令行的 通用形式了\n\n\u003e 用[vue-cli]和[本项目][local]做对比,除了命令选项不同, 关于 **其他命令勘误** 与 **命令错误输出**的处理大致相同\n\n[local]: #%E5%85%B6%E4%BB%96%E5%91%BD%E4%BB%A4%E5%8B%98%E8%AF%AF-%E5%92%8C-%E5%91%BD%E4%BB%A4%E9%94%99%E8%AF%AF%E7%9A%84%E8%BE%93%E5%87%BA\n[vue-cli]: https://github.com/vuejs/vue-cli/blob/dev/packages/%40vue/cli/bin/vue.js#L141\n\n``` js\nconst path = require('path')\nconst { dev, build, eject } = require('../lib') // 3大命令\n\nconst program = require('commander')\n\nprogram\n  .version(require('../package.json').version)\n  .usage('\u003ccommand\u003e [options]')\n\n```\n\n#### 1. vuepress dev\n\n``` js\nprogram\n  .command('dev [targetDir]')\n  .description('start development server')// 启动 开发服务器\n  .option('-p, --port \u003cport\u003e', 'use specified port (default: 8080)')\n  .option('-h, --host \u003chost\u003e', 'use specified host (default: 0.0.0.0)')\n  .action((dir = '.', { host, port }) =\u003e {\n    wrapCommand(dev)(path.resolve(dir), { host, port }) // 用 包裹函数 运行 命令选项\n  })\n\n```\n\n- [vurepss `dev` Explain](#vurepss-cli)\n\n#### 2. vuepress build \n\n``` js\nprogram\n  .command('build [targetDir]')\n  .description('build dir as static site')\n  .option('-d, --dest \u003coutDir\u003e', 'specify build output dir (default: .vuepress/dist)') // 构建版本 输出目录\n  .option('--debug', 'build in development mode for debugging')\n  .action((dir = '.', { debug, dest }) =\u003e {\n    const outDir = dest ? path.resolve(dest) : null\n    wrapCommand(build)(path.resolve(dir), { debug, outDir }) // 用 包裹函数 运行 命令选项\n  })\n\n```\n\n- [vurepss `build` Explain](#vurepss-cli)\n\n#### 3. vuepress eject\n\n``` js\nprogram\n  .command('eject [targetDir]')\n  .description('copy the default theme into .vuepress/theme for customization.') \n  //复制 默认主题到 .vuepress/theme , 提供用户自定义主题\n  .action((dir = '.') =\u003e {\n    wrapCommand(eject)(path.resolve(dir)) // 用 包裹函数 运行 命令选项\n  })\n\n```\n\n- [vurepss `eject` Explain](#vurepss-cli)\n\n#### 其他命令勘误 和 命令错误的输出\n\n``` js\n// output help information on unknown commands\nprogram\n  .arguments('\u003ccommand\u003e')\n  .action((cmd) =\u003e {\n    program.outputHelp()\n    console.log(`  ` + chalk.red(`Unknown command ${chalk.yellow(cmd)}.`))\n    console.log()\n  })\n\n// add some useful info on help\nprogram.on('--help', () =\u003e {\n  console.log()\n  console.log(`  Run ${chalk.cyan(`vuepress \u003ccommand\u003e --help`)} for detailed usage of given command.`)\n  console.log()\n})\n\nprogram.commands.forEach(c =\u003e c.on('--help', () =\u003e console.log()))\n\n// enhance common error messages\nconst enhanceErrorMessages = (methodName, log) =\u003e {\n  program.Command.prototype[methodName] = function (...args) {\n    if (methodName === 'unknownOption' \u0026\u0026 this._allowUnknownOption) {\n      return\n    }\n    this.outputHelp()\n    console.log(`  ` + chalk.red(log(...args)))\n    console.log()\n    process.exit(1)\n  }\n}\n\nenhanceErrorMessages('missingArgument', argName =\u003e {\n  return `Missing required argument ${chalk.yellow(`\u003c${argName}\u003e`)}.`\n})\n\nenhanceErrorMessages('unknownOption', optionName =\u003e {\n  return `Unknown option ${chalk.yellow(optionName)}.`\n})\n\nenhanceErrorMessages('optionMissingArgument', (option, flag) =\u003e {\n  return `Missing required argument for option ${chalk.yellow(option.flags)}` + (\n    flag ? `, got ${chalk.yellow(flag)}` : ``\n  )\n})\n\nprogram.parse(process.argv)\n\nif (!process.argv.slice(2).length) {\n  program.outputHelp()\n}\n\n```\n\n#### 包裹命令并且运行\n\n``` js\nfunction wrapCommand (fn) {\n  return (...args) =\u003e {\n    return fn(...args).catch(err =\u003e { // 真实运行 不过加了 catch 错误❌\n      console.error(chalk.red(err.stack)) // 红色错误\n      process.exitCode = 1\n    })\n  }\n}\n```\n\n比如: `vuepress dev .`\n\n``` js\nwrapCommand(dev)(path.resolve(dir), { host, port })\n// 第一括号 =\u003e 命令\n// 第二括号 =\u003e 命令选项\n\n// ===\u003e 真实运行\nreturn dev(\".\",{})\n```\n\n## vurepss cli\n\n- [ ] [1. vurepss `dev` Explain](dev.ex.md)\n- [ ] [2. vurepss `build` Explain](build.ex.md)\n- [ ] [3. vurepss `eject` Explain](eject.ex.md)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchinanf-boy%2Fvuepress-explain","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fchinanf-boy%2Fvuepress-explain","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchinanf-boy%2Fvuepress-explain/lists"}