VitePress-Vite＆Vue驱动的静态站点生成器

最新推荐文章于 2024-08-02 12:21:32 发布

cuk5239

最新推荐文章于 2024-08-02 12:21:32 发布

阅读量2.2k

点赞数

文章标签： java vue javascript html python ViewUI

原文链接：https://vuejsexamples.com/vitepress-vite-vue-powered-static-site-generator/

版权

VitePress (VitePress)

VitePress is a Vue-powered static site generator from Evan You, the creator of Vue.js.

VitePress是Vue.js的创建者Evan You的Vue支持的静态站点生成器。

VuePress' little brother, built on top of vite

VuePress的小弟弟，建立在Vite之上

npm install -D vitepress
echo '# Hello VitePress' > index.md

# starts dev server
npx vitepress

# build > .vitepress/dist
npx vitepress build

Note this is early WIP! The default theme is non-existent, but the basic workflow is there.

请注意，这是早期在制品！默认主题不存在，但是基本工作流程在那里。

客制化 (Customization)

Configuration can be done via .vitepress/config.js (see src/config.ts)

可以通过.vitepress/config.js完成配置(请参阅src/config.ts )

You can develop your custom theme by adding the following files:

您可以通过添加以下文件来开发自定义主题：

.vitepress/theme/Layout.vue

<template>
  <h1>Custom Layout!</h1>
  <Content/><!-- make sure to include markdown outlet -->
</template>

.vitepress/theme/index.js

import Layout from './Layout.vue'

export default {
  Layout,
  NotFound: () => 'custom 404', // <- this is a Vue 3 functional component
  enhanceApp({ app, router, siteData }) {
    // app is the Vue 3 app instance from createApp()
    // router is VitePress' custom router (see `lib/app/router.js`)
    // siteData is a ref of current site-level metadata.
  }
}

Unlike VuePress, the only file with a fixed location in a theme is index.js - everything else is imported and exported there like in a normal application.

与VuePress不同，主题中唯一具有固定位置的文件是index.js其他所有内容都像在普通应用程序中一样导入和导出。

动机 (Motivation)

I love VuePress, 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!

我喜欢VuePress，但由于是在Webpack之上构建的，因此为几个页面的简单文档站点启动开发服务器所花费的时间变得越来越难以忍受。甚至HMR更新也可能需要长达几秒钟的时间才能在浏览器中反映出来！

As a reference, the Composition API RFC repo is just two pages, but it takes 4 seconds to spin up the server, and almost 2 seconds for any edit to reflect in the browser.

作为参考， Composition API RFC存储库只有两页，但是启动服务器需要4秒钟，将任何编辑反映在浏览器中都需要2秒钟。

Fundamentally, this is because VuePress 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!

从根本上讲，这是因为VuePress是一个底层的Webpack应用程序。即使只有两页，也要编译完整的webpack项目(包括所有主题源文件)。当项目有很多页面时，情况变得更糟-必须首先完全编译每个页面，服务器才能显示任何内容！

Incidentally, vite solves these problems really well: nearly instant server start, 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 over time, but never had the time to fix due to the amount of refactoring it would require.

顺便说一句， vite确实很好地解决了这些问题：近乎即时的服务器启动，仅编译正在提供服务的页面的按需编译以及快速的HMR。另外，随着时间的推移，我在VuePress中注意到了一些其他设计问题，但由于需要大量的重构，因此从未有时间修复。

Now, with vite and Vue 3, it is time to rethink what a "Vue-powered static site generator" can really be.

现在，借助vite和Vue 3，现在该重新考虑“ Vue驱动的静态站点生成器”的真正含义了。

对VuePress的改进 (Improvements over VuePress)

Uses Vue 3.

使用Vue 3。
- 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 much cheaper to parse, and hydration also becomes faster.
  
  利用Vue 3改进的模板静态分析来尽可能对静态内容进行分类。静态内容是作为字符串文字而不是JavaScript呈现功能代码发送的-JS有效负载因此解析起来便宜得多，并且水合作用也变得更快。
  
  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.
  
  请注意，在应用优化的同时仍允许用户在markdown内容内自由混合Vue组件-编译器自动为您执行静态/动态分离，而您无需考虑它。
Uses vite under the hood:

在vite使用vite ：
- Faster dev server start
  开发服务器启动更快
- Faster hot updates
  更快的热更新
- Faster build (uses Rollup internally)
  更快的构建(内部使用汇总)
Lighter page weight.

较轻的页面重量。
- Vue 3 tree-shaking + Rollup code splitting
  Vue 3摇树+汇总代码拆分
- 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.
  不会为每个请求的每个页面提供元数据。这使页面权重与总页数脱钩。仅发送当前页面的元数据。客户端导航会一起获取新页面的组件和元数据。
- vue-router because the need of VitePress is very simple and specific - a simple custom router (under 200 LOC) is used instead.vue-router因为对VitePress的需求非常简单和具体-使用简单的自定义路由器(200 LOC以下)代替。
- (WIP) i18n locale data should also be fetched on demand.
  (WIP)i18n语言环境数据也应按需获取。

其他差异 (Other Differences)

More opinionated and less configurable: VitePress aims to scale back the complexity in the current VuePress and restart from its minimalist roots.

更自以为是，可配置性更低：VitePress旨在降低当前VuePress的复杂性，并从其最低限度的根源重新开始。
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.

面向未来：VitePress仅针对支持本机ES模块导入的浏览器。它鼓励使用没有转译的本机JavaScript，以及用于主题化CSS变量。

这会成为未来的下一个VuePress吗？ (Will this become the next VuePress in the future?)

Maybe! It's currently under a different name so that we don't over commit to the compatibility with the current VuePress ecosystem (mostly themes and plugins). We'll see how close we can get without compromising the design goals listed above. But 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).

也许！目前它的名称不同，因此我们不会过分致力于与当前VuePress生态系统(主要是主题和插件)的兼容性。我们将看到在不损害上面列出的设计目标的情况下可以达到的距离。但是总的想法是，VitePress将具有尽可能少的主题API(最好使用JavaScript API而不是文件布局约定)，并且可能没有插件(所有自定义均在主题中完成)。