搭建组件库最小原型(支线)

Posted 前端小鑫同学

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了搭建组件库最小原型(支线)相关的知识,希望对你有一定的参考价值。

写作背景:

     上一篇最终因为版本依赖的不一致导致组件文档站点没能编译通过,当时选择了 vuepress@next,这次重新选择了 vuepress@1.x 的版本,但还是存在 webpack 的版本依赖问题,所以还是写一下处理的过程和搭建组件库文档站点的过程。

解决方案:

最终的处理很简单,将对应的包指定版本安装到项目中,去覆盖掉通过依赖树导入的包,最终变更的依赖如下:

搭建组件库站点:

  1. 安装 vuepress 依赖:yarn add -D vuepress
  2. 创建说明文档:mkdir docs && echo # Hello VuePress > docs/README.md
  3. 配置命令:

    
    "scripts": 
    "docs:dev": "vuepress dev docs",
    "docs:build": "vuepress build docs"
    
    
  4. 启动服务:yarn docs:dev

注:这几条都来自 vuepress 文档,因为上次启动服务正常,卡在了构建时,这次就特地验证一下,构建通过后我们可以将docs/.vuepress/dist配置到忽略的文件列表。

增加侧边栏:

  1. 包含快速启动;
  2. 包含 Card 组件介绍;

配置内容如下,位置在**docs/.vuepress/config.js**

module.exports = 
  themeConfig: 
    sidebar: ["/", "/components/card"],
  ,
;
  • /components/card 是card 组件的介绍页面,文件类型 md,文件位置docs/components/card.md

    在 Markdown 中使用Card 组件:

  1. 新建放置 Card 组件的目录:docs/.vuepress/components,默认解析.vue 文件自动注册为全局异步组件;
  2. 将开发完成的 Card 组件连带样式放置到components目录,并将样式文件导入到组件中,组件文件名按组件 name 字段调整。
  3. 组件文档最少包含三项:样式示例、代码示例、属性说明;

    • 编写 markdown 需要注意制表符会导致组件渲染失效,需要用空格对代码进行缩进。

      其他的配置:

  4. 移植组件库的说明文档到站点中,替换一开始创建的 markdown 文件来充当快速入门;
  5. 为我们的站点添加一个标题到docs/.vuepress/config.js

    发布到 Github page:

  6. 调整站点配置的 base 为对应项目:base:"/it200-ui/"
  7. 新建deploy.sh发布脚本;
  8. 调整 git push 的命令到 it200-ui 项目下的gh-pages分支;
  9. 运行 sh deploy.sh开始打包发布站点;
    • 推送 github 提示git@github.com: Permission denied (publickey);
    • 生成秘钥:ssh-keygen -t rsa -C zxin088@gmail.com
    • 打开公钥文件并拷贝内容弄;
    • 添加公钥到 github的SSH keys

      写在最后:

           deploy.sh 执行完成后我们的站点就已经发布到 github page 上了,我们可以通过IT200-UI 站点来访问看一下效果,至此我们组件库开发的主线和支线任务就圆满完成了,期间有一些内容有省略,参考源码任无法完成的,欢迎留言。

以上是关于搭建组件库最小原型(支线)的主要内容,如果未能解决你的问题,请参考以下文章

游戏开发实战Unity从零做一个任务系统,人生如梦,毕业大学生走上人生巅峰(含源码工程 | 链式任务 | 主线支线)

C++之路进阶——最小费用最大流(支线剧情)

一个开发设想开发一个游戏向时间管理APP

bzoj3876: [Ahoi2014]支线剧情

bzoj3876: [Ahoi2014]支线剧情 费用流

网络流BZOJ 3876 [Ahoi2014]支线剧情