VuePress搭建文档网站

标签：npm docs 文档 vuepress 创建 搭建 目录 VuePress

VuePress官方文档：https://v2.vuepress.vuejs.org/zh/guide/getting-started.html 以下是官方文档复制过来的步骤，加上了我的一些经验注释。
1、依赖环境

• Node.js v18.16.0+（我试了v14是运行不了的，必须这个版本及以上，建议安装nvm，方便切换node版本）
• 包管理器，如 pnpm、yarn、npm 等（我安装了npm就够用了，npm是安装了nodejs就自带的）

  2、创建项目   2-1、通过命令行创建 你可以通过 create-vuepress在新窗口打开 直接创建项目模板。

npm create vuepress vuepress-starter

  2-2、手动创建 这一章节会帮助你从头搭建一个简单的 VuePress 文档网站。 创建并进入一个新目录

mkdir vuepress-starter
cd vuepress-starter

初始化项目

git init
npm init

安装 VuePress

# 安装 vuepress 和 vue
npm add -D vuepress@next vue
# 安装打包工具和主题
npm add -D @vuepress/bundler-vite@next @vuepress/theme-default@next

创建 docs 目录和 docs/.vuepress 目录

mkdir docs
mkdir docs/.vuepress

创建 VuePress 配置文件 docs/.vuepress/config.js

import { viteBundler } from '@vuepress/bundler-vite'
import { defaultTheme } from '@vuepress/theme-default'
import { defineUserConfig } from 'vuepress'

export default defineUserConfig({
  bundler: viteBundler(),
  theme: defaultTheme(),
})

创建你的第一篇文档

echo '# Hello VuePress' > docs/README.md

  3、目录结构 创建完成后，你项目的目录结构应该是这样的：

├─ docs
│  ├─ .vuepress
│  │  └─ config.js
│  └─ README.md
└─ package.json

docs 目录是你放置 Markdown 文件的地方，它同时也会作为 VuePress 的源文件目录。 docs/.vuepress 目录，即源文件目录下的 .vuepress 目录，是放置所有和 VuePress 相关的文件的地方。 当前这里只有一个配置文件。默认还会在该目录下生成临时文件、缓存文件和构建输出文件。建议你把它们添加到 .gitignore 文件中。

• 示例 `.gitignore` 文件

# VuePress 默认临时文件目录
.vuepress/.temp
# VuePress 默认缓存目录
.vuepress/.cache
# VuePress 默认构建生成的静态文件目录
.vuepress/dist

node_modules
node_modules/*

  4、开始使用 VuePress 启动开发服务器 你可以在 package.json 中添加一些 scripts在新窗口打开 ：

{
  "scripts": {
    "docs:dev": "vuepress dev docs",
    "docs:build": "vuepress build docs"
  }
}

运行 docs:dev 脚本可以启动开发服务器:

npm docs:dev

VuePress 会在 http://localhost:8080在新窗口打开 启动一个热重载的开发服务器。当你修改你的 Markdown 文件时，浏览器中的内容也会自动更新。
5、构建你的网站 运行 docs:build 脚本可以构建你的网站：

npm docs:build

在 docs/.vuepress/dist 目录中可以找到构建生成的静态文件。你可以查看 部署

标签：npm,docs,文档,vuepress,创建,搭建,目录,VuePress
From： https://www.cnblogs.com/mankii/p/18143825