Vuepress 2从0-1保姆级入门教程——文档配置篇

已于 2024-06-12 23:02:26 修改
阅读量3.6k 收藏 17
点赞数 9
分类专栏： Vuepress 2教程 文章标签： vue
于 2023-02-19 20:57:02 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/passwordgloo/article/details/129114625
版权

在这里插入图片描述

Vuepress 2 专栏目录【已完结】

1. 入门阶段

  1. Vuepress 2从0-1保姆级入门教程——环境配置篇
  2. Vuepress 2从0-1保姆级入门教程——安装流程篇
  3. Vuepress 2从0-1保姆级入门教程——文档配置篇
  4. Vuepress 2从0-1保姆级入门教程——主题与部署

2.进阶阶段

  1. Vuepress 2从0-1保姆级进阶教程——全文搜索篇
  2. Vuepress 2从0-1保姆级进阶教程——美化与模版
  3. Vuepress 2从0-1保姆级进阶教程——标准化流程

更新日志

  • Markdown引用样式改为图片，更加醒目
  • config.ts示例代码修改
  • 更新到vuepress2.0.0-rc.13，默认主题2.0.0-rc.35

在这里插入图片描述

教程仓库：https://gitee.com/passwordgloo/comet-tutorial
蓝奏云：https://wwk.lanzouo.com/b04x8f3hg
密码：666

通过Vuepress 2 安装流程篇，我们成功搭建一个主页附带子版块页面的文档项目，下面我们将先细致分析配置结构，然后再一步步完善config.ts文件

一、配置文件夹结构

欲求其解，必窥其内。文档项目配置📁.vuepress包含以下内容

📁.vuepress
├── 📂 .cache git已忽略
│  └──……
├── 📂 public 静态文件夹
│   └── comet.png
├── 📂 .temp git已忽略
│  ├── internal
│   │   ├── clientConfigs.js客户端配置
│   │   ├── pagesComponents.js页面组件
│   │   ├── pagesData.js
│   │   ├── pagesRoutes.js 页面路由，不明白的看安装篇-路由
│   │   ├──siteData.js
│   │   └── themeData.js
│   ├── pages
│   │   ├── 404.html.js
│   │   ├── 404.html.vue
│   │   ├── C
│   │   │   ├── index.html.js 子模块首页
│   │   │   └── index.html.vue
│   │   ├── index.html.js首页，也就是站点README.md内容
│   │   └── index.html.vue
│   ├── styles
│   │   ├── index.scss样式文件
│   │   └── palette.scss
│   └── vite-root
│       └── index.html
└── 📋 config.ts 亟待完成的配置文件

我们看到每个Markdown文件都解析为.js和.vue后缀文件，唯独缺失config.ts配置文件，里面包含导航栏、侧边栏、首页logo等设置，而这正是我们需要做的

二、配置文件基本结构

import { defaultTheme } from '@vuepress/theme-default'
import { defineUserConfig } from 'vuepress/cli'
import { viteBundler } from '@vuepress/bundler-vite'

export default defineUserConfig({
		//favicon
		//站点语言设置
    theme: defaultTheme({
    	//logo
		//repo 仓库地址
		//主题语言设置
        //默认主题其他配置请写在这里！！！
    })
	bundler: viteBundler(),
})

三、配置文件设置选项

（一）标签栏小图标支持

favicon.ico（favourite icon缩写）是网站收藏夹图标，图片本地地址在public文件夹内，图片地址也可选填网络地址

在这里插入图片描述

1️⃣ 请先将favicon.ico文件放到📁 public内
2️⃣ 设置小图标位置

head: [['link', { rel: 'icon', href: '/favicon.ico' }]],

3️⃣ 预览

pnpm docs:dev

在这里插入图片描述

（二）仓库设置

在这里插入图片描述

repo: 'username/repoName',  
//默认识别为GitHub用户名和仓库名

预览

pnpm docs:dev

在这里插入图片描述

（三）Logo

1️⃣ 请先将Logo文件放到📁 public文件夹里
2️⃣ 设置logo文件位置，支持在线链接

logo: 'comet.png', //文件在public文件夹内

3️⃣ 预览

pnpm docs:dev

在这里插入图片描述

（四）多语言设置

1. 站点语言设置

在这里插入图片描述

在这里插入图片描述

  lang: 'zh-CN',
  // 默认站点语言为英文
  // lang: 'en-US',

  locales: {
    '/': {
        selectLanguageName: '简体中文',
        title: '彗星文档',
        description: '繁星似海 熠熠生辉',
    },
    '/en/': {
        selectLanguageName: 'English',
        title: 'Comet documents',
        description: 'my book',
    },
  },

在这里插入图片描述

2. 主题语言配置

Vuepress只提供基础语言功能，把语言名称，文本提示交给主题设置，方便用户主题自定义

请定位到下列代码

 theme: defaultTheme({
        // 以下所有配置写在这里！！！
    })

然后输入

       locales: {
            '/': {
                selectLanguageName: '简体中文',
                selectLanguageText: '选择语言',
            },
            '/en/': {
                selectLanguageName: 'English',
                selectLanguageText: 'Language',
            }
        }

在这里插入图片描述

（五）导航栏

考虑到日后config.ts文件臃肿问题，需要单独拆分

📂.vuepress新建📂navbar，用于存放特定语言导航条配置,然后分别新建以下文件

1.zh.ts

大家玩过俄罗斯套娃吗？名称+链接（本地或在线均可）组成一个条目(item)，两层嵌套中text表示区域标题，用children嵌套多个条目，无论是navbar还是sidebar都适用。

在这里插入图片描述

export const zhNavbar = [
    //单层
    {
        text: '主页',
        link: '/',
        // 该元素将一直处于激活状态
        activeMatch: '/',
    },
    //两层嵌套
    {
        text: '语言',
        children:
            [
                {
                    text: '程序',
                    children:
                        [
                            { text: 'C', link: 'https://code.iglooblog.top/c/1.html' },
                            { text: 'Js', link: '/js/' }
                        ]
                },
                {
                    text: '标记',
                    children:
                        [
                            { text: 'HTML', link: 'https://code.iglooblog.top/html/1.html' },
                            { text: 'Markdown', link: 'https://1m29yg5p67.k.topthink.com/@markdown' },
                            { text: 'CSS', link: 'https://code.iglooblog.top/css/1.html' }
                        ]
                },
            ],
    },
    //多个条目
    {
        text: '课程',
        children: [
            { text: '政治', link: 'politics' },
            { text: '英语', link: 'english' }
        ],
    },
    {
        text: '关于',
        link: '/about',
    },
    
    // 字符串 - 页面文件路径
    // '/Guide/README.md',
]

在这里插入图片描述

2.en.ts

如果不要英文导航条，可以空着

export const enNavbar = [ 
]

3.switch.ts

在这里插入图片描述

export * from './en.js'
export * from './zh.js'

在这里插入图片描述

4.引入switch.ts

回到config.ts文件中，修改为图中选中代码

import {zhNavbar,enNavbar,} from './navbar/switch.js'

在这里插入图片描述

5.预览

pnpm docs:dev

在这里插入图片描述

（六）侧边栏

请复制粘贴以下链接下载js.zip并解压到📁docs，否则无法展示侧边栏效果

蓝奏云：https://wwk.lanzouo.com/b04x8f3hg
密码：666

参照导航条做法，📂.vuepress新建📂sidebar，用于存放特定语言侧边栏配置,然后分别新建以下文件

在这里插入图片描述

1.zh.ts

export const zhSidebar = {
    '/js/': [
        {
            text: '目录',
            //可折叠侧边栏
            collapsible: true,
            children: [
                {
                    text:'变量',
                    link:'var'
                },
                {
                    text:'运算符',
                    link:'operator'
                },
                {
                    text:'数据类型',
                    link:'dataType'
                },
                {
                    text:'数组',
                    link:'array'
                },
                {
                    text:'表达式与语句',
                    link:'sentence'
                },
                ],
        }
    ],
}

2.en.ts

export const enSidebar = {
}

