当你写完一个开源项目或一篇博文,你是不是想要一个页面来呈现?如图:下面开始使用vuepress搭建vuepress官网安装运行1.使用Yarn和npm,Node.js版本>=8。npm安装-gvuepress2.创建项目目录mkdirdemocddemo3。初始化项目npminit-y4。在package.json中添加:"scripts":{"dev":"vuepressdevdocs","build":"vuepressbuilddocs"}5。创建文档目录和文件,结构如下:demo├────docs│└──.vuepress//配置目录││├──public//静态资源││├────img││├──────bg.ico//图标│├──────logo.jpg//主页标志││└──config.js//vuepress配置文件│├──essay//随笔│├──suibi//一级目录│││├──test.md//文章│└──README.md//博客首页└──package.json6.运行npmrundev7。浏览器访问:http://localhost:8080/,可以看到效果。多放几张图:8.也可以构建生成html:npmrunbuild9.config.jsfileexamplemodule.exports={title:'hello',description:'technology',head:[//注入到当前页面HTML中的标签
['meta',{'http-quiv':'pragma',cotent:'no-cache'}],['meta',{'http-quiv':'pragma',cotent:'no-cache,must-revalidate'}],['meta',{'http-quiv':'expires',cotent:'0'}]],serviceWorker:true,//是否开启PWAbase:'/',//部署到github相关配置markdown:{lineNumbers:true//代码块中是否显示行号},themeConfig:{lastUpdated:'Updatedon',sidebarDepth:3,displayAllHeaders:true,nav:[{text:'Navigation',link:'http://www.kaka996.com'},{text:'dnnmp',items:[{text:'dnnmp集成环境',items:[{text:'介绍',链接:'/dnnmp_introduce/'},{文本:'安装',链接:'/dnnmp_install/'},{文本:'命令行使用',链接:'/dnnmp_command/'},{text:'Log',link:'/dnnmp_log/'},{text:'Appendix',link:'/dnnmp_appendix/'},]}]},{text:'了解更多Many',items:[{text:'PersonalInformation',link:'/pages_about/'},]}],sidebar:{'/dnnmp/':[{title:'简介',collapsable:false,children:['介绍/介绍',]},{title:'安装',collapsable:false,children:['安装/一键安装','单独安装/安装PHP','单独安装/安装Nodejs','安装/安装Mongodb','安装/安装Mysql','ininstall/InstallNginxseparately','install/InstallRedisseparately',//'install/Installgoseparately',]},{title:'命令行使用',collapsable:false,children:['command/命令行使用',]},{title:'Log',collapsable:false,children:['log/log',]},{title:'Appendix',collapsable:false,children:['appendix/Appendix',]}]},}};10.浏览作者网站效果:http://blog.kaka996.com/