vitepress系列-01-搭建笔记骨架

文章目录

  • 搭建笔记骨架

搭建笔记骨架

环境依赖:Node.js 18 及以上版本。

项目创建-以macOS为例

# 1.创建空项目
mkdir vitepress-learn-notes# 2.进入 vitepress-learn-notes
cd vitepress-learn-notes# 3. 初始化项目
pnpm init# 4.安装vitepress 根据自己电脑的安装插件 比如 npm yarn pnpm bun
pnpm add -D vitepress# 5. 安装向导
pnpm vitepress init

注意:

VitePress 是仅 ESM 的软件包。不要使用 require() 导入它,并确保最新的 package.json 包含 "type": "module",或者更改相关文件的文件扩展名,例如 .vitepress/config.js.mjs/.mts。更多详情请参考 Vite 故障排除指南。此外,在异步 CJS 上下文中,可以使用 await import('vitepress') 代替。

将需要回答几个简单的问题:

┌  Welcome to VitePress!
│
◇  Where should VitePress initialize the config?
│  ./docs
│
◇  Site title:
│  My Awesome Project
│
◇  Site description:
│  A VitePress Site
│
◆  Theme:
│  ● Default Theme (Out of the box, good-looking docs)
│  ○ Default Theme + Customization
│  ○ Custom Theme
└

注意: Vue 作为 peer dependency 这边主要是修复,在vitepress中引用vue相关的API报错的问题。

Vue 作为 peer dependency
如果打算使用 Vue 组件或 API 进行自定义,还应该明确地将 vue 安装为 peer dependency。

文件结构

.
├─ docs
│  ├─ .vitepress
│  │  └─ config.js
│  ├─ api-examples.md
│  ├─ markdown-examples.md
│  └─ index.md
└─ package.json

目录说明:

docs 目录作为 VitePress 站点的项目根目录.vitepress 目录是 VitePress 配置文件、开发服务器缓存、构建输出和可选主题自定义代码的位置。

配置文件

配置文件 (.vitepress/config.js)

// .vitepress/config.js
export default {// 站点级选项title: 'VitePress',description: 'Just playing around.',themeConfig: {// 主题级选项}
}

还可以通过 themeConfig 选项配置主题的行为。有关所有配置选项的完整详细信息,请参见配置参考。

源文件

.vitepress 目录之外的 Markdown 文件被视为源文件

VitePress 使用 基于文件的路由:每个 .md 文件将在相同的路径被编译成为 .html 文件。例如,index.md 将会被编译成 index.html,可以在生成的 VitePress 站点的根路径 / 进行访问。

VitePress 还提供了生成简洁 URL、重写路径和动态生成页面的能力。这些将在路由指南中进行介绍。

启动并运行

该工具还应该将以下 npm 脚本注入到 package.json 中:

{..."scripts": {"docs:dev": "vitepress dev docs","docs:build": "vitepress build docs","docs:preview": "vitepress preview docs"},...
}

docs:dev 脚本将启动具有即时热更新的本地开发服务器。使用以下命令运行它:

pnpm run docs:dev

除了 npm 脚本,还可以直接调用 VitePress:

pnpm exec vitepress dev docs

更多的命令行用法请参见 CLI 参考。

下一步

  • 想要进一步了解 Markdown 文件是怎么映射到对应的 HTML,请继续阅读路由指南。
  • 要了解有关可以在页面上执行的操作的更多信息,例如编写 Markdown 内容或使用 Vue 组件,请参见指南的“编写”部分。一个很好的起点是了解 Markdown 扩展。
  • 要探索默认文档主题提供的功能,请查看默认主题配置参考。
  • 如果想进一步自定义站点的外观,参见扩展默认主题或者构建自定义主题。
  • 文档成形以后,务必阅读部署指南。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/799970.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

MongoDB数据更新中的乘法$mul

学习mongodb,体会mongodb的每一个使用细节,欢迎阅读威赞的文章。这是威赞发布的第57篇mongodb技术文章,欢迎浏览本专栏威赞发布的其他文章。 空闲下来,仔细阅读Mongodb的官方文档,发现很多新的功能。mongodb为了给开发…

【C++】STL--list

目录 list的介绍 list的使用 list的构造 list iterator的使用 list capacity list modifiers list的迭代器失效 list模拟实现 list的介绍 1. list是可以在常数范围内在任意位置进行插入和删除的序列式容器,并且该容器可以前后双向迭代。 2. list的底层是双向…

电容隔离型±10V输入隔离放大器特点:ISOC 124P

产品特点: 50KHz(-3dB)高带宽与ISO 124P隔离器Pin-Pin兼容 低成本小体积,标准DIP16Pin阻燃材料封装 精度等级:0.01级,全量程内非线性度0.01% 信号输入与输出之间:3000VDC隔离耐压 电源范围:4.5V~18V 双极运算:Vo10V 方便易用,固定单位增益配置…

ubuntu安装nginx以及开启文件服务器

1. 下载源码 下载页面:https://nginx.org/en/download.html 下载地址:https://nginx.org/download/nginx-1.24.0.tar.gz curl -O https://nginx.org/download/nginx-1.24.0.tar.gz2. 依赖配置 sudo apt install gcc make libpcre3-dev zlib1g-dev ope…

【分治算法】Strassen矩阵乘法Python实现