3.switch.ts

export * from './en.js'
export * from './zh.js'

4.引入switch.ts

回到config.ts文件中，修改为图中选中代码

import {zhSidebar,enSidebar,} from './sidebar/switch.js'

在这里插入图片描述

5.预览

pnpm docs:dev

点击导航栏里的js,预览效果

在这里插入图片描述
在这里插入图片描述

（七）404页面与返回主页

notFound:['没找到','网页走丢了'],
backToHome:'返回首页'

在这里插入图片描述

预览

pnpm docs:dev

在这里插入图片描述

四、示例

上文已给出导航条和侧边栏代码，编辑完成后的config.ts⬇️

import { defaultTheme } from '@vuepress/theme-default'
import { defineUserConfig } from 'vuepress/cli'
import { viteBundler } from '@vuepress/bundler-vite'
import {zhNavbar,enNavbar,} from './navbar/switch.js'
import {zhSidebar,enSidebar,} from './sidebar/switch.js'

export default defineUserConfig({

  head: [['link', { rel: 'icon', href: '/favicon.ico' }]],


  lang: 'zh-CN',
  // 默认站点语言为英文
  // lang: 'en-US',

  locales: {
    '/': {
        selectLanguageName: '简体中文',
        title: '彗星文档',
        description: '繁星似海 熠熠生辉',
    },
    '/en/': {
        selectLanguageName: 'English',
        title: 'Comet documents',
        description: 'my book',
  
    },
  },

  theme: defaultTheme({
    logo: 'comet.png',
    repo:'passwordgloo/comet-doc',
    locales: {
      '/': {
          selectLanguageName: '简体中文',
          selectLanguageText: '选择语言',
          navbar:zhNavbar,
          sidebar:zhSidebar,
          notFound:['没找到','网页走丢了'],
          backToHome:'返回首页'
      },
      '/en/': {
          selectLanguageName: 'English',
          selectLanguageText: 'Language',
          navbar:enNavbar,
          sidebar:enSidebar
      }
    },
  }),

  bundler: viteBundler(),
})
passwordgloo
关注
  • 9
    点赞
  • 踩
  • 17
    收藏
    觉得还不错? 一键收藏
  • 10
    评论
