vue.js引入多个组件_一个适用于230多个国家/地区的Vue.js易于使用的标志组件

vue.js引入多个组件

旗帜 (vueflags)

One easy-to-use flag component for Vue.js with 230+ countries.

一个适用于230个以上国家/地区的Vue.js易于使用的标志组件。

View demo 查看演示 View Github 查看Github

安装 (Installation)

npm install @growthbunker/vueflags

# Or if you prefer using yarn
yarn add @growthbunker/vueflags

Vue.js (Vue.js)

In your main.js file:

在您的main.js文件中：

import Vue from "vue"
import VueFlags from "@growthbunker/vueflags"

Vue.use(VueFlags)

Nuxt.js (Nuxt.js)

Create a new plugin in plugins/vueflags.js:

在plugins/vueflags.js创建一个新插件：

import Vue from "vue"
import VueFlags from "@growthbunker/vueflags"

Vue.use(VueFlags)

Add this new plugin to nuxt.config.js.

将此新插件添加到nuxt.config.js 。

module.exports = {
  // ...
  plugins: [{ src: "@/plugins/vueflags.js" }];
}

CDN (CDN)

Get the latest version from jsdelivr, and import the JavaScript file in your page.

从jsdelivr获取最新版本，并将JavaScript文件导入页面中。

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vueflags.min.js"></script>

We recommend our users to lock Vue Flags's version when using CDN. Requesting the latest version (as opposed to "latest major" or "latest minor") is dangerous because major versions usually come with breaking changes. Only do this if you really know what you are doing. Please refer to jsdelivr.com for more information.

我们建议用户在使用CDN时锁定Vue Flags的版本。 要求最新版本(而不是“最新的主要版本”或“最新的次要版本”)很危险，因为主要版本通常带有重大更改。 仅当您真正知道自己在做什么时才这样做。 有关更多信息， 请访问jsdelivr.com 。

图示 (Icons)

All the flags are available here. Copy them somewhere in your somewhere in your "public" or "static" folder. You will also have to set the icon path for the component to be able to find them (see package options and component props).

所有标志都在这里可用 。 将它们复制到“公共”或“静态”文件夹中的某个位置。 您还必须设置组件的图标路径，以便能够找到它们(请参阅软件包选项和组件属性)。

A huge thank you to the author for designing these flags.

非常感谢作者设计这些标志 。

例 (Example)

Once the plugin is installed, you can use the component like this:

安装插件后，您可以使用以下组件：

<template>
  <gb-flag code="fr" size="small" />
</template>

翻译自: https://vuejsexamples.com/one-easy-to-use-flag-component-for-vue-js-with-230-countries/

vue.js引入多个组件