vuepress-theme-hope搭建教程

VuePress 搭建教程

VuePress-theme-hope 主题不仅在默认主题的基础上大幅提高美观性，同时搭配各种插件，在各种细节与功能上为 VuePress 提供全方位的增强。

一、环境配置

node.js 下载地址

（请确保你的 Node.js 版本 >= 8.6）

下载完成后按自身需求进行 node.js 的安装

npm 防警告配置教程（可跳过）

找到 node.js 安装路径

修改 npm,npm.cmd 这两个文件的权限为完全控制,然后用记事本打开，将变量配置修改为如下：

npm: prefix --location=global

npm.cmd: ('CALL "%NODE_EXE%" "%NPM_CLI_JS%" prefix --location=global')
当验证出现如下现象则说明配置成功

二、安装

【建议】根据自己需要新建一个文件夹来单独存储 vuepress

这里只演示 pnpm 和 npm 两种方式

这里的 [dir] 是一个参数，你需要使用真实的文件夹名称替换它

pnpm create vuepress-theme-hope@next [dir]

npm init vuepress-theme-hope@next [dir]

安装过程演示

执行 pnpm create vuepress-theme-hope@next [dir] 之后，如下图

安装过程演示

执行完之后显示【是否想要现在启动 Demo 查看？】【这里我们选择 Yes】，然后系统会自动运行代码

完成效果演示

运行成功时将给出的本地端口号复制到浏览器运行，如下图

安装完成效果

三、目录结构

单语言目录结构

├── docs → 由你指定的文档文件夹
│    │
│    ├── .vuepress 用于存放全局的配置、组件、静态资源等
│    │    │
│    │    ├── dist (默认的) → 构建输出目录
│    │    │
│    │    ├── public 静态资源目录
│    │    │
│    │    ├── styles 用于存放样式相关的文件
│    │    │
│    │    ├── config.{js,ts} 配置文件的入口文件
│    │    │
│    │    ├── client.{js,ts} 客户端文件
│    │    │
│    │    ├── theme.{js,ts} 主题配置文件
│    │    │
│    │    ├── sidebar.{js,ts} 侧边栏配置文件
│    │    │
│    │    └── navbar.{js,ts} 导航栏配置文件
│    │
│    ├── ... → 其他项目文档
│    │
│    └── README.md → 项目主页
│
└── package.json → Nodejs 配置文件