当前位置： 文江博客 Node Package Readme @11ty/eleventy-plugin-vue 中文文档教程

@11ty/eleventy-plugin-vue 中文文档教程

发布于 3年前 浏览 33 项目主页 更新于 3年前

eleventy-plugin-vue for Vue 2

Vue.js 的零包大小服务器渲染组件。

在 Eleventy 和 Vue，为 Netlify.com 提供支持

Installation

npm install @11ty/eleventy-plugin-vue

  • 0.7.x 鼓励使用 Eleventy 1.0.0（和 Node 12+）

  • 0.2.x 鼓励使用 Eleventy 0.11.1 或更新版本（用于增量 Vue 组件构建）

  • 0.1.x 需要 Eleventy 0.11.0 或更新

  • 的 0.0.x 需要 Eleventy 0.11.0 Beta 2 或更高版本（0.11.0-beta.2 )

  • 需要 Eleventy 中的实验性功能，特别是：Eleventy 中的自定义文件扩展处理程序功能。 通过运行 ELEVENTY_EXPERIMENTAL=true npx @11ty/eleventy 选择 Eleventy 的实验性功能。

Changelog

  • 0.3.0 (Milestone) More consistent incremental builds. Performance improvements.
  • 0.2.1 (Milestone) adds incremental builds for Eleventy Vue components to avoid unnecessary repeat work. Fixes bug with permalink strings returned from Vue Single File Component data.
  • 0.1.x converted to use a Single File Components for everything (templates, components, etc), instead of 0.0.x’s string templates with front matter.

