VuePress介绍及使用指南

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

vuepress.jpg

什么是VuePress?

官方文档地址: vuepress.vuejs.org/zh/

github地址:github.com/vuejs/vuepr...

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的文件夹
bash 复制代码
mkdir vuepress

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

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

复制代码
npm install -g yarn

初始化

csharp 复制代码
yarn init  # npm init
  1. 将 VuePress 安装为本地依赖
csharp 复制代码
yarn add -D vuepress # npm install -D vuepress

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

  1. 创建文档
bash 复制代码
mkdir docs && echo '# Hello VuePress' > docs/README.md

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

  1. 在 package.json 中添加scripts
json 复制代码
{
  "scripts": {
    "docs:dev": "vuepress dev docs",
    "docs:build": "vuepress build docs"
  }
}
  1. 添加config.js配置

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

arduino 复制代码
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. 在本地启动服务

使用以下命令启动服务

arduino 复制代码
yarn docs:dev # npm run docs:dev

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

_20231113232708.jpg

  1. nginx部署

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

arduino 复制代码
yarn docs:build  # npm run docs:build

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

结语

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

相关推荐
腾讯TNTWeb前端团队3 小时前
helux v5 发布了,像pinia一样优雅地管理你的react状态吧
前端·javascript·react.js
范文杰7 小时前
AI 时代如何更高效开发前端组件?21st.dev 给了一种答案
前端·ai编程
拉不动的猪7 小时前
刷刷题50(常见的js数据通信与渲染问题)
前端·javascript·面试
拉不动的猪7 小时前
JS多线程Webworks中的几种实战场景演示
前端·javascript·面试
FreeCultureBoy8 小时前
macOS 命令行 原生挂载 webdav 方法
前端
uhakadotcom8 小时前
Astro 框架:快速构建内容驱动型网站的利器
前端·javascript·面试
uhakadotcom9 小时前
了解Nest.js和Next.js:如何选择合适的框架
前端·javascript·面试
uhakadotcom9 小时前
React与Next.js:基础知识及应用场景
前端·面试·github
uhakadotcom9 小时前
Remix 框架:性能与易用性的完美结合
前端·javascript·面试
uhakadotcom9 小时前
Node.js 包管理器:npm vs pnpm
前端·javascript·面试