24 lines
15 KiB
HTML
24 lines
15 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en-US">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||
<title>What is VitePress? | VitePress</title>
|
||
<meta name="description" content="Vite & Vue powered static site generator.">
|
||
<link rel="stylesheet" href="/assets/style.82fdbeb8.css">
|
||
<link rel="modulepreload" href="/assets/chunks/ui-custom.1a068566.js">
|
||
<link rel="modulepreload" href="/assets/chunks/ui-custom.30ce3a39.js">
|
||
<link rel="modulepreload" href="/assets/chunks/AlgoliaSearchBox.e5144af4.js">
|
||
<link rel="modulepreload" href="/assets/app.54944ef9.js">
|
||
<link rel="modulepreload" href="/assets/index.md.9a001cbe.lean.js">
|
||
|
||
<meta name="twitter:title" content="What is VitePress? | VitePress">
|
||
<meta property="og:title" content="What is VitePress? | VitePress">
|
||
</head>
|
||
<body>
|
||
<div id="app"><!--[--><div class="theme"><header class="nav-bar" data-v-675d8756><div class="sidebar-button" data-v-675d8756><svg class="icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z" class></path></svg></div><a class="nav-bar-title" href="/" aria-label="VitePress, back to home" data-v-675d8756 data-v-cc01ef16><!----> VitePress</a><div class="flex-grow" data-v-675d8756></div><div class="nav" data-v-675d8756><nav class="nav-links" data-v-675d8756 data-v-eab3edfe><!--[--><div class="item" data-v-eab3edfe><div class="nav-link" data-v-eab3edfe data-v-b8818f8c><a class="item active" href="/" data-v-b8818f8c>Guide <!----></a></div></div><div class="item" data-v-eab3edfe><div class="nav-link" data-v-eab3edfe data-v-b8818f8c><a class="item" href="/config/basics" data-v-b8818f8c>Config Reference <!----></a></div></div><div class="item" data-v-eab3edfe><div class="nav-link" data-v-eab3edfe data-v-b8818f8c><a class="item isExternal" href="https://github.com/vuejs/vitepress/releases" target="_blank" rel="noopener noreferrer" data-v-b8818f8c>Release Notes <svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-b8818f8c><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div></div><!--]--><!----><div class="item" data-v-eab3edfe><div class="nav-link" data-v-eab3edfe data-v-b8818f8c><a class="item isExternal" href="https://github.com/vuejs/vitepress" target="_blank" rel="noopener noreferrer" data-v-b8818f8c>GitHub <svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-b8818f8c><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div></div></nav></div><!--[--><!--[--><div class="algolia-search-box" id="docsearch"></div><!--]--><!--]--></header><aside class="sidebar" data-v-83e92a68><nav class="nav-links nav" data-v-83e92a68 data-v-eab3edfe><!--[--><div class="item" data-v-eab3edfe><div class="nav-link" data-v-eab3edfe data-v-b8818f8c><a class="item active" href="/" data-v-b8818f8c>Guide <!----></a></div></div><div class="item" data-v-eab3edfe><div class="nav-link" data-v-eab3edfe data-v-b8818f8c><a class="item" href="/config/basics" data-v-b8818f8c>Config Reference <!----></a></div></div><div class="item" data-v-eab3edfe><div class="nav-link" data-v-eab3edfe data-v-b8818f8c><a class="item isExternal" href="https://github.com/vuejs/vitepress/releases" target="_blank" rel="noopener noreferrer" data-v-b8818f8c>Release Notes <svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-b8818f8c><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div></div><!--]--><!----><div class="item" data-v-eab3edfe><div class="nav-link" data-v-eab3edfe data-v-b8818f8c><a class="item isExternal" href="https://github.com/vuejs/vitepress" target="_blank" rel="noopener noreferrer" data-v-b8818f8c>GitHub <svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-b8818f8c><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div></div></nav><!--[--><!--]--><ul class="sidebar-links" data-v-83e92a68><!--[--><li class="sidebar-link"><p class="sidebar-link-item">Introduction</p><ul class="sidebar-links"><li class="sidebar-link"><a class="sidebar-link-item active" href="/">What is VitePress?</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/guide/getting-started">Getting Started</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/guide/configuration">Configuration</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/guide/assets">Asset Handling</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/guide/markdown">Markdown Extensions</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/guide/using-vue">Using Vue in Markdown</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/guide/deploy">Deploying</a><!----></li></ul></li><li class="sidebar-link"><p class="sidebar-link-item">Advanced</p><ul class="sidebar-links"><li class="sidebar-link"><a class="sidebar-link-item" href="/guide/frontmatter">Frontmatter</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/guide/theming">Theming</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/guide/api">API Reference</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/guide/differences-from-vuepress">Differences from Vuepress</a><!----></li></ul></li><!--]--></ul><!--[--><!--]--></aside><div class="sidebar-mask"></div><main class="page" data-v-7eddb2c4><div class="container" data-v-7eddb2c4><!--[--><!--[--><div id="ads-container"><div class="carbon-ads" data-v-5941b830></div></div><!--]--><!--[--><!--]--><!--]--><div style="position:relative;" class="content" data-v-7eddb2c4><div><h1 id="what-is-vitepress" tabindex="-1">What is VitePress? <a class="header-anchor" href="#what-is-vitepress" aria-hidden="true">#</a></h1><div class="warning custom-block"><p class="custom-block-title">WARNING</p><p>VitePress is currently in 0.x status. It is already suitable for out-of-the-box documentation use, but the config and theming API may still change between minor releases.</p></div><p>VitePress is <a href="https://vuepress.vuejs.org" target="_blank" rel="noopener noreferrer">VuePress</a>' little brother, built on top of <a href="https://github.com/vitejs/vite" target="_blank" rel="noopener noreferrer">Vite</a>.</p><h2 id="motivation" tabindex="-1">Motivation <a class="header-anchor" href="#motivation" aria-hidden="true">#</a></h2><p>We love VuePress v1, but being built on top of Webpack, the time it takes to spin up the dev server for a simple doc site with a few pages is just becoming unbearable. Even HMR updates can take up to seconds to reflect in the browser!</p><p>Fundamentally, this is because VuePress v1 is a Webpack app under the hood. Even with just two pages, it's a full on Webpack project (including all the theme source files) being compiled. It gets even worse when the project has many pages – every page must first be fully compiled before the server can even display anything!</p><p>Incidentally, Vite solves these problems really well: nearly instant server start, an on-demand compilation that only compiles the page being served, and lightning-fast HMR. Plus, there are a few additional design issues I have noted in VuePress v1 over time but never had the time to fix due to the amount of refactoring it would require.</p><p>Now, with Vite and Vue 3, it is time to rethink what a "Vue-powered static site generator" can really be.</p><h2 id="improvements-over-vuepress-v1" tabindex="-1">Improvements Over VuePress v1 <a class="header-anchor" href="#improvements-over-vuepress-v1" aria-hidden="true">#</a></h2><p>There're couple of things that are improved from VuePress v1....</p><h3 id="it-uses-vue-3" tabindex="-1">It Uses Vue 3 <a class="header-anchor" href="#it-uses-vue-3" aria-hidden="true">#</a></h3><p>Leverages Vue 3's improved template static analysis to stringify static content as much as possible. Static content is sent as string literals instead of JavaScript render function code – the JS payload is therefore <em>much</em> cheaper to parse, and hydration also becomes faster.</p><p>Note the optimization is applied while still allowing the user to freely mix Vue components inside markdown content – the compiler does the static/dynamic separation for you automatically and you never need to think about it.</p><h3 id="it-uses-vite-under-the-hood" tabindex="-1">It Uses Vite Under The Hood <a class="header-anchor" href="#it-uses-vite-under-the-hood" aria-hidden="true">#</a></h3><ul><li>Faster dev server start</li><li>Faster hot updates</li><li>Faster build (uses Rollup internally)</li></ul><h3 id="lighter-page-weight" tabindex="-1">Lighter Page Weight <a class="header-anchor" href="#lighter-page-weight" aria-hidden="true">#</a></h3><ul><li>Vue 3 tree-shaking + Rollup code splitting</li><li>Does not ship metadata for every page on every request. This decouples page weight from total number of pages. Only the current page's metadata is sent. Client side navigation fetches the new page's component and metadata together.</li><li>Does not use <code>vue-router</code> because the need of VitePress is very simple and specific - a simple custom router (under 200 LOC) is used instead.</li><li>(WIP) i18n locale data should also be fetched on demand.</li></ul><h2 id="other-differences" tabindex="-1">Other Differences <a class="header-anchor" href="#other-differences" aria-hidden="true">#</a></h2><p>VitePress is more opinionated and less configurable: VitePress aims to scale back the complexity in the current VuePress and restart from its minimalist roots.</p><p>VitePress is future oriented: VitePress only targets browsers that support native ES module imports. It encourages the use of native JavaScript without transpilation, and CSS variables for theming.</p><h2 id="will-this-become-the-next-vuepress-in-the-future" tabindex="-1">Will This Become The Next VuePress in The Future? <a class="header-anchor" href="#will-this-become-the-next-vuepress-in-the-future" aria-hidden="true">#</a></h2><p>We already have <a href="https://github.com/vuepress/vuepress-next" target="_blank" rel="noopener noreferrer">vuepress-next</a>, which would be the next major version of VuePress. It also makes lots of improvements over VuePress v1, and also supports Vite now.</p><p>VitePress is not compatible with the current VuePress ecosystem (mostly themes and plugins). The overall idea is that VitePress will have a drastically more minimal theming API (preferring JavaScript APIs instead of file layout conventions) and likely no plugins (all customization is done in themes).</p></div></div><footer class="page-footer" data-v-7eddb2c4 data-v-07c132fc><div class="edit" data-v-07c132fc><div class="edit-link" data-v-07c132fc data-v-1ed99556><a class="link" href="https://github.com/vuejs/vitepress/edit/main/docs/index.md" target="_blank" rel="noopener noreferrer" data-v-1ed99556>Edit this page on GitHub <svg class="icon outbound icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-1ed99556><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div></div><div class="updated" data-v-07c132fc><p class="last-updated" data-v-07c132fc data-v-abce3432><span class="prefix" data-v-abce3432>Last Updated:</span><span class="datetime" data-v-abce3432></span></p></div></footer><div class="next-and-prev-link" data-v-7eddb2c4 data-v-38ede35f><div class="container" data-v-38ede35f><div class="prev" data-v-38ede35f><!----></div><div class="next" data-v-38ede35f><a class="link" href="/guide/getting-started" data-v-38ede35f><span class="text" data-v-38ede35f>Getting Started</span><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="icon icon-next" data-v-38ede35f><path d="M19.9,12.4c0.1-0.2,0.1-0.5,0-0.8c-0.1-0.1-0.1-0.2-0.2-0.3l-7-7c-0.4-0.4-1-0.4-1.4,0s-0.4,1,0,1.4l5.3,5.3H5c-0.6,0-1,0.4-1,1s0.4,1,1,1h11.6l-5.3,5.3c-0.4,0.4-0.4,1,0,1.4c0.2,0.2,0.5,0.3,0.7,0.3s0.5-0.1,0.7-0.3l7-7C19.8,12.6,19.9,12.5,19.9,12.4z"></path></svg></a></div></div></div><!--[--><!--[--><!--]--><!--[--><div class="buy-sell-ads" data-v-4ce5ad17><div class="bsa-cpc" data-v-4ce5ad17></div></div><!--]--><!--]--></div></main></div><!----><!--]--></div>
|
||
<script>__VP_HASH_MAP__ = JSON.parse("{\"config_algolia-search.md\":\"da33e9e2\",\"config_basics.md\":\"8b6d1758\",\"config_carbon-ads.md\":\"2699d04a\",\"config_homepage.md\":\"2f01ca2d\",\"guide_api.md\":\"03e88529\",\"guide_assets.md\":\"aae76804\",\"guide_configuration.md\":\"bb340dd8\",\"guide_deploy.md\":\"661eacb4\",\"guide_differences-from-vuepress.md\":\"459a9c4a\",\"guide_frontmatter.md\":\"07dc76f0\",\"guide_getting-started.md\":\"f9753073\",\"guide_global-component.md\":\"01405ea5\",\"guide_markdown.md\":\"6ff83e9e\",\"guide_theming.md\":\"b28ff51e\",\"guide_using-vue.md\":\"74e82a4f\",\"index.md\":\"9a001cbe\"}")</script>
|
||
<script type="module" async src="/assets/app.54944ef9.js"></script>
|
||
|
||
</body>
|
||
</html> |