VitePress-01-从零开始的项目创建(npm版)

news/2024/7/27 8:08:02/文章来源:https://blog.csdn.net/qq_39505245/article/details/135613265

说明

本文介绍一下 VitePress的项目创建的步骤。
主要用到的命令工具是 npm
本文的操作步骤是从无到有的创建一个完整的基本的【VitePress】项目。

环境准备

根据官方文档的介绍,截止本文发稿时,需要使用node.js 18+ 的版本。
可以使用node -v 的命令查看版本。
如果不满足要求的,可以安装一下后再进行本文的继续阅读。

在这里插入图片描述

创建一个目录作为项目目录

mkdir vitepressProject01

进入目录,安装 vitepress 依赖

cd vitepressProject01
npm install vitepress --save-dev

安装完成后 项目中会生成 package.json 文件,
因为我们是空目录下直接执行的 npm install 命令,所以,该文件的内容也是非常的简单,如下:

{"devDependencies": {"vitepress": "^1.0.0-rc.36"}
}

执行安装向导(核心

这个步骤是本文的重点,
主要用到的 vitepress命令来引导我们创建项目,填写一些项目的必要信息。
执行完成后 会 自动生成基本的项目结构与项目中的文档。

执行命令

# 本命令是为了确保后面的命令在项目目录下执行
cd vitepressProject01
# 核心命令,执行完此命令之后开始了正式创建项目的过程
npx vitepress init

过程记录

这个过程,主要是根据引导填写一些信息,从而完善项目的基本信息。

┌  Welcome to VitePress! # 开始创建
│
◇  Where should VitePress initialize the config?  # 指定项目配置文件的目录,【./】 表示项目的根目录
│  ./
│
◇  Site title: # 指定项目的名称
│  创建项目案例
│
◇  Site description: # 指定项目的描述
│  对VitePress项目创建的简单测试
│
◇  Theme: # 选择项目的主题
│  Default Theme
│
◇  Use TypeScript for config and theme files? # 选择时候使用ts进行配置
│  Yes
│
◇  Add VitePress npm scripts to package.json? # 选择是否自动添加相关的脚本到 package.json 文件中
│  Yes
│
└  Done! Now run npm run docs:dev and start writing. # 完成创建

执行结果

package.json 文件中添加了启动脚本

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

自动生成相关的文件,项目目录结构成型

vitepressProject01
├── .vitepress 				# 项目相关的配置文件,都放在这个目录下
│   └── config.mts 			# 本项目的配置文件,ts 的
├── api-examples.md 		# 自动生成的一个文档文件
├── index.md 				# 项目的入口文件
├── markdown-examples.md 	# 自动生成的一个文档文件
├── node_modules 			# 需要用到的依赖
├── package-lock.json
└── package.json 			# 脚本配置文件

【 补充1 】
默认情况下,VitePress 将其开发服务器缓存存储在 .vitepress/cache 中,并将生产构建输出存储在 .vitepress/dist 中。
如果使用 Git,应该将它们添加到 .gitignore 文件中。也可以手动配置这些位置。

【 补充2 】
【.vitepress】 目录中存放的是项目的配置相关的内容;
项目中其他的【.md】文件,都是项目的源文件,会被编译成 【.html】文件在浏览器中进行访问。

本文暂不对文件的具体内容做分析,只是了解基本的项目结构即可。

启动并访问项目

启动命令

根据的是在 package.json 中的脚本进行启动

npm run docs:dev

在这里插入图片描述

访问项目

在这里插入图片描述

至此,vitepress 项目的基本的创建就完成了!

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

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

相关文章

【MySQL】MySQL表的约束-空属性/默认值/列属性/zerofill/主键/自增长/唯一键/外键

文章目录 表的约束1.空属性 --null && not null2.默认值 -- default3.列描述4.zerofill5.主键6.自增长7.唯一键8.外键 表的约束 表的约束:表中一定要有各种约束,通过约束,让我们未来插入数据库表中的数据是符合预期的。约束的本质是…

【GCC】6 接收端实现:周期构造RTCP反馈包

基于m98代码。GCC涉及的代码,可能位于:webrtc/modules/remote_bitrate_estimator webrtc/modules/congestion_controller webrtc/modules/rtp_rtcp/source/rtcp_packet/transport_feedback.cc webrtc 之 RemoteEstimatorProxy 对 remote_bitrate_estimator 的 RemoteEstimato…

Spark与HBase的集成与数据访问

Apache Spark和Apache HBase分别是大数据处理和分布式NoSQL数据库领域的两个重要工具。在本文中,将深入探讨如何在Spark中集成HBase,并演示如何通过Spark访问和操作HBase中的数据。将提供丰富的示例代码,以便更好地理解这一集成过程。 Spark…

【EI会议征稿通知】第四届图像处理与智能控制国际学术会议(IPIC 2024)

第四届图像处理与智能控制国际学术会议(IPIC 2024) 2024 4th International Conference on Image Processing and Intelligent Control 2024年第四届图像处理与智能控制国际学术会议(IPIC 2024)将于2024年5月3日-5日在吉隆坡举…

【Jmeter之get请求传递的值为JSON体实践】

Jmeter之get请求传递的值为JSON体实践 get请求的常见传参方式 1、在URL地址后面拼接,有多个key和value时,用&链接 2、在Parameters里面加上key和value 第一次遇到value的值不是字符串也不是整型,我尝试把json放到value里面&#xff0…

C练习——杨辉三角

题目: 打印近似杨辉三角,行数n自选 百度找的杨辉三角,参考一下: 解析: 把它的全部元素左对齐,就可以看成近似杨辉三角的样子 1 1 1 1 2 1 1 3 3 1 1 4 6 4 1 …… 每个数等于它上方两数…

OpenCV C++ 环境搭建和简单示例

OpenCV介绍 OpenCV:开源发行的跨平台计算机视觉和机器学习软件库,用C语言编写,提供了C ,Python,Java和MATLAB接口,并支持Windows,Linux,Android和Mac OS。 OpenCV下载 去官网http…

常见面试题之CSS

CSS3的新特性 新增选择器::nth-child()、:first-of-type、:last-of-type等 弹性盒子:display: flex 媒体查询:media根据设备的特性和屏幕大小应用不同的样式规则 多列布局:column-count和column-with等属性可以实现将内容分为多…

蓝桥杯每日一题----货物摆放

题目 分析 上来一看,三个for循环,从1到n,寻找满足lwhn的个数,但是这样根本跑不出来答案,n太大了,1e15的级别,O(n)的时间复杂度都不行,更何况是O(…

Webpack 怎么实现按需异步加载模块

要弄懂这个问题,需要先来看关于webpack打包的3个问题。 三个问题 第一个问题 项目中的json文件,如何使用webpack进行处理? 如果我们希望把json文件当做静态配置,例如有如下json文件 {"version": "1.0.0"…

高级 Python 面试问题与解答

文章目录 专栏导读1.什么是PIP?2.什么是 zip 函数?3.Python 中的 __init __ () 是什么?4.Python 中的访问说明符是什么?5.Python 中的单元测试是什么?6.Python全局解释器锁(GIL)?7.P…

Linux Debian12使用VSCode和Python搭建flask开发环境

一、安装VSCode 在Linux Debian12系统上安装VSCode教程可以参考网上相关教程。 二、安装Python 打开VSCode,安装python和python扩展包,如下图所示: 三、创建Python虚拟环境 1.新建文件夹testFlask 2.用vscode打开文件夹testFlask&#xf…

FFmpeg连载6-音频重采样

今天我们的实战内容是将音频解码成PCM,并将PCM重采样成特定的采样率,然后输出到本地文件进行播放。 什么是重采样? 所谓重采样,一句话总结就是改变音频的三元素,也就是通过重采样改变音频的采样率、采样格式或者声道数…

【docker-compose】【nginx】内网环境https配置

目录 1、openssl生成自签名证书和私钥2、nginx.conf配置ssl3、docker-compose挂载 1、openssl生成自签名证书和私钥 在部署服务器上,新建cert目录,执行以下指令,然后生成.crt和.key文件 openssl req -newkey rsa:2048 -nodes -keyout rsa_pri…

成都力寰璨泓科技有限公司:抖小店新势力

在当下这个信息爆炸的时代,科技的发展日新月异,电商行业更是风起云涌。在这场没有硝烟的战争中,成都力寰璨泓科技有限公司以其敏锐的商业洞察和卓越的技术实力,成功抢滩抖音小店市场,成为一股不可忽视的新生力量。 成都…

ADA-YOLO:YOLOv8+注意力+Adaptive Head,mAP提升3%

生物医学图像分析中的目标检测和定位至关重要,尤其是在血液学领域,检测和识别血细胞对于诊断和治疗决策至关重要。虽然基于注意力的方法在各个领域中目标检测方面取得了显著的进展,但由于医学影像数据集的独特挑战,其在医学目标检…

论文浅尝 | 记忆力强还是健忘?深入探究语言模型的知识记忆机制

笔记整理:方润楠,浙江大学硕士,研究方向为自然语言处理 链接:https://arxiv.org/abs/2305.09144 摘要 近年来,大规模预训练语言模型展示出惊人的记忆能力,相比之下,未经预训练的普通神经网络存在…

Web - Angular 的 AJAX 与 REST

AJAX AJAX 是用于描述网页与网络服务器互动的一系列技术的术语。它不是一项新技术,而是对长时间以来已存在技术的应用。随着主要网站(例如谷歌)展示其优势,它作为一种开发技术变得流行。AJAX 这个术语被创造出来,用以描…

深度解析JVM类加载器与双亲委派模型

概述 Java虚拟机(JVM)是Java程序运行的核心,其中类加载器和双亲委派模型是JVM的重要组成部分。本文将深入讨论这两个概念,并解释它们在实际开发中的应用。 1. 什么是类加载器? 类加载器是JVM的一部分,负…

鸿蒙APP闪退的问题

解决鸿蒙(HarmonyOS)应用闪退的问题通常需要进行一系列的调查和分析。以下是一些建议的步骤,可以帮助你定位和解决鸿蒙应用闪退的原因,希望对大家有所帮助。北京木奇移动技术有限公司,专业的软件外包开发公司&#xff…