# VitePress的学习使用
**Repository Path**: jetwang88/vite-press
## Basic Information
- **Project Name**: VitePress的学习使用
- **Description**: VitePressd的学习使用
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-05-21
- **Last Updated**: 2023-05-21
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
# 使用VitePress搭建静态网站
## 1. 项目启动
1. 创建文件夹 `vitepress-study`
2. 初始化项目 pnpm init
3. 安装`vitepress ` pnpm add vitepress -D
4. 使用命令生成基础结构 pnpm exec vitepress init
5. 使用 pnpm run docs:dev 查看项目效果
## 2. index.md配置
> public 目录下的文件可直接访问
```ts
---
# https://vitepress.dev/reference/default-theme-home-page
layout: home
hero:
name: 'Antdv Pro' # 大标题
text: '通用的后台管理系统' # 小标题
tagline: 基于 Vite4 + Vue3 + Unocss + Antdv4 + TS # 标签行
# 右侧图片
image:
src: /logo.svg
alt: antd admin pro
# 按钮
actions:
- theme: brand
text: 开始使用
link: /guide/getting-started
- theme: alt
text: 项目介绍
link: /guide/introduction
- theme: alt
text: View on GitHub
link: https://github.com/antdv-pro/antdv-pro
# 特点、用到的技术栈
features:
- title: 高效快速 # 标题
icon: # 图标
src: /vite.svg # 图片地址
# 细节介绍
details: vite4.x加持，开发、打包、热更新、热加载、热替换，一切都是那么的快
- title: 预设样式
icon:
src: /unocss.svg
details: 内置了一套基于unocss的样式系统，原子化的样式，让你的样式更加简洁
- title: TypeScript
icon:
src: /typescript.svg
details: 项目全量使用TypeScript，让你的代码更加规范，更加安全
- title: Nitro Mock服务
icon:
src: /nitro.png
details: 项目使用Nitro作为Mock服务，无侵入式的Mock，让你的Mock更加简单
- title: 国际化
icon:
src: /geography.png
details: 提供了国际化的支持，满足项目的国际化需求
- title: 状态管理
icon:
src: /pinia.svg
details: 项目使用Pinia作为状态管理，使用起来更加简单
---
```
## 3. config.ts配置
```ts
import { defineConfig } from 'vitepress';
// https://vitepress.dev/reference/site-config
export default defineConfig({
lang: 'zh-CN', // 语言
title: 'Antdv Pro', // 标题
description: 'Ant Design Vue admin pro', // 介绍
themeConfig: {
// https://vitepress.dev/reference/default-theme-config
// 网站底部内容
footer: {
message: 'Made by Antdv Pro Team with ❤️ Aibayanyu',
copyright: 'Copyright © 2023-present Antdv Pro Team',
},
// 导航栏
nav: [
{ text: '指引', link: '/guide/introduction' },
{ text: '预览地址', link: 'https://www.antdv-pro.com/' },
{
text: '项目地址',
// 嵌套导航菜单
items: [
{
text: '完整工程',
link: 'https://github.com/antdv-pro/antdv-pro',
},
{
text: '轻量版本',
link: 'https://github.com/antdv-pro/antdv-pro/tree/mini',
},
],
},
{
text: '赞助',
link: '/other/sponsor',
},
],
// 侧边导航栏
sidebar: [
{
text: '指引',
items: [
{ text: '项目介绍', link: '/guide/introduction' },
{ text: '迭代计划', link: '/guide/plan' },
{ text: '开始使用', link: '/guide/getting-started' },
{ text: '布局主题', link: '/guide/layout-theme' },
{ text: '主题样式', link: '/guide/theme-style' },
{ text: '路由配置', link: '/guide/router-config' },
{ text: '请求配置', link: '/guide/request' },
{ text: 'mock服务', link: '/guide/server' },
{ text: '国际化', link: '/guide/i18n-support' },
],
},
],
// 友情链接
socialLinks: [{ icon: 'github', link: 'https://github.com/antdv-pro/antdv-pro' }],
// 本地搜索
search: {
provider: 'local',
},
},
// vite配置
vite: {
server: {
port: 9527, // 端口号设置
},
},
});
```
## 4. 配置主题
`.vitepress/theme/index.ts`
```ts
// https://vitepress.dev/guide/custom-theme
import { h } from 'vue';
import Theme from 'vitepress/theme';
import './style.css';
// @ts-expect-error this is component
import Sponsor from '../components/sponsor.vue';
export default {
...Theme,
Layout: () => {
return h(Theme.Layout, null, {
// https://vitepress.dev/guide/extending-default-theme#layout-slots
});
},
enhanceApp(ctx) {
// ...
ctx.app.component('Sponsor', Sponsor);
},
};
```
`.vitepress/theme/style.css`
```css
/**
* Customize default theme styling by overriding CSS variables:
* https://github.com/vuejs/vitepress/blob/main/src/client/theme-default/styles/vars.css
*/
/**
* Colors
* -------------------------------------------------------------------------- */
:root {
--vp-c-brand: #1677ff;
--vp-c-brand-light: #4096ff;
--vp-c-brand-lighter: #69b1ff;
--vp-c-brand-lightest: #bae0ff;
--vp-c-brand-dark: #1668dc;
--vp-c-brand-darker: #1554ad;
--vp-c-brand-dimm: rgba(100, 108, 255, 0.08);
}
/**
* Component: Button
* -------------------------------------------------------------------------- */
:root {
--vp-button-brand-border: var(--vp-c-brand-light);
--vp-button-brand-text: var(--vp-c-white);
--vp-button-brand-bg: var(--vp-c-brand);
--vp-button-brand-hover-border: var(--vp-c-brand-light);
--vp-button-brand-hover-text: var(--vp-c-white);
--vp-button-brand-hover-bg: var(--vp-c-brand-light);
--vp-button-brand-active-border: var(--vp-c-brand-light);
--vp-button-brand-active-text: var(--vp-c-white);
--vp-button-brand-active-bg: var(--vp-button-brand-bg);
}
/**
* Component: Home
* -------------------------------------------------------------------------- */
:root {
--vp-home-hero-name-color: transparent;
--vp-home-hero-name-background: -webkit-linear-gradient(120deg, #13c2c2 30%, #1677ff);
--vp-home-hero-image-background-image: linear-gradient(-45deg, #13c2c2 50%, #1677ff 50%);
--vp-home-hero-image-filter: blur(40px);
}
@media (min-width: 640px) {
:root {
--vp-home-hero-image-filter: blur(56px);
}
}
@media (min-width: 960px) {
:root {
--vp-home-hero-image-filter: blur(72px);
}
}
/**
* Component: Custom Block
* -------------------------------------------------------------------------- */
:root {
--vp-custom-block-tip-border: var(--vp-c-brand);
--vp-custom-block-tip-text: var(--vp-c-brand-darker);
--vp-custom-block-tip-bg: var(--vp-c-brand-dimm);
}
.dark {
--vp-custom-block-tip-border: var(--vp-c-brand);
--vp-custom-block-tip-text: var(--vp-c-brand-lightest);
--vp-custom-block-tip-bg: var(--vp-c-brand-dimm);
}
/**
* Component: Algolia
* -------------------------------------------------------------------------- */
.DocSearch {
--docsearch-primary-color: var(--vp-c-brand) !important;
}
```
`.vitepress/components/sponsor.vue`
```vue
```
