开发者指南

Vssue 使用 TypeScript开发者指南 - 图1 开发，代码仓库通过 lerna开发者指南 - 图2 和 yarn workspace开发者指南 - 图3 组织为 Monorepo。

所有 Packages 均位于 packages/ 目录下：

  • vssue：Vssue 的主要 Package，包含了 Vssue 组件；
  • docs：文档网站 vssue.js.org开发者指南 - 图4 的源代码，由 VuePress开发者指南 - 图5 驱动；
  • @vssue/api-{platform}-{version}：不同平台和不同版本 API 对应的 API Packages；
  • @vssue/utils：一些供 Vssue 和 API Packages 使用的工具函数；
  • @vssue/vuepress-plugin-vssue：VuePress 插件。

开发

Clone 仓库：

  1. git clone https://github.com/meteorlxy/vssue.git
  2. cd vssue
  3. yarn

Vssue 使用 vue-cli开发者指南 - 图6 进行开发，使用 rollup开发者指南 - 图7 进行打包。

你需要为你的本地开发设置环境变量开发者指南 - 图8：

  1. cp packages/vssue/.env.development packages/vssue/.env.development.local

修改 .env.development.local 文件的内容：

  1. VSSUE_PATH=src/main.ts
  2. VSSUE_CSS_PATH=src/styles/index.styl
  4. ##
  5. # env below should be overridden in .env.development.local
  6. ##
  8. # the api package to develop
  9. VSSUE_API=github-v3
  10. # the oauth options
  11. VUE_APP_OWNER=
  12. VUE_APP_REPO=
  13. VUE_APP_CLIENT_ID=
  14. VUE_APP_CLIENT_SECRET=
  15. # if set to true, will not call `Vue.use(Vssue)`, and only register Vssue Component
  16. VUE_APP_ONLY_COMPONENT=false

你可以在 packages/vssue/vue.config.js 和 packages/vssue/dev/main.ts 中查看这些变量是如何工作的。

运行开发脚本：

  1. # 开发 Vssue 组件
  2. yarn dev
  3. # 开发文档
  4. yarn dev:docs

流程图

Vssue 组件流程图