VitePress 열 시트

VitePress - Vite & Vue 전원 정적 사이트 생성기

VitePress는 빠른, 콘텐츠 중심 웹 사이트를 구축하도록 설계된 정적 사이트 생성기 (SSG)입니다. Vite의 상단에 내장되어 Vue.js의 강력한 개발자 경험을 제공합니다.

To 모든 명령 복사 < PDF 생성

본문 바로가기

• 설치
• 시작
• 프로젝트 구조
• 구성
• Markdown 기능
• Frontmatter - Frontmatter - Frontmatter - Frontmatter - Frontmatter - Frontmatter - Frontmatter - Frontmatter - Frontmatter - [Frontmatter] (LINK_5_5_5_5) - [Frontmatter] (___5_5_5_0_0_0_0_0_0_0_0_0_0_0_0_0_0_0_0_0_0_0_0_0_0_0_0_0_0_0_0_0_0_0_0_0_0_0_0_0_0_0_0_0_0_0_0_0_0_0_0_0_0_0_0_0_0_0_
• 런닝
• 더밍
• 주문 구성품
• 네비게이션
• Sidebar
• 검색
• 국제화
• 직업
• API 참조
• 펄진
• 고급 구성
• 공연
• 모범 사례

설치하기

빠른 시작

카지노사이트

수동 설치

카지노사이트

Package.json 스크립트

카지노사이트

시작하기

기본 설정

카지노사이트

기본 설정

카지노사이트

첫 페이지

카지노사이트

카지노사이트

프로젝트 구조

기본 구조

카지노사이트

고급 구조

카지노사이트

제품 설명

기본 설정

카지노사이트

고급 구성

ο 회원 관리

TypeScript 구성

카지노사이트

Markdown 기능

기본 Markdown

카지노사이트

코드 블록

`markdown 자바 스크립트 함수 hello() 이름 * 콘솔.log('Hello, VitePress!') 이름 * ```

javascript {1,3-5} // 라인 강조 함수 hello() 이름 * 콘솔.log('Hello, VitePress!') 이름은 = 'VitePress 이름 * 반환 `Hello, ${name}!` 이름 *

자바 스크립트 // 라인 번호 함수 hello() 이름 * 콘솔.log('Hello, VitePress!') 이름 * ````의 경우

주문 용기

```markdown ::: info This is an info box. :::

::: tip This is a tip. :::

::: warning This is a warning. :::

::: danger This is a dangerous warning. :::

::: details Click me to view the code 자바 스크립트 콘솔.log('Hello, VitePress!') :::

::: code-group javascript [config.js]를 호출합니다. 수출 기본 이름 * 이름: 'config 이름 * 이름 *

```타입script [config.ts] 수출 기본 이름 * 이름: 'config 이름 * 이름 * 카지노사이트

사이트맵

오프화이트

수학 표현

카지노사이트

이모티콘

카지노사이트

회사 소개

기본 Frontmatter

카지노사이트

고급 Frontmatter

카지노사이트

홈 배치

카지노사이트

주문 배치

카지노사이트

로그아웃

파일 기반 Routing

```bash

File structure determines routes

docs/ ├── index.md # -> / ├── guide/ │ ├── index.md # -> /guide/ │ ├── setup.md # -> /guide/setup │ └── advanced.md # -> /guide/advanced └── api/ ├── index.md # -> /api/ └── reference.md # -> /api/reference ```의 경우

동 노선

javascript // docs/.vitepress/config.js export default { async paths() { const posts = await getPosts() return posts.map(post => ({ params: { id: post.id }, content: post.content })) } }에 대하여

루트 메타데이터

```markdown

title: Custom Title description: Custom description head: - - meta - property: og:title content: Custom OG Title - - meta - property: og:description content: Custom OG Description

---

Page Content

```의 경우

Programmatic 항법

```vue

```에 대하여

인기 있는

기본 테마 사용자 정의

```javascript // docs/.vitepress/theme/index.js import DefaultTheme from 'vitepress/theme' import './custom.css'

export default { extends: DefaultTheme, enhanceApp({ app, router, siteData }) { // App-level enhancements app.component('MyComponent', MyComponent) } } ```의 경우

사용자 정의 CSS

카지노사이트

주문 배치

카지노사이트

테마 구성

카지노사이트

공급 업체

사업영역

카지노사이트

회사연혁

카지노사이트

Markdown에서 사용

__CODE_BLOCK_38_javascript의 경우 const data = api.getData()를 기다립니다. __CODE_BLOCK_39_타입 작성 const data: ApiResponse = api.getData()를 기다립니다. ```

```의 경우

연락처

카지노사이트

- 연혁

기본 정보

javascript // docs/.vitepress/config.js export default { themeConfig: { nav: [ { text: 'Home', link: '/' }, { text: 'Guide', link: '/guide/' }, { text: 'API', link: '/api/' }, { text: 'Changelog', link: '/changelog' } ] } }의 경우

Dropdown 탐색

javascript export default { themeConfig: { nav: [ { text: 'Home', link: '/' }, { text: 'Guide', items: [ { text: 'Getting Started', link: '/guide/' }, { text: 'Configuration', link: '/guide/configuration' }, { text: 'Deployment', link: '/guide/deployment' } ] }, { text: 'Reference', items: [ { text: 'API', items: [ { text: 'Runtime API', link: '/api/runtime' }, { text: 'Build API', link: '/api/build' } ] }, { text: 'Config', items: [ { text: 'Site Config', link: '/config/site' }, { text: 'Theme Config', link: '/config/theme' } ] } ] } ] } }를 호출합니다.

외부 링크

javascript export default { themeConfig: { nav: [ { text: 'Home', link: '/' }, { text: 'GitHub', link: 'https://github.com/user/repo' }, { text: 'Resources', items: [ { text: 'Documentation', link: '/docs/' }, { text: 'GitHub', link: 'https://github.com/user/repo' }, { text: 'Discord', link: 'https://discord.gg/invite' } ] } ] } }의 경우

Active Link 매칭

javascript export default { themeConfig: { nav: [ { text: 'Guide', link: '/guide/', activeMatch: '/guide/' // Matches /guide/* paths }, { text: 'API', link: '/api/', activeMatch: '^/api/' // Regex pattern } ] } }로

사이드바

기본 사이드바

카지노사이트

다수 측바

오프화이트

접을 수 있는 측바

카지노사이트

자동 생성된 측바

__CODE_BLOCK_49_로그

이름 *

지역 검색

카지노사이트

Algolia 검색

javascript export default { themeConfig: { search: { provider: 'algolia', options: { appId: 'YOUR_APP_ID', apiKey: 'YOUR_API_KEY', indexName: 'YOUR_INDEX_NAME', placeholder: 'Search docs', translations: { button: { buttonText: 'Search', buttonAriaLabel: 'Search' } } } } } }를 호출합니다.

회사 소개

```vue

```의 경우

국제화

다중 언어 구성

카지노사이트

i18n의 디렉토리 구조

카지노사이트

언어 전환

```vue

```로

계정 만들기

정적 호스팅

카지노사이트

GitHub 페이지

카지노사이트

다운로드

카지노사이트

다운로드

json { "buildCommand": "npm run docs:build", "outputDirectory": "docs/.vitepress/dist" }에

주문 영역

```javascript // docs/.vitepress/config.js export default { base: '/my-project/', // For GitHub Pages subdirectory // base: '/', // For custom domain

head: [ ['link', { rel: 'canonical', href: 'https://mydomain.com' }] ] } ```의 경우

사이트맵 이름 *

사이트 데이터

카지노사이트

페이지 Data

카지노사이트

테마 데이터

```vue

```의 경우

관련 기사

카지노사이트

플러그인

Markdown 플러그인

카지노사이트

Vite 플러그인

카지노사이트

사용자 정의 플러그인 예

카지노사이트

고급 구성

최적화

카지노사이트

주문 헤드 태그

카지노사이트

환경 변수

javascript // docs/.vitepress/config.js export default { define: { __VERSION__: JSON.stringify(process.env.npm_package_version), __BUILD_TIME__: JSON.stringify(new Date().toISOString()) } }의 경우

훅을 구축

카지노사이트

- 연혁

번들 분석

```bash

Install bundle analyzer

npm install --save-dev rollup-plugin-analyzer

Add to vite config

docs/.vitepress/config.js

export default { vite: { build: { rollupOptions: { plugins: [ require('rollup-plugin-analyzer')() ] } } } } ```의 경우

Lazy 선적

카지노사이트

이미지 최적화

```markdown

```로

캐싱 전략

카지노사이트

최고의 연습

회사소개

카지노사이트

사이트 맵 사업영역

카지노사이트

성과 모범 사례

• ** 이미지 최적화 ** 적절한 형식과 크기
• ** 사용 게으른 로딩 ** 무거운 부품에 대 한
• ** 묶음 크기 ** 트리 쉐이킹
• ** 적절한 헤더로 캐싱 **
• ** 정적 자산에 대한 CDN** 사용

콘텐츠 모범 사례

• **Write clear headings ** 더 나은 탐색을위한
• ** 일관된 형식 ** 페이지에
• **코드 예제 포함 ** 적절한 문법 강조
• ** 더 나은 검색 기능을 추가 **
• ** 일관된 항법 ** 구조

---

제품정보

VitePress는 Vue.js의 유연성과 Vite의 속도를 결합하는 강력한 정적 사이트 발전기입니다. 주요 특징은 다음을 포함합니다:

• ** 빠른 개발 **: Vite에 의해 구동되는 Lightning-fast HMR
• Vue-Powered: 대화형 구성을 위한 Full Vue.js 지원
• ** Markdown-Centered**: 향상된 Markdown 기능을 가진 내용에 초점
• Customizable: 가동 가능한 theming 및 성분 체계
• SEO-Friendly: 적절한 메타 태그와 정적 사이트 생성
• TypeScript 지원: 일류 TypeScript 통합
• 국제화: 내장 다국어 지원

VitePress의 기능 및 다음 모범 사례를 활용하여 빠르고 아름답고 유지 가능한 문서 사이트를 만들 수 있습니다.

<문서> 기능 copyToClipboard () 이름 * const 명령어 = document.querySelectorAll('code'); let allCommands = ''; 명령. forEach(cmd =>의 경우 모든Commands +=cmd.textContent + navigator.clipboard.write텍스(allCommands); alert('모든 명령은 클립보드에 복사!'); 이름 *

함수 생성PDF() { 창. 인쇄 (); 이름 *