搭建属于自己的组件库文档（一）

前言：

• 采用vuePress （作者：尤雨溪，官网链接: www.vuepress.cn/）
• 样品展示：

开始使用

1. 由于官方不再推荐全局安装了，那么我就在工作区创建个专门写文档的文件夹，简单取个名字吧，那就‘ComponentsDocs’

2. 接着在刚刚创建好的文件夹里，进行导入vuePress，这里可以参考官网，（‘淦’，什么都看文档，我阅读你这文章有啥用！），哈哈哈，不想看文档的可以参考我下面的做法（可能有点啰嗦！！！）

• 在创建好的文件夹里先习惯性的 `npm init -y`
  

• 接着输入 `npm install -D vuepress` 或者 `yarn add -D vuepress`
  

• 引用好vuepress好了后，我们就可以在项目根目录创建 `README.md` 、 `.vuepress` 文件夹、 `mdPages`文件夹(一会再说下这几个东西的作用)
  

• 然后大致的项目结构就长成下面的模样了：
  

• 下一步就是启动项目咯， 同样的在项目`package.json`文件，这个熟悉的配置文件里添加启动脚本即可：
    
  

     "scripts": {
        "dev": "vuepress dev",
        "build": "vuepress build"
      },

• 在终端上熟练的打入命令，即可编译启动在你的8080端口
  

当然你现在在浏览器访问到的页面肯定长得不是我上面截图的demo那样，可能是白白一片，那么这个时候你可以在刚刚我们创建的READE.md这个文件简单输入一些文本，接着保存，刷新，就能在页面看到你输入的文本了

注意点：

1. 有时候，你修改了项目的配置文件，保存，虽然项目显示热更新，但页面并没有变化，这个可以通过重新启动项目即可
2. READE.md文件夹是项目的主入口；.vuepress文件夹是整个项目的配置入口，后续我会在下一篇文章继续说明以及添加配置、引入ElementUi去搭建一套完整的组件库文档

最后

    console.log("感谢阅读，一起编程，共勉,gitee: https://gitee.com/huang_min_hang/components-docs.git")