返回

手把手:只需一小时学会搭建VuePress,新手快速入门

前端






---

## 准备工作

在开始之前,您需要确保您的电脑上已经安装了以下软件:

* Node.js (推荐版本 >= 16.13.0)
* Vue CLI (推荐版本 >= 4.5.0)

如果您还没有安装这些软件,请按照以下步骤进行安装:

1. 安装 Node.js:

curl -sL https://nodejs.org/dist/latest/node-v16.13.0.pkg | sudo pkg install -y


2. 安装 Vue CLI

npm install -g @vue/cli


## 搭建 VuePress 项目

1. 创建一个新的 VuePress 项目:

vue create my-vuepress-project


2. 进入项目目录:

cd my-vuepress-project


3. 安装 VuePress:

npm install


4. 运行 VuePress:

npm run dev


## 编写您的内容

VuePress 使用 Markdown 格式来编写内容。您可以使用任何文本编辑器来编写 Markdown 文件,也可以使用 VuePress 提供的在线编辑器。

要在 VuePress 中创建一篇新的文章,请在 `docs` 目录下创建一个新的 Markdown 文件。例如,您可以创建一个名为 `my-first-post.md` 的文件。

在 Markdown 文件中,您可以使用 Markdown 语法来格式化您的内容。例如,您可以使用 `#` 来创建标题,使用 `*` 来创建列表,使用 `[链接文本](链接地址)` 来创建链接。

## 预览您的内容

要预览您的内容,请在终端中运行以下命令:

npm run dev


这将启动一个本地服务器,您可以在浏览器中访问该服务器来预览您的内容。

## 部署您的网站

当您对您的内容感到满意后,您可以将其部署到生产环境。

要部署您的网站,请在终端中运行以下命令:

npm run build


这将在 `dist` 目录下生成一个静态网站。

您可以将 `dist` 目录中的文件上传到您的 web 服务器,或者使用 GitHub Pages 或 Netlify 等服务来托管您的网站。

## 结语

VuePress 是一个简单易用、功能强大的静态网站生成器。您可以使用 VuePress 快速搭建一个博客或其他类型的静态网站,并轻松地编写和发布您的内容。