简介

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

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

2. 包管理工具初始化

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

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

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

3. 安装 vitepress 依赖

npm install -D vuepress

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

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

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

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

# 欢迎使用本教程！

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

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

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

7.启动项目

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 目录的。

项目基础配置

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

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

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

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

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

界面如下：

手写一个PersonUi文档教程！

基于v2.0.0-beta.27

页面配置

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

config.js中

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

  },
}

README.md中

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

界面长这个样子

首页

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

---
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修改如下：

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 内部的配置项则属于 主题配置。

站点配置

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

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

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

导航栏链接

// .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" ，可以更改

效果如下：

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

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

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

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的小弟弟，可能这个嵌套的功能还没开发吧。。。。。

禁用导航栏

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

侧边栏

配置在themeConfig属性的Sidebar字段内