VuePress可以让你非常方便的在Markdown文档中编写Vue代码。VuePress会为每个页面预渲染生成静态HTML。同时，当每个页面被加载时，它会作为一个SPA运行。下面小编带大家一步步来。VuePress用于搭建个人网站环境。检查节点的版本号。node-vnode.js版本号必须大于等于8才能安装vuepressyarnglobaladdvuepress或者npminstall-gvuepress查看vuepress是否安装成功。使用vuepress-v创建一个文件夹mkdirsxm_vuepress切换到新建的文件夹目录cdsxm_vuepress初始化项目npminit-y通过npminit快速创建项目的package.json文件新建一个docs文件夹mkdirdocs新建的docs文件夹作为项目文档改变目录，主要放置Markdown类型的文章和.vuepress文件切换到docs目录cddocs创建.vuepress文件夹mkdir.vuepress.vuepress目录是放置所有vuepress特定文件的地方切换到.vuepress目录cd.vuepress创建一个config.js文件touchconfig.jsfor放置配置文件，然后创建一个公用文件夹mkdirpublic用于存放公用图片，然后创建一个README.md文件。这是在docs目录下创建一个README.md文件。touchREADME.md用于存放首页配置文件。接下来用编辑器打开基础配置，在config.js中添加内容module.exports={title:'小明的技术博客',description:'查知识',themeConfig:{search:true,//搜索searchMaxSuggestions:10,}}"titlehere"是所有页面标题的前缀，显示在默认主题的导航栏中。这里的“描述”是网站描述。在README.md中添加内容---home:true#标记本页是否为首页lang:zh-CN#表示本页语言为zh-CN（简体中文）heroText:石小明的科技博客#首页标题内容actionText：入门→#首页跳转按钮内容功能：#表示首页的特点，固定格式为标题+详情，显示在三栏流式布局-title:博客详情：专注前端学习，记录点点滴滴-title:关于我详情：我是一名前端工程师。-标题：技能详情：Vue全家桶、React全家桶页脚：石晓明|Copyright?2020-presentEvanYou#是底部内容，和普通网页一样，我们可以在页脚写版权信息---在package.json中添加内容"scripts":{"docs:dev":"vuepressdevdocs","docs:build":"vuepressbuilddocs"},运行npmrundocs:dev运行config.js中的效果导航配置添加//导航栏nav:[{text:'Home',link:'/'},{text:'前端技术',link:'page1/'},{text:'个人文章',items:[{text:'掘金',link:'https://juejin.im/user/5c8f3303f265da612d633276'},{text:'segmentfault',link:'https://segmentfault.com/u/helloxiaoming'},{text:'CSDN',link:'https://blog.csdn.net/qq_40588413'}]}]运行效果sidebar配置创建一个page1文件，在page1中创建4个文件我的截图是在config.js中添加//sidebarsidebar:[{title:'HTML',collapsable:true,children:['page1/','page1/Newlabel','page1/BOM','page1/DOM']}],在README.md中添加actionLink:/page1/#路径页面跳转按钮操作效果然后用markdown语法写每页内容更改默认主题颜色创建override.styl文件在.vuepress目录下创建override.styl文件Vuepress提供了四种可变颜色：$accentColor=#3eaf7c//主题色$textColor=red//文字颜色$borderColor=#eaecef//边框颜色$codeBgColor=#282c34//代码背景色运行效果在部署命令行执行：vuepressbuild出来下面一行代码说明打包成功Success！vuepress中生成静态文件然后将打包后的vuepress目录上传到github，配合github页面配置你的个人网站。最后，如果这篇文章对你有帮助，就给本文点一个赞吧??????欢迎大家加入，一起学习前端，一起进步！
