VuePress介绍及使用指南

Love The Way You Lie 2024-02-18 10:12 16阅读 0赞

VuePress是一个基于Vue.js的静态网站生成工具，它专注于以Markdown为中心的项目文档。VuePress具有简单易用的特性，同时提供了强大的自定义和扩展性。在本文中，我们将介绍VuePress的基本概念，并提供一个简单的使用指南。

![vuepress.jpg][]

#### 什么是VuePress？ ####

官方文档地址： [https://vuepress.vuejs.org/zh/][https_vuepress.vuejs.org_zh]

github地址：[https://github.com/vuejs/vuepress][https_github.com_vuejs_vuepress]

VuePress是一个由Vue.js提供支持的静态网站生成器。它的主要特点包括：

*  基于Markdown： VuePress以Markdown为中心，使得编写文档变得简单而直观。
 *  Vue驱动： VuePress使用Vue.js进行开发，允许用户在Markdown中嵌入Vue组件，从而提供更强大的定制和交互性。
 *  默认主题： VuePress提供了一个现代化、响应式的默认主题，适用于各种文档项目。
 *  插件系统： VuePress具有灵活的插件系统，允许用户通过插件来扩展和定制网站的功能。

#### 快速使用 ####

虽然VuePress已经发布了v2.0的beta 版本，但是v2.0版本依赖的node版本必须大于 v18.16.0+,在linux上build的时候GLIBC\_2.28版本也要2.28，会有一系列问题，所以我们选用的是相对稳定的v1.0版本。v1.0版本依赖的 Node.js (opens new window)>= 8.6。

1.  创建一个vuepress的文件夹

mkdir vuepress
    
    cd vuepress

1.  使用你喜欢的包管理器进行初始化(建议使用yarn)

如果本地没用yarn 可先使用以下命令安转yarn

npm install -g yarn

初始化

yarn init  # npm init

1.  将 VuePress 安装为本地依赖

yarn add -D vuepress # npm install -D vuepress

注意： 如果你的现有项目依赖了 webpack 3.x，推荐使用 Yarn (opens new window)而不是 npm 来安装 VuePress。因为在这种情形下，npm 会生成错误的依赖树。

1.  创建文档

mkdir docs && echo '# Hello VuePress' > docs/README.md

此处可以使用其它工具编辑README.md文件

1.  在 package.json 中添加scripts

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

1.  添加config.js配置

在docs下的.vuepress文件夹下添加config.js文件

module.exports = {
        
        title: '修己xj',// 设置网站标题
        description: '修己xj',
        base: '/',   // 设置站点根路径
        dist: './docs/.vuepress/dist',  // 设置输出目录
        port: 8012,
        head: [
            ['link', {
         rel: 'icon', href: '/logo.jpg' }] // 增加一个自定义的 favicon
        ],
        plugins: [],
        themeConfig: {
        
            logo: '/logo.jpg',
            // 添加导航栏
            nav: [
                {
         text: '主页', link: '/' },
                {
         text: '博客',
                     items: [
                         {
         text: 'csdn', link: 'https://blog.csdn.net/weixin_44002151?type=blog' },
                         {
         text: '掘金', link: 'https://juejin.cn/user/2641475936724142' },
                         {
         text: '知乎', link: 'https://www.zhihu.com/people/xiuji_lew' },
                         {
         text: '51cto', link: 'https://blog.51cto.com/xiuji' }
                     ]
                 }
            ]
        }
    }

图片的默认地址是docs/.vuepress/public

1.  在本地启动服务

使用以下命令启动服务

yarn docs:dev # npm run docs:dev

默认端口是8080，在config.js中可以自己定义，我们此处使用的是8012，启动好之后访问localhost:8012就可以访问到我们的服务了

![\_20231113232708.jpg][20231113232708.jpg]

1.  nginx部署

我们使用以下命令打包服务

yarn docs:build  # npm run docs:build

构建好之后的静态文件在 docs/.vuepress/dist目录下，我们只需将dist文件夹下的文件及文件夹复制到我们部署的nginx服务的html文件夹下即可，docker部署nginx可以参考博主之前的文章`Nginx简介与Docker Compose部署指南`

#### 结语 ####

VuePress是一个强大而灵活的静态网站生成工具，特别适合构建文档和博客。通过简单的安装和初始化步骤，你就可以轻松开始使用VuePress构建自己的网站。希望这篇介绍和指南对你了解和使用VuePress有所帮助。

[vuepress.jpg]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/18/d7d709ec9c344a8ea9f84781df7c7417.png
[https_vuepress.vuejs.org_zh]: https://vuepress.vuejs.org/zh/
[https_github.com_vuejs_vuepress]: https://github.com/vuejs/vuepress
[20231113232708.jpg]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/18/4673c79d1f1649a8b47dcba17af76ecd.png