VuePress制作个人网页(vuepress建立个人博客)

这一次，我将为您带来VuePress来制作个人网页。VuePress制作个人网页有哪些注意事项？以下是实际案例。让我们看一看。

VuePress

Vuepress是犹大4月12日发布的基于vue的全新静态网站生成器。它其实是一个内置webpack的vue spa应用，可以用来写文档。

一个基于Vue SSR的静态站生成器，最初的目的是为了酷酷的写文档，但是我发现对于写博客也很不错。

这是VuePress的官方文件

开始

你可以按照文档中的例子，自己玩。然而，由于VuePress的文档也是由VuePress实现的，所以我很难直接使用VuePress warehouse中的docs目录。

1.首先向全世界安装VuePress。

npm安装-g vuepress

2.然后将VuePress仓库克隆到您的计算机上。

git克隆git @ github . com:docs China/vue press . git

在docs文件中执行(请确保您的Node.js版本>:= 8)

Cd vuepresscd docsvuepress dev当你看到这一行，就说明已经成功了:

e按dev服务器监听http://localhost: 8080/我们打开http://localhost:8080/

我发现vuepress文档真的被打开了:

下面的工作是数据的替换，但是我们首先要看一下docs的目录结构:

/Vuepress文档的├├├├├└└└└└└└└└└├├├ζ├├ζ├ζζζζζζζζ9指南内容└zh//中文文档目录├├├├ Default-Theme-Config └指南readme.md//The首页配置文件文档分为两部分，中文文档在/zh/目录，英文文档在根目录。

其实目录里的东西都挺好理解的。首先，guide、default-theme-config和config是Vuepress文档的主要内容。从中文文档中也可以看出，只替换了这三个目录。

主页配置

默认情况下，主题提供了一个主页布局。要使用它，您需要在根目录README.md的YAML front matter中指定home:true，并添加一些其他元数据。

我们先来看看根目录下的README，md:

Home: true //是否要使用vuepress heroImage: /hero.png //首页图片操作Text: Get Started → //按钮操作的文本链接:/Guide//按钮跳转的目录功能://首页的三个功能-title:简单第一细节:以markdown -为中心的项目结构的最小设置有助于您专注于写作-title: vue-powered de tails:享受Vue + webpack的开发体验，在markdown中使用Vue组件，并使用Vue开发自定义主题-title页脚:麻省理工授权|版权2018-呈现埃文你//页脚我真的看不懂。官网有比我更详细的配置说明。

导航配置

导航配置文件位于vuepress/config.js中

在导航配置文件中，nav控制导航栏链接，您可以将其更改为您自己的博客目录。

导航:

侧边栏的实现

由于评论区有很多人提问，我想在这里更新一下。其实就算我在这里写的很详细，大家还是看一下公文比较好。

侧边栏的配置也在vuepress/config.js中:

侧栏:[{ title:& # 039；JavaScript & # 039，//侧栏名称collapsable: true，//可折叠子级:[& # 039；/blog/JavaScript/学了ES6就不会写这样的代码了& # 039；，//你的md文件地址] }，{ title:& # 039；CSS & # 039，collapsable: true，children:[& # 039；/blog/CSS/了解Z-index的所有细节& # 039；，] }，{ title:& # 039；HTTP & # 039，collapsable: true，children:[& # 039；/blog/HTTP/ know HTTP-Cookie和Session & # 039，]}，]对应的文档结构:

├-Create在├─blog // docs目录下新建一个博客目录├-CSS ├-http │ └-JavaScript我的博客:brownhu

部署

配置完您博客后，命令行执行:

Vuepress构建

当你看到这条线，它意味着成功:

成功！在vuepress中生成静态文件。

相信你看完这个案例已经掌握了方法。更多精彩请关注即时码站其他相关文章！

推荐阅读:

做一个手机微信微信官方账号(有代码)

比较长度大小()