【抽五分钟】使用VuePress创建在线文档中心

最新推荐文章于 2024-02-27 09:51:02 发布

小僧还俗

最新推荐文章于 2024-02-27 09:51:02 发布

阅读量1.5k

点赞数 1

分类专栏：前端 vue 文章标签： vue 前端

本文链接：https://blog.csdn.net/u012818292/article/details/109180713

版权

本文档介绍了如何使用VuePress进行在线文档中心的创建，包括安装初始化、核心配置、导航栏和侧边栏配置、静态资源管理和Nginx部署。同时讲解了使用Typora编写Markdown文档并整合到VuePress的过程。

摘要由CSDN通过智能技术生成

文章目录

安装初始化

全局安装

 npm install -g vuepress

mkdir vurepress-blog

项目初始化

cd vurepress-blog npm init -y

初始化完成生成package.json文件

在这里插入图片描述

在当前目录中创建docs目录，存放博客书籍内容

mkdir docs

配置首页显示（以下为默认配置）docs下创建README.md

---
home: true
heroImage: /img/logo.jpg
actionText: 快速上手 →
actionLink: /zh/guide/
features:
- title: 简洁至上
  details: 以 Markdown 为中心的项目结构，以最少的配置帮助你专注于写作。
- title: Vue驱动
  details: 享受 Vue + webpack 的开发体验，在 Markdown 中使用 Vue 组件，同时可以使用 Vue 来开发自定义主题。
- title: 高性能
  details: VuePress 为每个页面预渲染生成静态的 HTML，同时在页面被加载的时候，将作为 SPA 运行。
footer: MIT Licensed | Copyright © 2018-present You
---

核心配置

在docs目录下创建.vuepress目录

cd docs mkdir .vuepress

创建配置文件config.js，整个项目的核心配置文件，所有菜单、栏目相关的配置均配置在该模块中

touch config.js

在config.js中加入内容

module.exports = {
   
    title: '文档CMS',
    description: '文档管理中心',
    dest: './dist',
    port: '7777',
    head: [
        ['link', {
   rel: 'icon', href: '/logo.jpg'}]
    ],
    markdown: {
   
        lineNumbers: true
    },
    themeConfig: {
   
        nav: [{
   
            text: '小新指南', link: '/guide/'
        }],
        sidebar: {
   '/guide/':[
            {
   
                  title:'新手指南',
                  collapsable: true,
                  children:[