最快捷的方式

直接拉取本项目至本地，packages/docs 和 packages/blog 目录下分别是文档和博客示例，根据 README.md 进行依赖安装、构件、打包、预览即可

其他方式

1. 使用脚手架初始化

可用脚手架 vuetom-cli 来进行主题的初始化，这会在你本地初始化一个模版

网速慢可以再次尝试或者直接前往模版仓库拉取模版仓库

分支1: temp-docs (文档模版)
分支2: temp-blog (博客模版)

首先安装脚手架，NPM安装前请确保开启管理员身份运行保证有权限

npm i -g vuetom-cli

查看是否安装成功，黑窗口运行一下命令，返回版本号 x.x.x 则表示安装成功

vuetom-cli -v

初始化模版，可以选择是否新建目录、仓息、作者、模版仓库等。

初始化选择从 github 源拉取模版可以保证模版是最新的代码

vuetom-cli init

然后便会下载模版，下载完成后，执行以下命令安装依赖并运行文档网站

# 安装依赖
pnpm i

# 本地运行
pnpm dev

::: warning 模版是从 github 上拉取的，可能有时候会有网速的困惑，也可手动前往拉取下载本地启用

文档模版：https://github.com/lauset/vuetom-cli/tree/temp-docs

博客模版：https://github.com/lauset/vuetom-cli/tree/temp-blog :::

2. 通过NPM下载安装主题（最新版本为 2.3.0）

:::danger ⚠️ 写在前面

正常引入主题后，还需在 .vitepress/config.ts 文件中配置以下内容

vite: {
  ssr: {
    noExternal: ["vitepress-theme-vuetom"]
  }
}

:::

使用这个方式首先你要搭建一个 vitepress 项目，主题是会覆盖文档默认样式而已，所以项目还是得搭起来的，可以前往下面 vitepress 官网链接从头开始搭建

vitepress搭建文档

搭建完后最简单的样子就是项目目录里有个 index.md 文件，那么开始下一步

安装主题依赖

使用 NPM 安装最新版本的 vitepress-theme-vuetom 主题包，在你的 vitepress 项目下安装，打开 终端（DOS） 输入

npm i -D vitepress-theme-vuetom

开始引入主题

先在 .vitepress （这个文件夹和首页 index.md 是同级目录，没有的自己创建）中新建一个名为 theme 的文件夹，在该文件下新建一个 index.ts 文件，当然用 js 还是 ts 文件就看你自己项目的决定了。

大致内容如下:

VuetomTheme 是主要的主题布局

VuetomUI 是内置的UI组件

// .vitepress/theme/index.ts

// 文档风格引入 2.3.0 版本之后改为 /docs 中引入了
import VuetomTheme from 'vitepress-theme-vuetom/docs'

// 博客风格引入
// import BlogTheme from 'vitepress-theme-vuetom/blog'

export default {
  ...VuetomTheme,
  enhanceApp({ app, router, siteData }) {
  }
}

引入了主题，然后你的 index.md 里写上一些内容应该就可以看出效果了

---
home: true
heroImage: /logo/vuetom-logo-m.png
heroAlt: LOGO
heroText: Vuetom
tagline: vitepress flat theme 

actionText: 快 速 开 始
actionLink: /guide/info

altActionText: 配 置
altActionLink: /guide/config

features:
  - title: 📦 优化的构建
    details: 可选 “多页应用” 或 “库” 模式的预配置 Rollup 构建
  - title: 🔩 通用的插件
    details: 在开发和构建之间共享 Rollup-superset 插件接口。
  - title: 🔑 完全类型化的API
    details: 灵活的 API 和完整 TypeScript 类型。

footer: MIT Licensed
---

<div class="frontpage sponsors">
  <h2>{{ data.text }}</h2>
</div>

<script setup>
import { onMounted, reactive } from 'vue'
const data = reactive({
    text: '自定义内容'
})
onMounted(() => {
})
</script>

<style>
</style>

运行项目后，在 [localhost:3000] 中进入首页

:::tip 至少到这里主题已经安装完成了，下一步就是主题的配置了，主题什么样还是要看你配的什么样子哦。 :::

4.5 KiB Raw Blame History Unescape Escape

{{ $frontmatter.title }}

最快捷的方式

其他方式

1. 使用脚手架初始化

2. 通过NPM下载安装主题（最新版本为 2.3.0）

4.5 KiB

Raw Blame History