VuePress 시작하기

VuePress은 정적 사이트 생성기 목록의 블록에 있는 새로운 아이입니다. Vue 작성자 Evan Vue 기반 프로젝트에 대한 문서 작성을 위한 이 멋진 도구를 생각해냈고 이는 프로젝트의 영감이 되었습니다. 그러나 이 강력한 도구는 필요에 맞게 사용자 정의할 수도 있습니다.

VuePress 사이트는 실제로 Vue, Vue 라우터 및 웹팩으로 구동되는 SPA입니다. 빌드 후 앱의 서버 렌더링 버전이 생성됩니다. Nuxt 및 Gatsby 접근 방식과 유사합니다.

각 마크다운 파일은 markdown-it을 사용하여 HTML로 컴파일된 다음 Vue 구성 요소의 템플릿으로 처리됩니다. 이렇게 하면 마크다운 파일 내에서 Vue를 직접 사용할 수 있으며 동적 콘텐츠를 포함해야 할 때 유용합니다.

특징

내장 마크다운 확장 프로그램

기본 테마

자동 서비스 노동자

Google Analytics 통합

다국어 지원

설치

// install globally
yarn global add vuepress
npm install -g vuepress

// create a markdown file
echo '# Hello VuePress' > docs/README.md

// start writing
vuepress dev

// build
vuepress build

설정 후 사이트를 구성해야 합니다. VuePress는 구성할 수 있는 기본 테마와 함께 제공되는 고도로 사용자 정의할 수 있습니다here. VuePress 웹사이트를 구성하는 데 필요한 파일입니다docs/.vuepress/config.js.

module.exports = {
  title: "Welcome to Wakanda",
  description: "The cultured people of Wakanda welcome you"
}

---
home: true
actionText: Get Started →
actionLink: /guide/
features:
- title: Simplicity First
  details: Minimal setup with markdown-centered project structure helps you focus on writing.
- title: Vue-Powered
  details: Enjoy the dev experience of Vue + webpack, use Vue components in markdown, and develop custom themes with Vue.
- title: Performant
  details: VuePress generates pre-rendered static HTML for each page, and runs as an SPA once a page is loaded.
footer: MIT Licensed | Copyright © 2018-present Evan You
---
# Wakanda Heritage

## Alert Options

::: tip
This is a tip
:::

::: warning No
This is a warning
:::

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

마크다운 콘텐츠를 사용하면 Vue의 내장 구문과 vue 구성 요소를 사용하여 많은 것을 얻을 수 있습니다. 모든 마크다운 파일은 Vue 구성 요소로 컴파일되고 webpack에 의해 처리되므로 상대 URL을 사용하여 자산을 참조하는 것을 선호할 수 있습니다.

스타일 재정의

스타일을 재정의하려면 .vuepress/override.styl를 생성하여 기본 테마 스타일을 변경하면 됩니다.

$accentColor = #3eaf7c
$textColor = #2c3e50
$borderColor = #eaecef
$codeBgColor = #282c34

Netlify로 배포

다음 가이드에서는 프로젝트의 docs 디렉터리에 파일을 배치하고 기본 빌드 출력 위치를 사용한다고 가정합니다.package.json 파일에는 문서 작성을 위한 다음 명령이 있어야 합니다.

"scripts": {
  "dev": "vuepress dev:docs"
  "build": "vuepress build:docs"
}

Netlify는 정적 웹사이트를 위한 최고의 CDN 중 하나입니다. 이 VuePress 프로젝트를 Netlify에 배포하고 다음 설정으로 GitHub에서 새 프로젝트를 설정합니다.

Build Command:npm run docs:build or yarn docs: build
Publish directory:docs/.vuepress/dist

배포 버튼을 누르세요!



VuePress는 놀라울 정도로 빠르고 쉽게 시작할 수 있습니다. 이 튜토리얼은 VuePress가 한 입 크기의 섹션에서 수행할 수 있는 모든 작업을 중단합니다. 마크다운 파일 내에서 Vue를 작성할 수 있는 기능을 통해 테마를 사용자 지정하고 사전 렌더링된 HTML을 제공하며 로드 시 SPA로 실행됩니다. VuePress가 제공하는 것에 대해 자세히 알아보려면 docs을 확인하십시오. 최종 프로젝트 lives here 및 repo .

또한 VuePress에 대한 질문이나 생각을 댓글로 남겨주세요.

giftegwuenu.com에 원래 게시됨