引言

最近想弄一个静态配置的线上文档，直接打开那种，对比了几个开源项目后，最终找到了这个

安装与配置

安装前准备

nodejs版本必须是18.19.0或者20.6.0以上，安装前先在cmd里面node -v查看自己的node版本，如果没有，先安装nvm下载一个符合的node版本，nvm常用命令 - 羡逍遥 (lyj15.cn)

安装

自动安装

运行这条命令后

npm init vuepress vuepress-starter

然后选择语言为中文

包管理器为npm

打包器看自己选择，我是vite

选择项目类型，blog是博客、docs是文档，选择docs

设置应用名称和应用描述，看自己需求

应用版本号和协议直接回车

自动部署到github看自己需求

使用的源我选择的是国内

选择完上面这些后，就可以看到这个了

等待一会后

看到这个就说明成功了

手动安装

1. 创建并进入目录

   mkdir vuepress-starter
   cd vuepress-starter

2. 初始化项目

   git init
   npm init

3. 安装 VuePress

   npm install -D vuepress@next
   npm install -D @vuepress/bundler-vite@next @vuepress/theme-default@next

4. 创建目录

   mkdir docs
   mkdir docs/.vuepress
   mkdir docs/.vuepress/config.js

5. 编辑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(),
   })

6. 创建第一个文档

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

配置

修改package.json文件

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

目录

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

README.md、index.md为进入默认第一个页面文件，这三个文件不可以在同一级目录下存在两个，不然会冲突

访问.html文件会转发到同名的.md文件

启动与构建

启动

npm run docs:dev

其他启动命令

yarn docs:dev
pnpm docs:dev

构建

npm run docs:build

其他启动命令

yarn docs:build
pnpm docs:build

其他

更多详情请看官方——Introduction | VuePress (vuejs.org)