VuePress安装及使用

news/2024/7/10 1:36:30 标签: VuePress安装及使用, VuePress, vue

前言

VuePress 是一个以 Markdown 为中心的静态网站生成器。你可以使用 Markdown 来书写内容(如文档、博客等),然后 VuePress 会帮助你生成一个静态网站来展示它们。

例如:JavaFX 前言 这个博客网站就是使用 VuePress 生成的,你只需要使用 Markdown 来书写文章内容,其他的 VuePress 帮你搞定

VuePress 相比于其他以 Markdown 为中心的静态网站生成器,如 mdBook 、GitBook、Hexo、Nuxt、VitePress、Docsify 、Docute 更加简单方便,如果你会前端你还可以自己定制主题。

一、依赖环境

  • 安装的 Node.js 版本需要大于等于 18.16.0
  • 包管理器,如 npm 或者 pnpm、yarn 等。

若你还没安装 Node.js,可以参考 Node.js安装与配置 进行下载安装。

vuepress__13">二、vuepress 安装和使用

1.初始化

新建一个文件夹,我这里新建的文件夹叫 vuepress ,打开 cmd 窗口进入 vuepress 文件夹所在路径。

然后 cmd 命令行中输入下面的命令,将初始化生成一个 package.json 文件:

npm init -y

VuePress__23">2.将 VuePress 安装为本地依赖

npm install -D vuepress@next

3. package.json 中添加脚本

在 package.json 中的 scripts 里添加两行启动脚本

	"docs:dev": "vuepress dev docs",
    "docs:build": "vuepress build docs"

最终的 package.json 长这样:

{
  "name": "vuepress",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
	"docs:dev": "vuepress dev docs",
    "docs:build": "vuepress build docs"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "vuepress": "^2.0.0-rc.0"
  }
}

4. 新建 docs 文件夹。

vuepress 文件夹下新建 docs 文件夹,用于存放所有的 Markdown 文件。

在 docs 文件夹下新建 README.md 文件,你可以在 README.md 写点内容。

5.启动

执行如下命令启动,启动成功后,会在 docs 下自动生成 .vuepress 文件夹,用于配置。

npm run docs:dev

启动后,你可以浏览器打开 http://localhost:8080/ 查看刚才的 README.md 渲染效果 。

下面是我 README.md 渲染效果

在这里插入图片描述


http://www.niftyadmin.cn/n/5271501.html

相关文章

二十八、目录操作

二十八、目录操作 QDir 简单的QDir小例子 #include <QCoreApplication> #include <QDir> #include <QStringList> #include <QDebug>// 定义一个函数&#xff0c;输入一个目录路径&#xff0c;返回该目录及其子目录中所有文件的大小 qint64 getDirFi…

Rust逆向学习 (7)

文章目录 Reverse for HashMapnew / insert / getSwiss TablesData StructureInsert/Delete/FindExpand 总结 Reverse for HashMap HashMap是各个语言常用的一种数据结构&#xff0c;在每个语言中的实现都有或多或少的差别&#xff0c;相信学过数据结构的都知道HashMap在数据量…

深度比较(lodash 的 isEqual 方法)

_.isEqual() 是 Lodash 提供的一个函数&#xff0c;用于比较两个值是否相等。它会递归地比较两个对象的属性和值&#xff0c;以判断它们是否相等。 这个函数的作用是&#xff1a; 深度比较对象&#xff1a;递归比较两个对象的每一个属性和嵌套对象的属性&#xff0c;判断它们…

zookeeper和nacos区别是什么,注册中心用zookeeper还是nacos

注册中心对比和选型&#xff1a;Zookeeper、Eureka、Nacos、Consul和ETCD zookeeper和nacos区别是什么 Nacos集群raft选举算法原理 Zookeeper和Nacos是两个不同的分布式系统协调组件&#xff0c;它们在设计目标、功能特性和使用方式等方面存在一些区别。以下是它们的主要区别…

人工智能在金融与商业领域的智能化变革

导言 随着人工智能技术的不断发展&#xff0c;金融和商业领域正迎来一场智能化的变革。随着人工智能的不断发展&#xff0c;其在金融和商业领域的应用正成为业界瞩目的焦点。本文将深入探讨人工智能在金融和商业应用中的关键技术、应用场景以及对未来的影响。 1. 关键技术与算…

Java开发工具积累(符合阿里巴巴手册规范)

文章目录 一、命名规约二、代码格式三、集合篇1. 栈、队列、双端队列2. List的升序倒序3. Map的升序降序4. 二维数组排序5. 集合之间的转换6. Map键值对遍历7. 重写equal与hashCode8. ArrayList的subList9. keySet&#xff08;&#xff09;/values&#xff08;&#xff09;/ent…

条款5:了解c++默默编写并调用了哪些函数

如果你不自己声明&#xff0c;编译器会替你声明&#xff08;编译器版本的&#xff09;拷贝构造函数、拷贝赋值运算符和析构函数。此外&#xff0c;如果你没有声明任何构造函数&#xff0c;编译器会为你声明一个默认构造函数。 class Empty{};本质上和写成下面这样是一样的: c…

java内置的数据结构

Java语言提供了许多内置的数据结构&#xff0c;包括&#xff1a; 1. 数组&#xff08;Array&#xff09;&#xff1a;数组是最基本的数据结构之一&#xff0c;它是一个有序的元素集合&#xff0c;每个元素都有一个对应的索引。在Java中&#xff0c;数组可以通过声明和初始化来创…