本教程有视频版,看B站《VuePress搭建Element组件库文档》为什么要用VuePress?社区中有很多优秀的文档工具供我们前端程序员选择,比如Gitbook、Hexo、Docusaurus。对于个人使用,我体验过的最好的文档工具是Docusaurus。Docusaurus具有配置简单、目录结构合理、Markdown渲染配置灵活等一系列优点。但对Vue开发者不太友好的是,Docusaurus是基于React的。如果你想在里面使用Vue,渲染Vue组件,就会变得非常困难。所以如果你是Vue开发者,在编写Vue相关的组件文档时,我个人推荐使用官方的VuePress。下面的教程将使用VuePress生成一个类似Element的组件文档库,包括Vue组件展示、示例代码展示、自定义主题等常用功能。安装并创建项目vuepress-element-docmkdirvuepress-element-doc&&cdvuepress-element-doc初始化npm包管理并在package.json中添加脚本npminit-y//package.json"scripts":{"dev":"vuepressdevdocs","build":"vuepressbuilddocs"},installVuePress+Elementnpminstallvuepresselement-ui--registry=https://registry.npm.taobao.org因为我们要做的是Element组件文档页面,所以这里顺便安装Element。如果需要显示自己的组件库,可以安装或导入自己的组件库的js和css。创建主页新建主页.md文件新建docs/README.md---home:trueheroImage:https://artice-code-1258339218.cos.ap-beijing.myqcloud.com/vuepress/element-index.pngheroText:Elementfeatures:-title:ConsistencyConsistencydetails:Consistentwithreallife:符合现实生活的流程和逻辑,遵循用户习惯的语言和概念-title:Feedback反馈详情:通过界面风格和交互动态,用户可以清晰感知自己的操作-title:Efficiency效率详情:界面简洁明了,让用户快速识别而不是回忆,减轻用户的记忆负担。footer:by饿了么---###设计原则
