前言
VuePress 是一款比较好看的静态博客,主要由两部分组成:第一部分是一个极简静态网站生成器,它包含由 Vue 驱动的主题系统和插件 API,另一个部分是为书写技术文档而优化的默认主题,它的诞生初衷是为了支持 Vue 及其子项目的文档需求。更多详情请访问官方网站 VuePress
效果预览
环境安装
- 需要使用Yarn或者npm来安装,Node.js版本需要>=8才可以。
- 如果不会安装npm请转到:npm指南
开始搭建
- 创建项目的文件夹
在你的电脑磁盘中创建一个文件夹,也可以使用mkdir命令创建:
mkdir vuepress
#该目录作为整本书的项目目录
- 全局安装VuePress
推荐使用VS Code 安装博客的搭建,在VS Code中打开项目文件夹,新建一个终端输入命令:
npm install -g vuepress
#全局安装VuePress
- 初始化项目
进入项目文件夹,然后初始化项目
cd vuepress
npm init -y
#初始化
在初始化完成时会生成一个package.jsno文件
- 创建docs目录
在当前的目录下面创建一个docs目录
mkdir docs
#这里主要存放网站的主要文件
- 首页文件书写
下面代码主要是网站的首页文件,在READEME.md文件中
---
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
---
核心配置
- 在docs目录下创建.VuePress目录
cd docs
mkdir .vuepress
#在这个目录下主要存放网站的核心配置文件
- 新建一个配置文件为config.js
cd .vuepress
touch config.js
在config.js文件中加入内容如下:
module.exports = {
title: '冰洛学院',
description: '开启百万年薪之路',
port: '8080',
locales: {
'/': {
lang: 'zh-CN',
}
},
themeConfig: {
defaultTheme: 'dark',
sidebarDepth: 2,
nextLinks: true,
prevLinks: true,
lastUpdated: '最后更新',
logo: 'https://note-icelo.oss-cn-shanghai.aliyuncs.com/Root/logo.png',
//sidebar: 'auto',
repo: 'iceloX/VuePress',
sidebar:{
'/ide/': [
'', /* /foo/ */
]},
},
editLinks: true,
editLinkText: '编辑',
nav: [
{text: 'Home', link: '/' },
{text: 'Guide', link: '/guide/' },
{text: 'IDE', link: '/ide/' }
],
}
}
在上述的配置文件中themConfig中有两个关键配置,nav,sidebar,咱们在下面的文章中在介绍!
- 运行
npm run docs:dev
在浏览器中打开: http://localhost:8080/
运行成功如下,即可正常访问
结语
以上教程暂时仅在本机实现,下面文章将会继续介绍如何配置主题的导航栏和侧边栏,以及如何部署到GitHubPage页面和自定义的域名页面!
版权声明:文章转载请注明来源,如有侵权请联系删除!
VuePress写文档最好了@(笑眼)