首先附上vuepress官网: 介绍 | VuePress
正如官网上介绍的一样,vuepress由两部分组成: 极简静态网站生成器,默认主题(为写技术文档儿优化的)。这里我们先了解下如何搭建一个静态网站。
目标:搭建一个类似如下的文档:
没错,我除了看文档,还借鉴了这位大神的技术博客。附上链接: https://segmentfault.com/a/1190000016333850
搭建步骤:
1. 创建并进入一个新目录,然后初始化。
2. 将 vuepress 安装为本地依赖,官网不推荐全部安装
安装好了之后,项目打开是如下状态,只有一个pacakge.json文件
3. 新建一个docs文件夹,并建一个README.md 文档,
4. 在package.json中添加启动与打包的命令,完整项目目录如下:
运行后,如图所示,啥都没有,效果如下图:
到这里为止,就是创建并启动了一个简单的vuepress静态网站。建房子的地基打好了,接下来,我们慢慢增加一砖一瓦。
如何使用vuepress提供的默认主题呢?
1. 创建.vuepress文件夹
2. 在vuepress文件夹下创建config.js文件,内容如下:
3. 创建一个public文件夹,这个文件夹是用来放置静态资源的,打包出来之后会放在.vuepress/dist/的根目录。
我在这里面放了一张图片
4. 将docs文件夹下的README.md文件内容改成如下内容,从而使用vuepress自带的默认主题:
---
home: true
heroImage: /logo.jpg
actionText: 快速上手 →
actionLink: /zh/guide/
features:
- title: 简洁至上
details: 以 Markdown 为中心的项目结构,以最少的配置帮助你专注于写作。这是官网的话
- title: Vue驱动
details: 享受 Vue + webpack 的开发体验,在 Markdown 中使用 Vue 组件,同时可以使用 Vue 来开发自定义主题。
- title: 高性能
details: VuePress 为每个页面预渲染生成静态的 HTML,同时在页面被加载的时候,将作为 SPA 运行。
footer: MIT Licensed | Copyright © 2018-present Evan You
---
重新运行项目(为什么要重新运行呢,因为我还没有配置热更新,编辑完后直接保存刷新页面并没有更新内容,运行到一半卡住了): npm run docs:dev
效果图如下:
好记性不如烂笔头,编辑的这么详细是希望这个笔记在下次看到的时候可以直接将vuepress搭建起来。