简介

VuePress 是一个基于 Vue.js 的静态网站生成器，主要用于生成文档网站。它最初是由 Vue.js 的创建者尤雨溪（Evan You）开发的，旨在为 Vue.js 的文档提供一个简洁高效的解决方案。

什么是VuePress?

是文档教程类网站的一个前端开发模板，vue官网、vuePress等官网都是用这个模板开发的。大概长这个样子：

VuePress是 Vue、Vue Router(opens new window)和 webpack(opens new window)驱动的单页应用

vitePress项目创建教程

1.创建项目目录 vuePress-Doc

js 复制代码

 mkdir vuePress-Doc    //命令行工具内创建或者直接在桌面创建vuePress-Doc文件夹

2. 包管理工具初始化

js 复制代码

cd vuePress-Doc    		//进入创建的目录中

js 复制代码

npm init -y           //初始化目录，-y代表使用默认配置

初始化完成后，目录里会出现一个package.json文件

3. 安装 vitepress 依赖

js 复制代码

npm install -D vuepress

安装完成后，目录里会出现node_modules依赖包和package-lock.json文件

4. 创建 docs 文件夹（ docs文件夹被vuepress视为根目录）

js 复制代码

 mkdir docs     //命令行工具内创建或者直接在桌面创建

5. 在 docs 文件夹下创建 README.md 文件并写入内容

js 复制代码

# 欢迎使用本教程！

使用记事本编辑内容就可以了！

6. 添加启动相关脚本到 package.json中

js 复制代码

{
  "scripts": {
    "docs:dev": "vuepress dev docs",
    "docs:build": "vuepress build docs"
  }
}

7.启动项目

js 复制代码

npm run docs:dev

可能出現的狀況（項目运行报错）：

Error [ERR_PACKAGE_PATH_NOT_EXPORTED]: Package subpath './dist/vue.runtime.esm-bundler.js' is not defined by "exports" in C:\Users\Administrator\Desktop\vitePress-Doc\node_modules\vue\package.json

at applyExports (internal/modules/cjs/loader.js:490:9)

解决方法：node版本过低，更新版本即可

根据提示的服务器地址打开界面（默认为 http://localhost:8080）

界面如下

问：为什么在 README.md 中写的东西会在首页出现呢？（浏览器默认的入口文件是index.html）

答：vuepress是基于webpack的，webpack会将md文件编译为html，因此， README.md 相当于网站的入口文件index.html。

此外，页面的路由是以docs目录为根目录的， 下面所有的"文件的相对路径"都是相对于 docs 目录的。

文件的相对路径	页面路由地址
/README.md	/
/guide/README.md	/guide/
/config.md	/config.html

项目基础配置

vuepress搭建的网站主要是通过配置完成的，不用大量写代码，因此可以极大加快开发效率！没有配置，页面就很简单，如上面的截图。

配置的方法是在 docs 目录下创建 .vuepress 目录，在该目录下创建config.js文件即可开始设置配置

js 复制代码

.
├─ docs
│  ├─ README.md
│  └─ .vuepress
│     └─ config.js
└─ package.json

VuePress 站点必要的配置文件是 .vuepress/config.js，它应该导出一个 JavaScript 对象。

js 复制代码

module.exports = {
  title: '这是标题！',
  description: '这是描述'
}

界面如下：

手写一个PersonUi文档教程！

基于v2.0.0-beta.27

页面配置

页面配置主要包括网页的导航栏（navbar）、侧边栏（sidebar）和首页（homepage）的样式及交互等等。所有的配置都是在.vuepress/config.js中完成的，来个最简单的配置：

config.js中

js 复制代码

module.exports = {
  lang: 'zh-CN',
  title: 'Person Ui',
  description: '个人Person Ui站点',
  //主题配置
  themeConfig: {
    
  },
}

README.md中

js 复制代码

#这是首页！还没有开始配置！

界面长这个样子

首页

在docs的根目录index.md文件中写入以下内容：

js 复制代码

---
home: true
heroImage: images/logo.png
heroText: Person UI
tagline: 基于Vue3的私人组件库！
actionText: 快速上手 →
actionLink: /guide/
features:
- title: 简洁至上
  details: 以 Markdown 为中心的项目结构，以最少的配置帮助你专注于写作。
- title: Vue驱动
  details: 享受 Vue + webpack 的开发体验，在 Markdown 中使用 Vue 组件，同时可以使用 Vue 来开发自定义主题。
- title: 高性能
  details: VuePress 为每个页面预渲染生成静态的 HTML，同时在页面被加载的时候，将作为 SPA 运行。
footer: 2021 | Maked BY gcshi
---

