vue ssr 没有数据_通过SSR支持管理Vue.js组件中HTML元数据

最新推荐文章于 2021-11-27 16:19:30 发布

cuk5340

最新推荐文章于 2021-11-27 16:19:30 发布

阅读量320

点赞数

文章标签： java vue 大数据 python js ViewUI

原文链接：https://vuejsexamples.com/manage-html-metadata-in-vue-js-components-with-ssr-support/

版权

vue ssr 没有数据

维达 (vue-meta)

Manage HTML metadata in Vue.js components with SSR support.

通过SSR支持管理Vue.js组件中HTML元数据。

View Demo 查看演示 View Github 查看Github

<template>
  ...
</template>

<script>
  export default {
    metaInfo: {
      title: 'My Example App',
      titleTemplate: '%s - Yay!',
      htmlAttrs: {
        lang: 'en',
        amp: true
      }
    }
  }
</script>

<html lang="en" amp>
<head>
  <title>My Example App - Yay!</title>
  ...
</head>

介绍 (Introduction)

Vue Meta is a Vue.js plugin that allows you to manage your app's metadata. It is inspired by and works similar as react-helmet for react. However, instead of setting your data as props passed to a proprietary component, you simply export it as part of your component's data using the metaInfo property.

Vue Meta是一个Vue.js插件，可让您管理应用程序的元数据。它的灵感来自于react-helmet ，其作用类似于react-helmet 。但是，您无需将数据设置为传递给专有组件的道具，而只需使用metaInfo属性将其作为组件数据的一部分导出metaInfo 。

These properties, when set on a deeply nested component, will cleverly overwrite their parent components' metaInfo, thereby enabling custom info for each top-level view as well as coupling metadata directly to deeply nested subcomponents for more maintainable code.

这些属性在深度嵌套的组件上设置时，将巧妙地覆盖其父组件的metaInfo ，从而为每个顶级视图启用自定义信息，并将元数据直接耦合到深度嵌套的子组件，以实现更可维护的代码。

文献资料 (Documentation)

Please find the documention on https://vue-meta.nuxtjs.org

请在https://vue-meta.nuxtjs.org上找到该文档

:globe_with_meridians: Please help us translate the documentation into your language, see here for more information

：globe_with_meridians：请帮助我们将文档翻译成您的语言，有关更多信息，请参见此处

例子 (Examples)

Looking for more examples what vue-meta can do for you? Have a look at the examples

寻找更多示例，vue-meta可以为您做什么？看看例子

安装 (Installation)

纱 (Yarn)

$ yarn add vue-meta

npm (npm)

$ npm install vue-meta --save

下载/ CDN (Download / CDN)

Use the download links below - if you want a previous version, check the instructions at https://unpkg.com.

使用下面的下载链接-如果要使用以前的版本，请查看https://unpkg.com上的说明。

Latest version: https://unpkg.com/vue-meta/dist/vue-meta.min.js

最新版本： https ： //unpkg.com/vue-meta/dist/vue-meta.min.js

Latest v1.x version: https://unpkg.com/[email protected]/dist/vue-meta.min.js

最新的v1.x版本： https ： //unpkg.com/ [受电子邮件保护] /dist/vue-meta.min.js

Uncompressed:

未压缩：

<script src="https://unpkg.com/vue-meta/dist/vue-meta.js"></script>

Minified:

缩小：

<script src="https://unpkg.com/vue-meta/dist/vue-meta.min.js"></script>

快速使用 (Quick Usage)

See the documentation for more information

请参阅文档以获取更多信息

import Vue from 'vue'
import VueMeta from 'vue-meta'

Vue.use(VueMeta, {
  // optional pluginOptions
  refreshOnceOnNavigation: true
})

使用vue-meta的框架 (Frameworks using vue-meta)

If you wish to create your app even more quickly, take a look at the following frameworks which use vue-meta

如果您希望更快地创建应用，请查看以下使用vue-meta的框架

Nuxt.js - The Vue.js Progressive Framework
Nuxt.js -Vue.js渐进框架
Gridsome - The Vue.js JAMstack Framework
Gridsome -Vue.js JAMstack框架
Ream - Framework for building universal web app and static website in Vue.js
铰 -框架构建通用的Web应用程序和静态网站Vue.js
Vue-Storefront - PWA for eCommerce
Vue店面 -电子商务的PWA
Factor JS - Extension-first VueJS platform for front-end developers.
Factor JS-面向前端开发人员的扩展优先的VueJS平台。

如何翻译文件 (How to translate documentation)

Thanks for your interest in translating the documentation. As our docs are based on VuePress, we recommend to have a look at their docs about internationalization as well

感谢您对翻译文档的关注。由于我们的文档基于VuePress，因此我们建议您也查看一下有关国际化的文档

Here are the steps you will need to take:

这是您需要采取的步骤：

Clone this repository
克隆此存储库
Create a new branch
创建一个新分支
Browse to /docs/
浏览到/docs/
Create a folder with the language code you will add a translation for (eg /zh/)
使用您要添加翻译的语言代码创建一个文件夹(例如/zh/ )
Copy all *.md files and the folders api, faq, and guide to that folder
将所有*.md文件和文件夹api ， faq和guide复制到该文件夹
Translate the copied files in your language folder
翻译您的语言文件夹中的复制文件
Edit .vuepress/config.yml and add a config section for your locale in both locales as themeConfig.locales
编辑.vuepress/config.yml并在两个locales环境中为您的语言环境添加配置部分作为themeConfig.locales
Test your translation by running the docs dev server with yarn docs
通过使用yarn docs运行docs dev服务器来测试翻译
Create a pull request with your changes
使用您的更改创建请求请求
Receive eternal gratefulness from your fellow language speakers :heart:
收到来自您的母语使用者的永恒感激：心：

翻译自: https://vuejsexamples.com/manage-html-metadata-in-vue-js-components-with-ssr-support/

vue ssr 没有数据

cuk5340

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue ssr 没有数据_通过SSR支持管理Vue.js组件中HTML元数据

vue ssr 没有数据维达 (vue-meta)Manage HTML metadata in Vue.js components with SSR support. 通过SSR支持管理Vue.js组件中HTML元数据。 View Demo查看演示 View Github 查看Github <template> ...</template><s...
复制链接

扫一扫