VuePress搭建文档网站

以下是官方文档复制过来的步骤,加上了我的一些经验注释。
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 目录中可以找到构建生成的静态文件。你可以查看 部署
posted @ 2024-04-18 16:40  Mankii  阅读(73)  评论(0编辑  收藏  举报
返回顶部