VuePress安装
linux 下预构建二进制文件安装 Nodejs
- 安装 Nodejs 和 npm
# 解压
tar xvf node-v20.15.1-linux-x64.tar.xz
# 移动解压出的文件夹到 /usr/local下，并且重命名为nodejs
mv ./node-v20.15.1-linux-x64 /usr/local/nodejs
# 添加软连接，之后就能直接在命令行中使用nodejs
ln -s /usr/local/nodejs/bin/* /usr/bin/
-
关于软件安装位置：
/opt 目录：opt 是 optional(可选) 的缩写，这是给主机额外安装软件所摆放的目录，是用户级的程序目录，默认是空的。这里常用于放置额外的大型软件，比如你安装一个 ORACLE 数据库就可以放到这个目录下。/usr 目录：usr 是 unix shared resources(共享资源) 的缩写，这是一个非常重要的系统级目录，系统的很多应用程序和文件都放在这个目录下。其中 /usr/src 是系统的源码存放目录。此目录一般由软件包管理器(yum、apt)来管理。/usr/local 目录：/usr/local 是 /usr 下的一个用户级的程序目录，用户自己安装的软件一般选择安装到这个目录下。其中 /usr/local/src 是用户级的源码存放目录。此目录一般由用户自己管理。
-
使用 npm 安装 pnpm
# 安装
npm install -g pnpm
# 查看全局模式下的安装位置
npm root -g
# 添加软连接
ln -s /usr/local/nodejs/lib/node_modules/pnpm/bin/pnpm /usr/bin/pnpm
创建 VuePress
- 创建并进入一个新目录
mkdir vuepress-starter
cd vuepress-starter
- 初始化项目
git init
pnpm init
- 安装 VuePress
# 安装 vuepress 和 vue
pnpm add -D vuepress@next vue
# 安装打包工具和主题
pnpm add -D @vuepress/bundler-vite@next @vuepress/theme-default@next
如果报错 ERR_PNPM_META_FETCH_FAIL、WARN GET https:...、reason: connect ECONNREFUSED
更换镜像为淘宝的：
npm config set registry https://registry.npmmirror.com
# 清理缓存
npm cache clean --force
- 创建
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
- 在 docs 目录下添加 gitignore 文件
# VuePress 默认临时文件目录
.vuepress/.temp
# VuePress 默认缓存目录
.vuepress/.cache
# VuePress 默认构建生成的静态文件目录
.vuepress/dist
使用 VuePress
启动开发服务器
你可以在 package.json 中添加一些 scripts ：
{
"scripts": {
"docs:dev": "vuepress dev docs",
"docs:build": "vuepress build docs"
}
}
运行 docs:dev 脚本可以启动开发服务器:
pnpm docs:dev
VuePress 会在 http://localhost:8080 启动一个热重载的开发服务器。当修改你的 Markdown 文件时，浏览器中的内容也会自动更新。
