179 lines
4.5 KiB
Markdown
179 lines
4.5 KiB
Markdown
---
|
||
title: 快速使用
|
||
head:
|
||
- - meta
|
||
- name: description
|
||
content: 教你如何掌握框架的工作流程，快速上手。
|
||
- - meta
|
||
- name: keywords
|
||
content: 开始使用
|
||
---
|
||
|
||
# {{ $frontmatter.title }}
|
||
|
||
使用主题前请确保你已经搭建了一个 Vitepress 文档项目，因为主题是建立在该框架的基础上使用的。
|
||
|
||
请确保你使用的 vue >= 3.2 且 vitepress >= 1.x 哦。
|
||
|
||
## 最快捷的方式
|
||
|
||
直接拉取本项目至本地，packages/docs 和 packages/blog 目录下分别是文档和博客示例，根据 `README.md` 进行依赖安装、构件、打包、预览即可
|
||
|
||
## 其他方式
|
||
|
||
### **1.** 使用脚手架初始化
|
||
|
||
可用脚手架 `vuetom-cli` 来进行主题的初始化，这会在你本地初始化一个模版
|
||
|
||
网速慢可以再次尝试或者直接前往模版仓库拉取 [模版仓库](https://github.com/lauset/vuetom-cli)
|
||
|
||
- 分支1: **temp-docs** (文档模版)
|
||
|
||
- 分支2: **temp-blog** (博客模版)
|
||
|
||
1. 首先安装脚手架，NPM安装前请确保开启管理员身份运行保证有权限
|
||
|
||
```sh light
|
||
npm i -g vuetom-cli
|
||
```
|
||
|
||
2. 查看是否安装成功，黑窗口运行一下命令，返回版本号 x.x.x 则表示安装成功
|
||
|
||
```bash light
|
||
vuetom-cli -v
|
||
```
|
||
|
||
1. 初始化模版，可以选择是否新建目录、仓息、作者、模版仓库等。
|
||
|
||
初始化选择从 github 源拉取模版可以保证模版是最新的代码
|
||
|
||
```bash light
|
||
vuetom-cli init
|
||
```
|
||
|
||
1. 然后便会下载模版，下载完成后，执行以下命令安装依赖并运行文档网站
|
||
|
||
```bash macos
|
||
# 安装依赖
|
||
pnpm i
|
||
|
||
# 本地运行
|
||
pnpm dev
|
||
```
|
||
|
||
::: warning
|
||
模版是从 github 上拉取的，可能有时候会有网速的困惑，也可手动前往拉取下载本地启用
|
||
|
||
文档模版：<https://github.com/lauset/vuetom-cli/tree/temp-docs>
|
||
|
||
博客模版：<https://github.com/lauset/vuetom-cli/tree/temp-blog>
|
||
:::
|
||
|
||
<br/>
|
||
|
||
### **2.** 通过NPM下载安装主题（最新版本为 2.3.0）
|
||
|
||
:::danger ⚠️ 写在前面
|
||
|
||
正常引入主题后，还需在 .vitepress/config.ts 文件中配置以下内容
|
||
|
||
```js macos
|
||
vite: {
|
||
ssr: {
|
||
noExternal: ["vitepress-theme-vuetom"]
|
||
}
|
||
}
|
||
```
|
||
|
||
:::
|
||
|
||
使用这个方式首先你要搭建一个 vitepress 项目，主题是会覆盖文档默认样式而已，所以项目还是得搭起来的，可以前往下面 vitepress 官网链接从头开始搭建
|
||
|
||
[vitepress搭建文档](https://vitepress.vuejs.org/guide/getting-started.html)
|
||
|
||
搭建完后最简单的样子就是项目目录里有个 index.md 文件，那么开始下一步
|
||
|
||
1. 安装主题依赖
|
||
|
||
使用 NPM 安装最新版本的 vitepress-theme-vuetom 主题包，在你的 vitepress 项目下安装，打开 `终端（DOS）` 输入
|
||
|
||
```sh light
|
||
npm i -D vitepress-theme-vuetom
|
||
```
|
||
|
||
2. 开始引入主题
|
||
|
||
先在 .vitepress （这个文件夹和首页 index.md 是同级目录，没有的自己创建）中新建一个名为 theme 的文件夹，在该文件下新建一个 index.ts 文件，当然用 js 还是 ts 文件就看你自己项目的决定了。
|
||
|
||
大致内容如下:
|
||
|
||
`VuetomTheme` 是主要的主题布局
|
||
|
||
`VuetomUI` 是内置的UI组件
|
||
|
||
```javascript light
|
||
// .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 里写上一些内容应该就可以看出效果了
|
||
|
||
```html light
|
||
---
|
||
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
|
||
至少到这里主题已经安装完成了，下一步就是主题的配置了，主题什么样还是要看你配的什么样子哦。
|
||
:::
|