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.hqwc.cn/news/418304.html

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

相关文章

Forward(转发)和Redirect(重定向)的异同

Forward(转发)和Redirect(重定向)是两种不同的服务器端跳转机制,它们在Servlet中用于控制页面的跳转和处理请求的方式。 Forward(转发): 特点: 转发是在服务器内部进行的…

LiteAD对接FusionCompute

2、FA发放云桌面并与FC对接 (1)创建虚拟机模板 (2)创建虚拟机命名规则 (3)创建虚拟机组 (4)创建桌面组 (5)创建域用户和组(就相当于在Microsoft …

【Java 设计模式】创建型之建造者模式

文章目录 1. 定义2. 应用场景3. 代码实现4. 应用示例结语 在软件开发中,建造者模式是一种创建型设计模式,它将一个复杂对象的构建与其表示分离,使得同样的构建过程可以创建不同的表示。建造者模式通常包括一个指导者(Director&…

sfml使用opengl着色器实现2d水面波浪

SFML中使用GLSL着色器来绘制水波。 效果 代码 #include <SFML/Graphics.hpp> #include <iostream>int main() {const int WIDTH = 800;

ZABBIX根据IP列表,主机描述,或IP子网批量创建主机的维护任务

有时候被ZABBIX监控的主机可能需要关机重启等维护操作,为了在此期间不触发告警,需要创建主机的维护任务,以免出现误告警 ZABBIX本身有这个API可供调用(不同版本细节略有不同,本次用的ZABBIX6.*),实现批量化建立主机的维护任务 无论哪种方式(IP列表,主机描述,或IP子网)创建维护…

等离子环制作

免责声明 在您参考该博客制作等离子环前&#xff0c;请仔细阅读以下重要安全警告和免责说明。使用本文档即表示您已充分了解并同意以下条款&#xff1a; 等离子环的危险性&#xff1a;等离子环在运行时玻璃瓶身会产生高温&#xff0c;存在低温烧伤风险。任何时候都不建议用手…

传统语音识别系统流程

文章目录 概述语音识别原理公式语音识别术语&#xff1a;分帧提取声学特征声学模型 概述 语音识别传统方法主要分两个阶段&#xff1a;训练和识别&#xff0c;训练阶段主要是生成声学模型和语言模型给识别阶段用。传统方法主要有五大模块组成&#xff0c;分别是特征提取&#…

荣誉艾尔迪亚人的题解

目录 原题描述&#xff1a; 题目背景 题目描述 输入格式 输出格式 样例 Input 1 Output 1 Input 2 Output 2 数据范围&#xff1a; 样例解释 主要思路&#xff1a; 代码code&#xff1a; 原题描述&#xff1a; 时间限制: 1000ms 空间限制: 65536kb 题目背景 ​…

接口自动化框架搭建-写在前面

从今天开始&#xff0c;我将带领大家一起学习接口自动化框架的搭建&#xff0c;在学习之前&#xff0c;我们先了解搭建一个接口自动化框架需要具备哪些知识&#xff0c;应该做哪些准备工作 测试开发工程师的入门条件 近几年比较流行测试开发岗位&#xff0c;很多小伙伴都不知…

VBA自学日志

文章目录 前言一、For each 循环二、offset 偏移三、Resize 属性四、Exit 语句五、DO...LOOP语句六、一些错误代码总结七、GOTO语句八、do while 和 do until九、如何在VBA内使用Excel工作表函数十、VBA使用随机数十一、排序总结 前言 VBA自学成柴的第三周 一、For each 循环 …

leetcode 454 四数之和

题目 给你四个整数数组 nums1、nums2、nums3 和 nums4 &#xff0c;数组长度都是 n &#xff0c;请你计算有多少个元组 (i, j, k, l) 能满足&#xff1a; 0 < i, j, k, l < n nums1[i] nums2[j] nums3[k] nums4[l] 0 示例 1&#xff1a; 输入&#xff1a;nums1 …

Arduino开发实例-INA219 电流传感器驱动

INA219 电流传感器驱动 文章目录 INA219 电流传感器驱动1、INA219 电流传感器介绍2、硬件准备及接线3、代码实现1、INA219 电流传感器介绍 INA219 模块用于同时测量电流和电压。 该模块使用 I2C 通信传输电压和电流数据。 其他特性: 测量精度:1%最大测量电压:26V最大测量电…