VuePress制作个人网页（使用vue作为网站）

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

VuePress

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

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

这是VuePress的官方文件。

开始

您可以自己处理文档中的示例，但是由于VuePress的文档也是由VuePress实现的，因此我只处理VuePress仓库中的docs目录。

1.首先将VuePress安装到全局。

npm安装-g vuepress

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

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

在docs文件中执行（请确保您的Node.js版本》= 8）。

当你看到这一行时，意味着你已经成功了:

Vue新闻开发服务器监听http://localhost: 8080/让我们打开http://localhost:8080/

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

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

├ ── vuepress ├ ─组件└─公共└─图标└─config.js//Configuration文件├─config // Vuepress文档配置参考内容├─默认-主题-配置。/Vuepress文档└-zh//Chinese文档目录├-default -主题-配置└-readme.md//The主页配置文件文档的指南内容分为两部分，中文文档在/zh/目录中，英文文档在根目录中。

事实上，目录中的所有内容都很容易理解。首先，guide、default-theme-config和config这三个目录是Vuepress文档的主要内容。从中文文件中也可以看出，只有这三个目录被替换。

主页配置

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

让我们先看看根目录中的自述文件md:

Home: true //是否使用Vuepress的默认主题，hero:/hero . png//主页的图片，ActionText:开始使用的文本→//按钮，action link:/Guide//按钮跳转的目录功能://主页的三个功能-标题:简单第一细节:markdown -居中项目结构的最小设置有助于您专注于写作。-标题:vue-powered de。tails:享受Vue + webpack的开发体验，在markdown中使用Vue组件，并使用Vue开发自定义主题。-标题:Performant详细信息:VuePress为每个页面生成pre -渲染的静态HTML，并在页面加载后作为spa运行。页脚:麻省理工学院许可|版权2018-目前尤雨溪//我真的不明白页脚。官网有比我更详细的配置说明。

导航配置

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

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

导航:

侧栏的实现

因为评论区有很多人在问，我想在这里更新一下。事实上，即使我在这里写得很详细，你最好还是看一下官方文件。

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

侧边栏:【{ title:‘JavaScript‘，//侧边栏名称collapsable: true，//可折叠子级:【‘/blog/JavaScript/一旦学会ES6，//您的md文件地址】}，{ title:‘CSS‘，collapsable: true，子级:【‘/blog/CSS/了解Z-index的所有细节‘，】}，{ title:‘HTTP‘，collapsable: true，子级:【‘/blog/HTTP/了解HTTP -cookie和会话文章‘，，

├-Create在├─blog //文件目录下新建了一个博客目录│ ├-CSS │ ├-http └-JavaScript我的博客:布朗胡。

部署

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

Vuepress构建

当你看到这句话时，它意味着成功:

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

我相信你看完这个案例后已经掌握了方法。更多精彩请关注主机参考其他相关文章！

推荐阅读:

制作手机微信官方账号（带代码）

长度和尺寸的比较（）

以上是VuePress个人网页的详细内容。更多资讯请关注主机参考其他相关文章！

这几篇文章你可能也喜欢：

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

本文由主机参考刊发，转载请注明：VuePress制作个人网页（使用vue作为网站） https://zhujicankao.com/105153.html