文章目录 [toc]问题描述基础算法时间复杂性 Strassen算法时间复杂性 问题时间复杂性Python实现 个人主页:丷从心. 系列专栏:Python基础 学习指南:Python学习指南 问题描述 设 A A A和 B B B是两个 n n n \times n nn矩阵, A A…

CICD流水线 发布应用到docker镜像仓库

准备工作 1.先注册免费的镜像仓库 复制链接: https://cr.console.aliyun.com/cn-beijing/instances 实施 1. 新建流水线,选择模板 2.添加流水线源,及是你的代码仓库, 选择对应分支. 3.代码检查以及单元测试,这个步骤可以不用动它. 4. …

gcc/g++:预编译阶段寻找头文件

预编译阶段寻找头文件大致可分为两种情况:1)系统头文件,2)用户头文件。 示例: 1)用户头文件 /*brief design and implements of demo-for-precompile-to-include.author wenxuanpeiemail 15873152445163.…

AI的力量感受(附网址)

输入 科技感的 二维码,生成如下,还是可以的 输入金属感 的芯片,效果就很好了 金属感 打印机,细节丰富,丁达尔效应 就有点跑题了 金属感 扫码仪 还有点像 3D 封装长这样,跑题比较严重 总之,AI还…

如何使用生成式人工智能撰写关于新产品发布的文章?

利用生成式人工智能撰写新产品发布文章确实是一种既有创意又高效的内容生成方式。以下是如何做到这一点的指南,附带一些背景信息: • 背景:在撰写文章之前,收集有关您的新产品的信息。这包括产品的名称、类别、特点、优势、目标受…

朗汀留学美国生物医学工程专业留学部分录取案例合集

满怀期待的憧憬与金榜题名的喜悦交织着未来的掌声,捧在手心里的不仅仅是一份一份努力浇灌的录取通知,更是一起拼搏走过的岁月沉淀。 我们感恩每一位朗汀留学的学生和家长,是你们的支持与信任,让我们有机会共享此刻的荣耀&#xff…

数据挖掘及其近年来研究热点介绍

🎀个人主页: https://zhangxiaoshu.blog.csdn.net 📢欢迎大家:关注🔍点赞👍评论📝收藏⭐️,如有错误敬请指正! 💕未来很长,值得我们全力奔赴更美好的生活&…

jdk目录结构

jdk目录详解 JDK(Java Development Kit,Java开发包,Java开发工具)是一个写Java的applet和应用程序的程序开发环境。它由一个处于操作系统层之上的运行环境还有开发者 编译,调试和运行用Java语言写的applet和应用程序所需的工具组成。 JDK(J…

【数据结构】考研真题攻克与重点知识点剖析 - 第 6 篇:图

前言 本文基础知识部分来自于b站:分享笔记的好人儿的思维导图与王道考研课程,感谢大佬的开源精神,习题来自老师划的重点以及考研真题。此前我尝试了完全使用Python或是结合大语言模型对考研真题进行数据清洗与可视化分析,本人技术…

通过 ffmpeg命令行 调节视频播放速度

1. 仅调整视频速率 视频调速原理:修改视频的pts,dts # 可能会丢帧 ffmpeg -i input.mkv -an -filter:v "setpts0.5*PTS" output.mkv # 可用-r参数指定输出视频FPS以防止丢帧 ffmpeg -i input.mkv -an -r 60 -filter:v "setpts2.0*PTS&q…

redis的HyperLogLogs详细介绍

Redis的HyperLogLogs是一种概率数据结构,用于估计集合中的元素个数,即基数。即使存储了超大数据(超过2^64的基数)的集合,HyperLogLogs也只需要12KB的内存,所有这使得其非常适合做大规模数据的去重计数。 H…

MySQL | 如何使用mysqldumpslow命令进行SQL慢查询分析?

关注WX:CodingTechWork 介绍 启用慢查询日志 编辑 MySQL 配置文件:打开 MySQL 的配置文件(通常是 my.cnf 或 my.ini)。 启用慢查询日志:找到以下配置项并进行设置: slow_query_log 1 # 启用…

爱普生语音芯片的特点与应用市场

随着物联网与智能家居的普及,越来越多的电子产品有了语音播报的需求。但是很多客户没有类似的开发经验或者他们的产品内部只能承载一个蜂鸣器。这样的情况下要如何实现快速的产品升级呢?下面让我们来看一下差普生语音芯片是如果帮助客户的。目前爱普生语音芯片分为…

Redis 的主从复制、哨兵和cluster集群

目录 一. Redis 主从复制 1. 介绍 2. 作用 3. 流程 4. 搭建 Redis 主从复制 安装redis 修改 master 的Redis配置文件 修改 slave 的Redis配置文件 验证主从效果 二. Redis 哨兵模式 1. 介绍 2. 原理 3. 哨兵模式的作用 4. 工作流程 4.1 故障转移机制 4.2 主节…

记录一次内网渗透过程

0x01 前言: 一切以学习为主,记录一次小小的攻击过程 本次是通过外网漏洞撕开的口子,主要通过一下方式 拿到了目标资产 nday扫一扫 弱口令爆一爆 上传接口找一找 后台上传找一找 数据库弱口令 关注新day,有了立马在资产里面…

K8s学习三(Pod与探针)

深入学习Pod Pod配置文件 写一个自己的配置文件,nginx-po.yaml apiVersion: v1 #api文档版本 kind: Pod #资源类型对象,也可以配置为像Development,StatefulSet这一类的对象 metadata: # Pod相关的元数据,用于描述Pod的数据name: nginx-po…