vuepress

felix.shao2025-06-06

vuepress

1 vuepress

vuepress

 VuePress 由两部分组成:第一部分是一个极简静态网站生成器 (opens new window),它包含由 Vue 驱动的主题系统和插件 API,另一个部分是为书写技术文档而优化的默认主题,它的诞生初衷是为了支持 Vue 及其子项目的文档需求。
 我们用 VuePress 主要是创建博客。

环境

 以下是已经安装好的前端软件,注意依赖用 npm 安装,不要用 yarn:

组件名版本安装
Node.jsv23.6.0Node.js 安装open in new window
Nginx1.23+Nginx 安装open in new window
新建博客项目

 以下是已经安装好的前端依赖环境:

组件名版本
vuepress2.0.0-rc.18
vuepress-theme-reco2.0.0-rc.25
  1. 创建并进入一个新目录 $ mkdir it-docx && cd it-docx

  2. npm 初始化,并选择 2.x,否则会报错
    $ npm install @vuepress-reco/theme-cli@1.0.7 -g
    $ theme-cli init
    npm uninstall -g @vuepress-reco/theme-cli

E:\gitWsGitee\it-docx>theme-cli init
? Whether to create a new directory? No
? What's the title of your project?
? What's the description of your project? hello
? What's the author's name? felix.shao
? What style do you want your home page to be?(The 2.x version is the alpha version) 2.x
√ [1/1] Load file from git

Load successful, enjoy it!
  1. 安装依赖
# 安装 Plantuml 依赖,具体使用配置见 config.ts
$ npm install markdown-it-plantuml

# 注意以下是 reco 主题自带的插件
@vuepress-reco/vuepress-plugin-comments 评论插件,集成了 Valine 评论系统
  1. 创建你的第一篇文档 $ echo '# Hello VuePress' > docs/README.md

  2. 安装依赖,npm install,没有权限的话用管理员运行等

  3. 在本地启动服务器。npm run dev

导入已有项目

 使用$ npm install导入全部依赖即可。

附录一、参考文献

附录二、常用命令

# 打包:
npm run build

# 移动文件夹到 nginx 中
rm -rf /data/dist
cp -rf ~/gitee/ittech/docs/.vuepress/dist /data
nginx -s stop 
nginx
Last Updated 6/6/2025, 4:53:18 PM