Features

  • Builds *.vue’s Single File Components, both in the input directory and in Eleventy’s includes directory. .vue files in the includes directory are available for import but only those outside of the includes directory result in output files.
  • Works with Vue’s Single File Components, including with scoped CSS.
  • Data from single file components feeds into the data cascade (similar to front matter)
  • All JavaScript Template Functions (see https://www.11ty.dev/docs/languages/javascript/#javascript-template-functions), Universal Filters, Universal Shortcodes, Universal Paired Shortcodes are available as Vue methods (global functions to use in templates and child components).
  • For example, you can use the url Universal Filter like url("/my-url/") in your Vue templates.
  • page Eleventy supplied data is also available globally in all components.

Not Yet Available

  • Traditional Vue.js “Page templates” (think <!--vue-ssr-outlet-->) as layouts.
  • Using .vue templates as Eleventy layouts is not yet supported. Subscribe to this issue at #26.
  • Does not yet embed any client-side JavaScript from inside single file components into the output for use on the client. Any JavaScript embedded there is used only for rendering templates in the build and does not show up in the output.
  • Note that if this is added in the future, it will likely be an opt-in feature.
  • lang on <template>, <style>, or <script> is not yet supported.
  • Windows support

Warnings

  • Adding a <!doctype html> to a Vue template is not supported by Vue. For this reason it is recommended to use a different template syntax for your layout (until Vue.js Page Templates support is added per the note above).

Usage

Add to Configuration File

通常为 .eleventy.js：

const eleventyVue = require("@11ty/eleventy-plugin-vue");

module.exports = function(eleventyConfig) {
  // Use Defaults
  eleventyConfig.addPlugin(eleventyVue);
};

Customize with Options

const eleventyVue = require("@11ty/eleventy-plugin-vue");

module.exports = function(eleventyConfig) {
  // OR, Use your own options
  eleventyConfig.addPlugin(eleventyVue, {
    // Directory to store compiled Vue single file components
    cacheDirectory: ".cache/vue/",

    // Pass in a file or multiple .vue files to limit compilation
    // If this is empty, the plugin will search for all *.vue files
    input: [],

    // Use postcss in the single file components
    rollupPluginVueOptions: {
      style: {
        postcssPlugins: [
          require("autoprefixer"),
          require("postcss-nested")
        ]
      }
    }
  });
};

有关 rollupPluginVueOptions 的完整列表，请参阅 rollup-plugin-vue 的选项。

Advanced: Use with eleventy-assets

与 @11ty/eleventy-plugin-vue 0.0.5 及更新版本兼容。

Eleventy 的资产插件让您管理自己的内联 CSS 或 JavaScript。 对于 Eleventy Vue 插件的第一个版本，您可以重用来自 eleventy-assets 的现有 CSS 代码管理器，也可以从您的 Vue.js 单文件组件添加 CSS。

const eleventyVue = require("@11ty/eleventy-plugin-vue");
const { InlineCodeManager } = require("@11ty/eleventy-assets");

module.exports = function(eleventyConfig) {
  let myCssManager = new InlineCodeManager();

  eleventyConfig.addPlugin(eleventyVue, {
    // Re-use an existing `eleventy-assets` Manager
    assets: {
      css: myCssManager
    }
  });
};

Advanced: Run async things before component render

可用于 Eleventy 1.0+ 和 Eleventy Vue 插件 0.6+

使用 serverPrefetch< /a> 告诉组件在渲染组件之前做一些异步的事情。

下面是一个 Vue 模板的示例，它使用 Eleventy Render Plugin 来呈现 Markdown（在外部文件或细绳）。

<template>
  <header v-html="content"/>
</template>
<script>
export default {
  async serverPrefetch() {
    // let content = await this.renderFile("./_includes/blogpost.md", "md");
    this.content = await this.renderTemplate("# Title", "md");
  }
}
</script>
  • https://ssr.vuejs.org/
  • https://vuejs.org/v2/guide/single-file-components.html
  • https://vue-loader.vuejs.org/guide/scoped-css.html
  • https://rollup-plugin-vue.vuejs.org/
  • https://rollupjs.org/guide/en/

TODO

  • Custom Directives?
  • How to render Vue templates inside of other template files, including Markdown?
原文

eleventy-plugin-vue for Vue 2

Zero bundle size server-rendered components for Vue.js.

Read more about the goals of this plugin (and a full tutorial!) at Eleventy and Vue, a match made to power Netlify.com

Installation

npm install @11ty/eleventy-plugin-vue

  • 0.7.x is encouraged to use Eleventy 1.0.0 (and Node 12+)

  • 0.2.x is encouraged to use Eleventy 0.11.1 or newer (for incremental Vue component builds)

  • 0.1.x requires Eleventy 0.11.0 or newer

  • 0.0.x requires Eleventy 0.11.0 Beta 2 or above (0.11.0-beta.2)

  • Requires experimental features in Eleventy, specifically: Custom File Extension Handlers feature from Eleventy. Opt in to experimental features on Eleventy by running ELEVENTY_EXPERIMENTAL=true npx @11ty/eleventy.

Changelog

  • 0.3.0 (Milestone) More consistent incremental builds. Performance improvements.
  • 0.2.1 (Milestone) adds incremental builds for Eleventy Vue components to avoid unnecessary repeat work. Fixes bug with permalink strings returned from Vue Single File Component data.
  • 0.1.x converted to use a Single File Components for everything (templates, components, etc), instead of 0.0.x’s string templates with front matter.

Features

  • Builds *.vue’s Single File Components, both in the input directory and in Eleventy’s includes directory. .vue files in the includes directory are available for import but only those outside of the includes directory result in output files.
  • Works with Vue’s Single File Components, including with scoped CSS.
  • Data from single file components feeds into the data cascade (similar to front matter)
  • All JavaScript Template Functions (see https://www.11ty.dev/docs/languages/javascript/#javascript-template-functions), Universal Filters, Universal Shortcodes, Universal Paired Shortcodes are available as Vue methods (global functions to use in templates and child components).
  • For example, you can use the url Universal Filter like url("/my-url/") in your Vue templates.
  • page Eleventy supplied data is also available globally in all components.

Not Yet Available

  • Traditional Vue.js “Page templates” (think <!--vue-ssr-outlet-->) as layouts.
  • Using .vue templates as Eleventy layouts is not yet supported. Subscribe to this issue at #26.
  • Does not yet embed any client-side JavaScript from inside single file components into the output for use on the client. Any JavaScript embedded there is used only for rendering templates in the build and does not show up in the output.
  • Note that if this is added in the future, it will likely be an opt-in feature.
  • lang on <template>, <style>, or <script> is not yet supported.
  • Windows support

Warnings

  • Adding a <!doctype html> to a Vue template is not supported by Vue. For this reason it is recommended to use a different template syntax for your layout (until Vue.js Page Templates support is added per the note above).

Usage

Add to Configuration File

Usually .eleventy.js:

const eleventyVue = require("@11ty/eleventy-plugin-vue");

module.exports = function(eleventyConfig) {
  // Use Defaults
  eleventyConfig.addPlugin(eleventyVue);
};

Customize with Options

const eleventyVue = require("@11ty/eleventy-plugin-vue");

module.exports = function(eleventyConfig) {
  // OR, Use your own options
  eleventyConfig.addPlugin(eleventyVue, {
    // Directory to store compiled Vue single file components
    cacheDirectory: ".cache/vue/",

    // Pass in a file or multiple .vue files to limit compilation
    // If this is empty, the plugin will search for all *.vue files
    input: [],

    // Use postcss in the single file components
    rollupPluginVueOptions: {
      style: {
        postcssPlugins: [
          require("autoprefixer"),
          require("postcss-nested")
        ]
      }
    }
  });
};

For a full list of rollupPluginVueOptions, see rollup-plugin-vue’s Options.

Advanced: Use with eleventy-assets

Compatible with @11ty/eleventy-plugin-vue 0.0.5 and newer.

Eleventy’s Assets plugin lets you manage your own Inline CSS or JavaScript. For the first version of the Eleventy Vue plugin, you can reuse an existing CSS code manager from eleventy-assets add CSS from your Vue.js Single File Components too.

const eleventyVue = require("@11ty/eleventy-plugin-vue");
const { InlineCodeManager } = require("@11ty/eleventy-assets");

module.exports = function(eleventyConfig) {
  let myCssManager = new InlineCodeManager();

  eleventyConfig.addPlugin(eleventyVue, {
    // Re-use an existing `eleventy-assets` Manager
    assets: {
      css: myCssManager
    }
  });
};

Advanced: Run async things before component render

Available with Eleventy 1.0+ and Eleventy Vue Plugin 0.6+

Use serverPrefetch to tell the component to do a few async things before it renders the component.

Below is an example of a Vue template that uses the Eleventy Render Plugin to render Markdown (either in an external file or a string).

<template>
  <header v-html="content"/>
</template>
<script>
export default {
  async serverPrefetch() {
    // let content = await this.renderFile("./_includes/blogpost.md", "md");
    this.content = await this.renderTemplate("# Title", "md");
  }
}
</script>
  • https://ssr.vuejs.org/
  • https://vuejs.org/v2/guide/single-file-components.html
  • https://vue-loader.vuejs.org/guide/scoped-css.html
  • https://rollup-plugin-vue.vuejs.org/
  • https://rollupjs.org/guide/en/

TODO

  • Custom Directives?
  • How to render Vue templates inside of other template files, including Markdown?
更多

你可能也喜欢

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文