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

说明

本文介绍一下 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.mzph.cn/news/628938.shtml

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

相关文章

关于java的封装

关于java的封装 我们在前面的文章中,了解到了类和对象的知识,以及做了创建对象的时候对内存的分析,我们本篇文章来了解一下面向对象的三大基本特征之一,封装😀。 一、初识封装 封装就好比,我们把一些物品…

【操作系统】1. 操作系统概述

文章目录 【 1. 什么是操作系统 】【 2. 操作系统软件的分类 】【 3. 操作系统内核的抽象和特征 】3.1 操作系统内核的抽象3.2 操作系统内核的特征 【 1. 什么是操作系统 】 操作系统是管理硬件资源、控制程序运行、改善人机界面和为应用软件提供服务的一种系统 软件。一个服务…

<软考高项备考>《论文专题 - 71 风险管理(3)》

3 过程2-识别风险 3.1 问题 4W1H过程做什么是识别单个项目风险以及整体项目风险的来源,并记录风险特征的过程。作用:1、记录现有的单个项目风险,以及整体项目风险的来源:2、汇总相关信息,以便项目团队能够恰当地应对已识别的风险。为什么做…

怎么修改或移除WordPress后台仪表盘概览底部的版权信息和主题信息?

前面跟大家分享『WordPress怎么把后台左上角的logo和评论图标移除?』和『WordPress后台底部版权信息“感谢使用 WordPress 进行创作”和版本号怎么修改或删除?』,其实在WordPress后台仪表盘的“概览”底部还有一个WordPress版权信息和所使用的…

项目解决方案:“ZL铁路轨行车辆”实时视频监控系统

目 录 一、建设背景 1.1 政策背景 1.2 现状 二、建设目标 三、建设依据 四、建设原则 4.1经济高效性 4.2系统开放性 4.3系统继承性 4.4系统扩展性 4.5系统经济性 4.6系统安全性 五、系统架构 5.1系统架构图 5.2技术架构 1、DVS 2、中心管理服务…

Java:List相互转换数组

