尤大大的VitePress，确定不来学一手嘛？
VitePress，在写博客网站，技术文档，面试题网站等方面，就有着它先天的优势，不仅如此，它还有极易上手，构建速度快，与此同时，笔者还用它写了一个面试题网站，正在不断更新中。接下来，我们就一起来看下它吧 ！
项目预览地址：https://jack-star-t.github.io/interview/
项目仓库: https://github.com/Jack-Star-T/vitePress
官网地址：https://vitepress.vuejs.org/
前言
说它很适合构建博客网站，技术文档，面试题网站的主要原因，就是因为它可以直接用 markdown 进行书写，所有写过博客的人，都应该对它不陌生。
一个 .md 文档，就可以自动生成一张页面。
除此之外，不需要关心文档的目录，锚点导向等问题，左侧栏，导航栏等问题，都是根据配置文件自动生成的。
样式自定义，可根据自身项目需求，自由定制。
拥有自己的生态，插件库，开封即用。
自动生成路由，项目的文件目录即目录。
支持多语言，自带多语言配置，让你的项目更加国际化。
概览
- 食用时间： 10分钟
- 难度： 简单，别跑，看完再走
- 超前预告： 了解它快速，简单易用等特点，了解为什么在技术选型上，选择它。
- 食用价值： 了解如何用
vitePress构建技术文档，博客网站或者面试题网站。 - 铺垫知识：
markdown
起源
它的前身就是 vuePress ，它就是所谓的传统构建方式，相比之下， vitePress 的速度就会快很多。
主要因为vuePress 是基于 Webpack 的，而 vitePress 是基于 Vite 的。
快速
Vite 语义为快速的,是一种新型前端构建工具，能够显著提升前端开发体验。
它快的原因就在于它是基于原生ES模块，它不像之前的 vuepress ，启动的过程中呢，相当于是先用 Webpack 把项目先打包了一遍。
而 Vite 实际上是让浏览器接管了打包程序的部分工作： Vite 只需要在浏览器请求源码时进行转换并按需提供源码。根据情景动态导入代码，即只在当前屏幕上实际使用时才会被处理。
这就是为什么它那么快速的原因。
那么，接下来，我们手把手，一步步地来搭建自己的 vitePress 项目，当然，你也可以直接 copy 我的仓库，在本地直接运行。
项目安装
- 首先，在桌面上新建一个文件夹
myBlog(文件名可以自行取，但不建议叫vitepress)，在此处打开命令提示符，先运行npm init初始化package.json。按照它的提示一步步下去，如图所示：
image.png
-
然后，运行
npm i -D vitepress进行安装vitePress -
在
vitepress文件夹下新建docs文件夹，在vitepress文件夹下运行echo '# Hello VitePress' > docs/index.md，生成docs/index.md。 -
修改
package.json中的运行脚本。
"scripts": {
"dev": "vitepress dev docs",
"build": "vitepress build docs",
"serve": "vitepress serve docs"
},
可以看到项目很快就启动了：
image.png
效果如下：
image.png
但是，和我们想要的还是有具体偏差的。我们一步步来。
目录结构
先来浏览下大致的文件目录，当然，如果你觉得有点繁琐，也不要紧，你可以跳过这一段，直接从下面的配置首页开始看起。
├── docs
│ ├── .vitepress (可选的)
│ │ ├── theme (可选的)
│ │ │ ├── custom.styl
│ │ │ └── index.js
│ │ ├── public (可选的)
│ │ ├── config.js (可选的)
│ ├── README.md
│ ├── guide
│ │ └── README.md
│ └── config.md
│
└── package.json
-
docs/.vitepress: 用于存放全局的配置、组件、静态资源等。 -
docs/.vitepress/theme: 用于存放本地主题。 -
docs/.vitepress/theme/index.js: 将自定义css样式抛出。 -
docs/.vitepress/theme/custom.styl: 用于定义自定义css样式。 -
docs/.vitepress/public: 静态资源目录。 -
docs/.vitepress/config.js: 配置文件的入口文件，也可以是YML或toml。
重点注意
虽然 vitePress 是热重载的，但是，所有对于 .vitepress/config.js 的修改，都要项目重新启动才会生效。
配置首页
将 docs/index.md 修改为以下的代码：
---
home: true
// heroImage: /favicon.ico
heroAlt: Logo image
heroText: Interview
tagline: the website of Interview with VitePress
actionText: Get Started
actionLink: /html/
features:
- title: Easy Setup
details: Minimal setup with markdown-centered project structure helps you focus on writing.
- title: Vue-Powered
details: Enjoy the dev experience of Vue + webpack, use Vue components in markdown, and develop custom themes with Vue.
- title: Performant
details: VitePress generates pre-rendered static HTML for each page, and runs as an SPA once a page is loaded.
footer: MIT Licensed | Copyright © 2021-present CoolDream
---
配置文件基础建设
在 docs 文件夹下新建 .vitepress 文件夹，新增 config.js，现在的目录结构如下。
├─ docs
│ ├─ .vitepress
│ │ └─ config.js
│ └─ index.md
└─ package.json
在 config.js 写入以下内容：
module.exports = {
// 网站标题
title: 'Interview',
// 网站描述
description: 'Interview with vitePress',
// 打包目录
dest: './dist',
head: [
// 添加图标
['link', { rel: 'icon', href: '/favicon.ico' }]
],
}
设置了网站标题，网站描述，打包的 dist 目录，以及网站图标。
值得注意的是，所有的资源文件，都存放在 docs/public 文件夹下。
/favicon.ico 指向 docs/public/favicon.ico
使用插件
正如和 vue-cli 一样，生态环境中的插件，也有着很重要的地位，我们来安装下官方的插件，为 vitePress 添加更多的功能。
module.exports = {
...
// 使用插件
plugins: [
'@vuepress/active-header-links', // 页面滚动时自动激活侧边栏链接的插件
'@vuepress/back-to-top', // 返回顶部插件
'@vuepress/medium-zoom', // 图片预览插件
'@vuepress/nprogress', //页面顶部进度条
],
}
更多插件可以浏览此处
头部导航栏
module.exports = {
...
// 主题配置
themeConfig: {
// 获取每个文件最后一次 git 提交的 UNIX 时间戳(ms)，同时它将以合适的日期格式显示在每一页的底部
// lastUpdated: 'Last Updated', // string | boolean
// 启动页面丝滑滚动
smoothScroll: true,
// 导航栏配置
nav:[
{text: '我的个人网站', link: 'https://www.cooldream.fun/home' },
{text: '掘金', link: 'https://juejin.cn/user/1855631359481847/posts'},
{text: 'Github', link: 'https://github.com/Jack-Star-T'}
],
}
}
左侧导航栏
module.exports = {
...
// 主题配置
themeConfig: {
...
sidebar:{
'/':getSidebar()
}
}
}
function getSidebar() {
return [
{
text:'HTML',
children: [
{ text: '基础', link: '/interview/HTML/' },
{ text: '进阶', link: '/interview/HTML/advanced' },
],
sidebarDepth:3
},
{
text:'CSS',
children:[
{ text: '基础', link: '/CSS/' },
{ text: '进阶', link: '/CSS/advanced' },
]
},
{
text:'Javascript',
children:[
{ text: '基础', link: '/Javascript/' },
{ text: '进阶', link: '/Javascript/advanced' },
]
},
{
text:'Vue',
children:[
{ text: '基础', link: '/Vue/' },
{ text: '进阶', link: '/Vue/advanced' },
]
},
{
text:'浏览器',
children:[
{ text: '基础', link: '/Vue/' },
{ text: '进阶', link: '/Vue/advanced' },
]
},
{
text:'网络',
children:[
{ text: '基础', link: '/Network/' },
{ text: '进阶', link: '/Network/advanced' },
]
},
{
text:'安全',
children:[
{ text: '基础', link: '/Security/' },
{ text: '进阶', link: '/Security/advanced' },
]
},
{
text:'面经',
children:[
{ text: '基础', link: '/Experience/' },
{ text: '进阶', link: '/Experience/advanced' },
]
},
]
}
link 就是点击的跳转地址。
路由
在 Vue 中，一个 .vue 文件就可以作为一张页面，或者是一个组件。
在 vitePress 中，一个 .md 文件就可以作为一张页面。
并且，根据根目录 docs ，可自动生成路由。
├── docs
│ ├── HTML
│ │ ├── index.md /HTML/
│ └── └── advanced.md /HTML/advanced/
└──
页面编写 Front Matter
所谓页面的编写，其实就是对 .md 的编辑，关于 markdown 语法我们就不再赘述了。
这里尤其要说的一点是 Front Matter ，它其实就是对当前 .md 的声明。
有点类似于 HTML 文件中的 meta 标签的定位。
---
title HTML 进阶 // 当前页面的标题
lang en-US // 当前页面的语言 可多语言，默认英语
description // 当前页面的描述
layout // 设置当前页面的布局组件
---
样式修改
觉得自带的样式不喜欢？想自定义样式？
首先安装插件
npm i -D stylus stylus-loader
当然，如果不想使用任何 css预处理器 ，也可以直接用 css
那就赶紧在 .vitepress 文件夹下新建 custom.styl 文件以及 index.js
├── docs
│ ├── .vitepress (可选的)
│ │ ├── theme (可选的)
│ │ │ ├── custom.styl
│ │ │ └── index.js
在 index.js 中写入以下内容：
import DefaultTheme from 'vitepress/theme'
import './custom.css'
export default DefaultTheme
接下来，在 custom.styl 中尽情编写你想要的 css 代码。
如果想使用我的样式，可以具体参考我的 github 仓库 https://github.com/Jack-Star-T/vitePress
