组件文档VuePress - 《学习搭建VUE组件库》

VuePress简介

安装网站生成器VuePress

npm i -d vuepress

在当前目录下，创建文件夹docs
在docs文件夹下创建README.md文件并输入“# Hello VuePress” ```dockerfile mkdir docs

echo ‘# Hello VuePress’ > docs/README.md


- 将指令放到package.json
- 并运行npm run docs:dev
```dockerfile
 "scripts": {
    "docs:dev": "vuepress dev docs",
    "docs:build": "vuepress build docs"
  }

初始化组件库文档结构

添加文档侧边栏在docs根目录下新建.vuepress文件夹，在.vuppress文件夹下新建config.js

module.exports = {
  themeConfig: {
    sidebar: [
      '/',
      '/componentDocs/card'
    ]
  }
}

新建左侧菜单目录对应文件，在docs文件夹下新建componentDocs文件夹，新建card.md文件

引用vue组件，在docs/.vuepress文件夹下新建components文件夹，将组件拷贝进去（有外联样式也拷贝一下，并在组件中引入）

# 卡片组件
<m-card 
imgSrc="https://img2.sycdn.imooc.com/szimg/5ffd1b25092ab63605400306.png" 
summary="React17+Hook+TS4 最佳实践，仿 Jira 企业级项目"
/>

引入本地资源，在docs/.vuepress文件夹下新建public文件夹，将图片放入。注：使用的时候加斜杠，例：’/logo.png’

编写卡片组件文档

组件文档主要体现：组件示例以及代码、还有各种属性
首页介绍：如何引入项目
写自己的组件库时可以看看element UI或者是ant design vue等

在github上创建个人站点

在https://docs.github.com官网上学习站点创建

https://docs.github.com
切换中文
点击左侧菜单中的gitHub Pages
点击gitHub Pages使用入门
点击gitHub Pages创建站点
https://github.com/
在gitHub官网创建一个仓库，仓库名需要是：用户名.github.io
gitHub官网的settings，左侧菜单gitHub Pages里面存在gitHub给我们分配的站点地址
站点默认显示index.md文件内容，没有的话就显示README.md中的内容

将文档站点部署到github.io

创建一个仓库，并与本地仓库建立连接(比如仓库名叫：yupui)

git init
git add *
git commit -m ‘提交注解’
git remote add origin git@github.com:yupwinadream/yupui.git
git push -u origin master

根据vuepress官方文档针对gitHub pages站点部署指南

根据自己的情况，配置docs/.vuepress/config.js：a.如果你打算发布到 https://.github.io/，则可以省略这一步，因为 base 默认即是 “/“。b.如果你打算发布到 https://.github.io//（也就是说你的仓库在 https://github.com//），则将 base 设置为 “//“。

module.exports = {
  title: 'YupUI',
  description: '慕课网学习',
  base: "/yupui/",
  themeConfig: {
    logo: '/logo.png',
    nav: [
      { text: 'Home', link: '/' },
      { text: 'GitHub', link: 'https://github.com/yupwinadream/yupui', target: '_blank' },
      { text: 'Npm', link: 'https://www.npmjs.com/package/yup-ui', target: '_blank' },
    ],
    sidebar: [
      '/',
      '/componentDocs/card'
    ]
  }
}

在项目根目录下新建deploy.sh文件（以发布到https://.github.io//为例）


#!/usr/bin/env sh
# 确保脚本抛出遇到的错误
set -e
# 生成静态文件
npm run docs:build
# 进入生成的文件夹
cd docs/.vuepress/dist
# 如果是发布到自定义域名
# echo 'www.example.com' > CNAME
git init
git add -A
git commit -m 'deploy'
# 如果发布到 https://<USERNAME>.github.io
# git push -f git@github.com:<USERNAME>/<USERNAME>.github.io.git master
# 如果发布到 https://<USERNAME>.github.io/<REPO>
 git push -f https://github.com/yupwinadream/yupui.git master:gh-pages
cd -

在package.js文件中配置部署指令（注意：如果是window10系统，请在Git Bash Here执行npm run deploy）

"scripts": {
  "deploy":"bash deploy.sh"
  }