经常我们会遇到前端传服务端值为数组的时候我们需要对其转换成集合便于一些其它操作,删除,匹配等操作,今天我们就总结下数组集合相互转换的方法 1、Object[] objArray arrayList.toArray(); Slf4j public class BaseTest { Testpublic void…

【Java SE语法篇】11.异常

📚博客主页:爱敲代码的小杨. ✨专栏:《Java SE语法》 ❤️感谢大家点赞👍🏻收藏⭐评论✍🏻,您的三连就是我持续更新的动力❤️ 文章目录 1. 异常的概念和体系结构1.1 异常的概念1.2 异常体系…

PTA——7-31 三角形判断

7-31 三角形判断 (15分) 给定平面上任意三个点的坐标(x​1​​,y​1​​)、(x​2​​,y​2​​)、(x​3​​,y​3​​),检验它们能否构成三角形。 输入格式: 输入在一行中顺序给出六个[−100,100]范围内的数字,即三个点的坐标x​1​​、y​1​​、x​2​…

SUKER书客重磅发布全新系列:书客Sun立式护眼台灯,护眼养眼新境界

近日,国内知名的光学国货品牌——SUKER书客在2024年新品发布上,正式发布了全新系列的书客Sun立式护眼台灯。 SUKER书客作为近年来快速发展的创新型光学技术品牌,曾推出的一系列产品都取得了刷新行业标准的成绩,他们坚持以创新为动…

【51单片机系列】单片机与PC进行串行通信

一、单片机与PC机串行通信的设计 工业现场的测控系统中,常使用单片机进行监测点的数据采集,然后单片机通过串口与PC通信,把采集的数据串行传送到PC机上,再在PC机上进行数据处理。 PC机配置的都是RS-232标准串口,为D型…

浅谈Vue的属性,computed和watch

语法 是什么&#xff1f; 直接上demo&#xff0c;了解一下语法先~ <template><div><p>num1为{{ num1 }}</p><p>num2为{{ num2 }}</p><p>num1num2{{ result }}</p><button click"incrementNum1">num11</…

11.spring boot 启动源码(一)

目录 概述SpringApplication静态方法构造方法run 实例方法配置文件Actuator 工作原理*EndpointAutoConfigurationBeansEndpointAutoConfigurationShutdownEndpointAutoConfiguration结束概述 spring boot 版本 2.6.13 spring boot 启动源码(一) 涉及 SpringApplication 中静态…

YOLOv5改进 | 2023主干篇 | 多种轻量化卷积优化PP-HGNetV2改进主干(全网独家创新)

一、本文介绍 Hello,大家好,上一篇博客我们讲了利用HGNetV2去替换YOLOv5的主干,经过结构的研究我们可以发现在HGNetV2的网络中有大量的卷积存在,所以我们可以用一种更加轻量化的卷积去优化HGNetV2从而达到更加轻量化的效果(亲测优化后的HGNetV2网络比正常HGNetV2精度更高…

开发知识点-java基础

java基础知识整理 windows 多版本java jar包不能直接打开 需要java -jar问题解决 windows 多版本 控制面板 java15 download 多版本 https://www.cnblogs.com/chenmingjun/p/9941191.html https://gitee.com/shixinke/JC-jEnv/repository/archive/master.zip java jar包不…

React16源码: React中的renderRoot的源码实现

renderRoot 1 &#xff09;概述 renderRoot 是一个非常复杂的方法这个方法里处理很多各种各样的逻辑, 它主要的工作内容是什么&#xff1f;A. 它调用 workLoop 进行循环单元更新 遍历整个 Fiber Tree&#xff0c;把每一个组件或者 dom 节点对应的Fiber 节点拿出来单一的进行更…

万户 ezOFFICE ezflow_gd.jsp SQL注入漏洞复现

0x01 产品简介 万户OA ezoffice是万户网络协同办公产品多年来一直将主要精力致力于中高端市场的一款OA协同办公软件产品,统一的基础管理平台,实现用户数据统一管理、权限统一分配、身份统一认证。统一规划门户网站群和协同办公平台,将外网信息维护、客户服务、互动交流和日…

使用curl上传文件至服务器的 java servlet简单实现

需求&#xff1a; 为了同步数据&#xff0c;需要将数据文件&#xff0c;也就是前几篇中生成的sql文件上传至服务器并执行。这里在服务端简单写了个文件上传接口&#xff0c;客户端调用curl来上传文件&#xff0c;上传完毕后&#xff0c;也使用curl发出一个指令&#xff0c;在服…

c++ 指针的安全问题

指针是一个强大的工具&#xff0c;但它们可能导致多种安全问题。接下来我们一起研究一下会出现的安全问题。欢迎大家补充说明&#xff01;&#xff01;&#xff01; 悬挂指针&#xff08;也称为悬空指针或迷途指针&#xff09; 是指向一块已经释放或无效内存的指针。悬挂指针…

Chrome 浏览器 Manifest V3 版本中 scripting API 解析

Chrome 浏览器 Manifest V3 版本中 scripting API 解析 chrome.scripting 使用 chrome.scripting API 在不同上下文中执行脚本。 可以使用 chrome.scripting API 将 JavaScript 和 CSS 注入网站。 一、所需权限 scripting 二、Manifest 配置 使用 chrome.scripting API&…

DC电源模块与AC电源模块的对比分析

DC电源模块与AC电源模块的对比分析 BOSHIDA DC电源模块和AC电源模块是两种常见的电源模块&#xff0c;它们在供电方式、稳定性、适用范围等方面有所不同&#xff0c;下面是它们的对比分析&#xff1a; 1. 供电方式&#xff1a; DC电源模块通过直流电源供电&#xff0c;通常使用…