config.js修改如下：

css 复制代码

module.exports = {
  lang: 'zh-CN',
  title: 'Person Ui',
  description: '个人Person Ui站点',
  head: [['link', { rel: 'icon', href: '/images/logo.png' }]],
  //主题配置
  themeConfig: {
    // 相对于public 文件夹下的路径
    logo: '/images/logo.png',
  },
}

效果如下：

配置作用域

config.js的配置项中，有一个 themeConfig 配置项。在 themeConfig 外部的配置项属于 站点配置 ，而在 themeConfig 内部的配置项则属于 主题配置。

站点配置

站点配置是针对网站或者站点本身而言的，无论使用什么样的主题配置，这些配置项都可以生效。

js 复制代码

module.exports = {
  //站点配置
  lang: 'zh-CN',
  title: 'Person Ui',
  description: '个人Person Ui站点',
  head: [['link', { rel: 'icon', href: '/images/logo.jpg' }]],
  //主题配置
  themeConfig: {
    
  },
}

主题配置

vuepress提供默认主题或者自定义主题。主题配置主要包括导航栏（navbar）、侧边栏（sidebar）等

导航栏的配置

导航栏包含页面标题、搜索框、导航栏链接、多语言切换、仓库链接等等，是否显示取决于配置。

配置在 .vuepress 目录下的config.js 内的themeConfig 属性内进行设置
导航栏 Logo

js 复制代码

module.exports = {
  themeConfig: {
    // 相对于public 文件夹下的路径
    logo: '/images/logo.png',
  }
}

| 配置项 | 类型或默认值 | 配置含义 |
|--------------------|--------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|-------------------------|
| logo | null | string | 显示在导航栏的左端的Logo 图片的 URL。 |
| logoDark | null | string | 在夜间模式中使用的 Logo 图片的 URL。 |
| darkMode | boolean：true | 是否启用切换夜间模式的功能。 |
| repo | string | 显示为导航栏的最后一个仓库链接元素。 |
| repoLabel | string | 项目仓库的标签。不明确指定，它将会根据 repo 配置项自动推断。 |
| selectLanguageText | string | 选择语言菜单的文字，与语言配置项locales有关 |

导航栏链接

js 复制代码

// .vuepress/config.js
module.exports = {
  themeConfig: {
    nav: [
      { text: '首页', link: '/' },
      { text: '指南', link: '/guide/' },  //docs目前还没有创建这个目录,先这么写
      { text: 'Git连接', link: 'https://www.bilibili.com/' }, //先填个B站吧
    ]
  }
}

注：外部链接标签的特性将默认包含target="_blank" rel="noopener noreferrer" ，可以更改
[效果如下：

在增加个可以下拉的教程栏吧

js 复制代码

// .vuepress/config.js
module.exports = {
themeConfig: {
------------------------如上不变，省略--------------------------------------
{
text: '教程',
items: [
{ text: '开发指南', link: 'https://www.bilibili.com/' }, //先填个B站吧
{ text: '组件', link: 'https://www.bilibili.com/' } //先填个B站吧
]
}
]
}
}

效果还不错，在增加一下开发指南和组件的分组内容吧

js 复制代码

module.exports = {
base: '/',
lang: 'zh-CN',
title: 'Person Ui',//导航栏标题
description: 'Person Ui个人网站',//
//主题配置
themeConfig: {
logo: '/assets/img/logo.png',//导航栏图标
//导航栏链接
nav: [
{ text: '首页', link: '/' },
{ text: '指南', link: '/guide/' }, //docs目前还没有创建这个目录,先这么写
{ text: 'Git连接', link: 'https://www.bilibili.com/' }, //先填个B站吧
{ text: '教程',
items: [
{ text: '开发指南',
items:[{text:"安装",link:"/"}, {text:"快速上手",link:"/"}]
},
{ text: '组件',
items:[{text:"字体",link:"/"}, {text:"图标",link:"/"}]
},
]
}
]
}
}

实际演示后发现会报错，由于vitepprpess是vuepress的小弟弟，可能这个嵌套的功能还没开发吧。。。。。

禁用导航栏

js 复制代码

// .vuepress/config.js
module.exports = {
themeConfig: {
navbar: false
}
}

侧边栏

配置在themeConfig 属性的Sidebar字段内](https://link.juejin.cn?target= "")

静态文档网站生成神奇器：VuePress！尤雨溪的旧爱！

简介

什么是VuePress?

vitePress项目创建教程

项目基础配置

手写一个PersonUi文档教程！

页面配置

首页

配置作用域

导航栏的配置

导航栏链接

禁用导航栏

侧边栏