专栏目录
vuepress-next：VuePress 2的回购
02-11
vuepress-next 状态：Alpha 使用TypeScript已完全重构了代码库。 一些主要变化： 完全迁移到Vue 3 从vuepress包中提取@vuepress/cli 从@vuepress/core包中提取@vuepress/client 从@vuepress/core包中提取@vuepress/bundler-webpack并迁移到webpack 5 由于webpack与核心解耦，因此也可能支持其他捆绑器 从@vuepress/core包中提取@vuepress/plugin-palette-stylus @vuepress/core手写笔不再是默认CSS预处理器，样式的自定义方式应由主题决定 该文档尚未完成。 现在，您可以查看下面的重大更改列表作为迁移参考。 文献资料 贡献 请参阅。 待办事项清单 @ vuepress / markdown 插件 文献资料
Vuepress 2从0-1保姆级入门教程——环境配置篇
passwordgloo的博客
08-20 1634
Vuepress安装前置环境
2024年最全Vue进阶（九十六）：VuePress 详解，前端多线程断点续传
最新发布
2301_82244330的博客
05-07 651
还有很多的同学在学习的过程中一味的追求学的速度，很快速的刷视频，写了后面忘了前面，最后什么都没有学到，什么都知道，但是什么都不懂，要具体说，也说不出个所以然。很多自学的朋友往往都是自己去找资料学习的，资料上有的或许就学到了，资料上没有的或许就没有学到。最重要的是，在学习的过程中，不知道每个部分该学哪些知识点，学到什么程度才算好，学了能做什么。因为自学走的弯路是比较的多的，会踩很多的坑，学习的过程中是比较的迷茫的。这就会给人一个错误的信息就是，我把资料上的学完了，估计也-就差不多的了。来调试你的自定义主题！
彻底学会快速部署vue框架，一篇就够了
m0_60028455的博客
04-21 8160
为什么要使用Vue Vue框架诞生于2014年，其作者为中国人——尤雨溪，也是新人最容易入手的框架之一，不同于React和Angular,其中文文档也便于大家阅读和学习。Vue用于构建交互式的Web界面的库，是一个用于构建用户界面的渐进式框架。与其他单体框架不同，Vue 从头开始设计为可逐步采用。核心库仅专注于视图层，易于获取并与其他库或现有项目集成。另一方面，当与现代工具和支持库结合使用时，Vue 也完全能够为复杂的单页应用程序提供支持。 通过本教程中，你将从头开始构建自己的应用，分别使用Vue CLI
vuepress使用简介及个人博客搭建
很多时候犯错都是在不知情的情况下发生的
09-29 640
npm 出现之前，前端依赖项是保存到存储库中并手动下载的，而如今，大量依赖项存储在神奇的 node_modules 内的嵌套文件夹中，Yarn 是为了弥补 npm 的一些缺陷而出现的，为了防止拉取到不同的版本，Yarn 有一个锁定文件 (yarn.lock) 记录了被确切安装上的模块的版本号，后来npm也做了一些类似的改进新增了类似yarn.lock的 package-lock.json。默认情况下，侧边栏会自动显示当前页面的标题(h2~h3)组成的链接，所以上面的案例中我们看到都是h2和h3可以被点击。
VuePress学习指南（上）
qq_34185872的博客
06-01 1137
VuePress 是一个静态网站生成器，它基于 Vue.js 和 Markdown 来创建文档网站。VuePress 能够快速创建高质量的文档网站，具有易用性和可定制性。VuePress 采用了现代化的技术栈，包括 webpack、Vue.js、markdown-it 等等，这些技术使得 VuePress 具备自定义主题和插件、支持代码语法高亮、提供搜索和分页等功能。VuePress 还能够对网站进行优化，例如 gzip 压缩、预渲染和缓存等操作，从而提升网站的性能和访问速度。
vuepress2.0使用教程（7）-扩展默认主题- 提供更多页面模板并引入ElementUI
baijiafan的博客
08-13 2971
vuepress 2.0的进阶用法，编辑我们自己的模板啦
vuepress的使用
小菜张的博客
09-28 1635
vuepress
SUMO学习-入门篇-保姆级教程.pdf
01-17
SUMO学习-入门篇教程 SUMO（Simulation of Urban Mobility）是一款交通运输仿真软件，广泛应用于交通运输领域的研究和学习。下面是SUMO学习的入门篇教程，涵盖SUMO的安装、Python的安装、路网生成、Trips文件生成、...
K12项目小红书0-1保姆级操作教程（文字+视频）.pdf
07-05
3. 发布频率：从第5天开始，每天发布1-2个图文笔记，保持规律。 四、图片制作与写作技巧 1. 封面图：利用稿定设计、图怪兽等工具制作吸引人的封面，增加点击率。 2. 内容创作：提供有价值的信息，如学科知识点、...
基于Vue的后台管理系统:vue-pure-admin
03-02
主要语言：Vue 项目分类：[后端] [前端] 项目标签：[Vue3模版] [Vue] 推荐理由：一款用Vue3+Vite4+Element-Plus+TypeScript编写的后台管理系统，兼容移动端。这个系统以其强大的功能和现代化的技术栈为开发者提供了...
vuepress2.0使用教程（6）-扩展默认模板之准备及扩展页面组件
baijiafan的博客
08-12 1752
vuepress 2.0全功能介绍，第三部分，默认主题的扩展
超详细的vuepress搭建教程
香辣猪头肉的博客
04-14 1440
vuepress超详细项目搭建
使用vuepress搭建文档站点
weixin_42349568的博客
09-22 2399
后续的部署测试啥的，比较常规，就不写了。这时候，无论点击导航栏还是侧边栏。都会报404，这是因为生成路由了，但是没有对应的页面（vuepress下每个md文件就是一个页面）。到这一步，已经可以开始写markdown技术文档了，但是每次新增，都需要手动新增侧边栏的配置，这样一点也不机智，我希望它能够自动生成侧边栏。为了简化开发成本，我们可以直接使用主题，这里我用的是：[vuepress theme vdoing](导航栏可能包含你的页面标题、搜索框、 导航栏链接、多语言切换、仓库链接，它们均取决于你的配置。
vuepress-----13、分割config
weixin_44235759的博客
12-07 566
【代码】vuepress-----13、分割config。
VuePress 完整使用教程
Jumbo
11-06 4000
官网 官网地址：https://vuepress.vuejs.org/zh/ 环境 1.node hexo 基于 node，所以首先要安装node环境 2.npm 包管理工具 环境配置请参考本站对应安装教程 快速开始 创建并进入一个新目录 mkdir vuepress-starter && cd vuepress-starter 使用你喜欢的包管理器进行初始化 yarn init # npm init 将 VuePress 安装为本地依赖 我们已经不再推荐全局安装 V.
搭建一个vuepress静态网站及配置
qq_43958325的博客
05-31 4760
搭建一个自己的vuePress的静态网站并使用部分的markdown进行美化
vue dhtmlx-gantt 导出excel 保姆级完整教程
07-14
当涉及到 Vue DHTMLX-Gantt 导出 Excel 的保姆级完整教程时，以下是一步一步的指南： 1. 确保您的项目中已经安装了 Vue 和 DHTMLX-Gantt。如果尚未安装，请使用以下命令进行安装： ```bash npm install vue dhtmlx-gantt ``` 2. 在您的 Vue 组件中引入所需的库和样式： ```javascript import 'dhtmlx-gantt'; import 'dhtmlx-gantt/codebase/dhtmlxgantt.css'; ``` 3. 创建一个 Vue 组件，并在模板中添加一个 Gantt 图表和一个按钮： ```html <template> <div ref="ganttContainer" style="width: 100%; height: 600px;"></div> <button @click="exportData">导出 Excel</button> </template> <script> import * as XLSX from 'xlsx'; import FileSaver from 'file-saver'; export default { mounted() { const ganttContainer = this.$refs.ganttContainer; gantt.init(ganttContainer); // 设置 Gantt 图表的配置和数据 // 示例数据 const tasks = [ { id: 1, text: '任务1', start_date: '2022-01-01', duration: 5, progress: 0.5 }, { id: 2, text: '任务2', start_date: '2022-01-06', duration: 4, progress: 0.2 }, // 其他任务... ]; gantt.parse({ data: tasks }); }, methods: { exportData() { const gantt = this.$refs.ganttContainer.$gantt; const tasks = gantt.getDatastore('task').getItems(); // 将任务数据转换为 Excel 数据格式 const data = tasks.map((task) => { return { id: task.id, text: task.text, start_date: task.start_date, duration: task.duration, progress: task.progress, }; }); // 创建 Excel 文件 const worksheet = XLSX.utils.json_to_sheet(data); const workbook = XLSX.utils.book_new(); XLSX.utils.book_append_sheet(workbook, worksheet, 'Gantt Data'); const excelBuffer = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' }); const excelData = new Blob([excelBuffer], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' }); // 下载 Excel 文件 FileSaver.saveAs(excelData, 'gantt_data.xlsx'); }, }, }; </script> <style> /* 可选的样式 */ </style> ``` 4. 在上述示例代码中，需要注意以下部分： - 在 `mounted` 钩子中，使用 `gantt.init(ganttContainer)` 初始化 Gantt 图表，并根据您的需求设置其配置和数据。 - `exportData` 方法用于将 Gantt 图表数据导出到 Excel。确保在 `exportData` 方法中的 `this.$refs.ganttContainer.$gantt` 是对 Gantt 图表组件的正确引用。 - 点击 "导出 Excel" 按钮时，将会生成一个名为 `gantt_data.xlsx` 的 Excel 文件，其中包含了 Gantt 图表的数据。 这就是使用 Vue DHTMLX-Gantt 导出 Excel 的保姆级完整教程。希望对您有所帮助！如果您有任何其他问题，请随时提问。
评论 10
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值