本文基于 VuePress v2.0.0-rc15 版本,使用默认的内置主题
开始构建
你可以按照官方文档的步骤创建,也可以参考本文。并且,官方还提供了 StackBlitz 可以直接在浏览器体验 VuePress。
两种创建方式
1 | npm init vuepress vuepress-site |
1 | mkdir vuepress-site && cd vuepress-site |
这样,一个简单的 VuePress 的网站就基本成型了,该文件夹的结构基本如下:
1 | ├─ docs |
docs/.vuepress
是 vuepress 存放配置文件的路径,公共静态资源默认路径为docs/.vuepress/public
。- 配置文件支持 ts 和 js,推荐使用 ts 获得支持 IDE 的智能提示。
添加运行脚本命令
1 | { |
网站首页配置
1 |
|
这样,主页内容就完成了。接下来修改网站配置文件 docs/.vuepress/config.ts
。
1 | export default defineUserConfig({ |
然后运行 npm run docs:dev
并访问 http://localhost:8080 查看效果。
进阶配置
单语言站点配置
1 | export default defineUserConfig({ |
此时,目录结构应为:
1 | ├─ docs |
多语言站点配置
多语言配置也很简单,下面只给一个示例,不再进行额外的说明了。
1 | export default defineUserConfig({ |
此时,目录的结构为:
1 | ├─ docs |
VitePress
引用 VitePress 官网的一段话
VitePress 灵感来源于 VuePress。最初的 VuePress 基于 Vue 2 和 webpack。借助 Vue 3 和 Vite,VitePress 提供了更好的开发体验、更好的生产性能、更精美的默认主题和更灵活的自定义 API。
VitePress 和 VuePress 之间的 API 区别主要在于主题和自定义。如果使用的是带有默认主题的 VuePress 1,迁移到 VitePress 应该相对简单。
VuePress 2 我们也投入了精力,它也支持 Vue 3 和 Vite,与 VuePress 1 的兼容性更好。但是,并行维护两个 SSG 是难以持续的,因此 Vue 团队决定将重点放在 VitePress,作为长期的主要 SSG 选择推荐。
区别
所有的选项都基于默认主题、默认配置
选项 | VuePress 2.0.0.RC15 | VitePress 1.3 |
---|---|---|
静态资源目录 | docs/.vuepress/public | docs/public |
数学公式、Github标签支持、代码块聚焦 | 不支持 | 支持 |
主页 md 除了 frontmatter 外是否可以有正文内容 | 支持 | 不支持(其实是支持,但是没有样式) |
VitePress 默认的功能就很丰富,不过 VuePress 有插件生态,不仅有主题插件还有额外的功能插件。具体可以查看各自官网文档的展示效果选择自己喜欢的使用。