Heim > Web-Frontend > js-Tutorial > Hauptteil

Installations- und Verwendungs-Tutorial für die Internationalisierung des Vue-Projekts vue-i18n

亚连
Freigeben: 2018-05-30 11:57:35
Original
2489 Leute haben es durchsucht

Kürzlich kam ich mit dem Erlernen des Vue.js-Frameworks in Kombination mit dem Element-UI-Komponentenentwicklungsprojekt in Kontakt. Aufgrund der jüngsten Notwendigkeit, Internationalisierungsfunktionen zu implementieren, werden im folgenden Artikel hauptsächlich die relevanten Informationen zur Verwendung von vue-i18n für die Internationalisierung von Vue-Projekten vorgestellt. Freunde, die sie benötigen, können darauf verweisen .

Vorwort

Das Projekt muss mehrere Sprachen unterstützen. Wir müssen den im Projekt verwendeten statischen Text extrahieren und Sprachpakete zur Verwaltung verwenden Beim Umschalten der Sprache kann die Textanzeige des gesamten Projekts automatisch umgeschaltet werden.

Ich habe festgestellt, dass es im Vue-Projekt eine entsprechende Komponente vue-i18n gibt, die den Projektcode nicht wesentlich geändert hat, daher habe ich diese Komponente verwendet, um den Code im Projekt zu ändern. Im Folgenden gibt es nicht viel zu sagen. Werfen wir einen Blick auf die ausführliche Einführung.

Installation

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

// npm 安装
npm install vue-i18n

// yarn 安装
yarn add vue-i18n
Nach dem Login kopieren

Im Allgemeinen wird die Installation in einem Projekt verwendet wird als Paket ausgeführt und das Skript wird weniger eingeführt.

Verwenden Sie

, um i18n im Projekt zu konfigurieren

import VueI18n from &#39;vue-i18n&#39;
Vue.use(VueI18n)

const i18n = new VueI18n({
  local: &#39;cn&#39;, // 设置语言 
  messages // 语言包
})

new Vue({
  el: &#39;#app&#39;,
  ...
  i18n
})

// messages 大概的使用格式
{
  cn: {
    name: &#39;名字&#39;
  },
  us: {
    name: &#39;Name&#39;
  }
}
Nach dem Login kopieren

Verwenden Sie i18n

// html 需要使用 {{}} 将 name包装起来
{{$t(&#39;name&#39;)}}

// js
$t(&#39;name&#39;)
Nach dem Login kopieren

Es gibt einige andere Verwendungen, wie zum Beispiel:

  • für verschiedene Sprachen zeigen unterschiedliche Formate an

  • Wenn Sie benutzerdefinierte Variablen übergeben, um die Anzeige zu steuern

  • ... Bitte beachten Sie die Einzelheiten finden Sie in der offiziellen Dokumentation.

Um die Sprache zu wechseln, können Sie integrierte Variablen verwenden:

// 通过设置 locale 来切换语言
this.$i18n.locale = cn | us
Nach dem Login kopieren

Generation des Sprachpakets & Ersetzen des ursprünglichen statischen Textes im Projekt

Dieser Schritt ist der wichtigste. Extrahieren Sie alle angezeigten chinesischen Zeichen und ersetzen Sie sie durch $t('xxx'. ), um mehrere Versionen zu verwalten. So wird mit der Sprachdatei

Sprachpaket

--languages
  --lib
    -- cn.js // 中文语言包
    -- us.js // 英文语言包
    -- .. // 其他语言,暂未实践
  -- index.js // 导出语言包
Nach dem Login kopieren

cn.js< umgegangen 🎜> wird unter dem Projekt

export default {
  common: {
    message: &#39;消息&#39;
  },
  xxx: {
  }
}
Nach dem Login kopieren

us.js

export default {
  common: {
    message: &#39;Messages&#39;
  },
  xxx: {
  }
}
Nach dem Login kopieren

index.js< hinzugefügt 🎜>

import cn from &#39;./lib/cn.js&#39;
export default {
  cn,
  us
}
Nach dem Login kopieren

Ersatztext

<template>
  ...
  <p>{{$t(&#39;message&#39;)}}</p>
  ...
</template>
Nach dem Login kopieren

Das Obige habe ich hoffentlich für alle zusammengestellt Es wird in Zukunft für alle hilfreich sein.

Verwandte Artikel:

JS implementiert die Funktion zum Verschieben der linken Liste in die rechte Liste


Verwendung des EL-Ausdrucks in JS zum Abrufen von Methoden für Kontextparameterwerte


jQuery-Methode zum automatischen Hinzufügen von Auslassungspunkten, wenn der Text 1 Zeile, 2 Zeilen oder eine bestimmte Anzahl von Zeilen überschreitet


Das obige ist der detaillierte Inhalt vonInstallations- und Verwendungs-Tutorial für die Internationalisierung des Vue-Projekts vue-i18n. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage