Beispiel für das Hinzufügen einer Mehrsprachenfunktion zur Vue-Hintergrundverwaltung

importiere VueI18n von „vue-i18n“
Vue.use(VueI18n) // Als Plug-in einbinden const i18n = new VueI18n({
    //locale: 'zh-CN', // Sprachkennung locale: 'Chinese', // Sprachkennung //this.$i18n.locale // Sprachumschaltung durch Umschalten des Wertes von Locale-Nachrichten: {
      „Chinesisch“: require(„./common/lang/zh“), // Chinesisches Sprachpaket „Englisch“: require(„./common/lang/en“) // Englisches Sprachpaket},
    //Warnung ausblenden silentTranslationWarn: true
})

neuer Vue({
  el: '#app',
  Router,
  ich18n,
  Komponenten: { App },
  Vorlage: '<App/>'
})

de.js
exportiere const m = { 
    deviceCode: 'Gerätecode', //Gerätecode deviceName: 'Gerätename', //Gerätename deviceType: 'Gerätetyp', //Gerätetyp denial: 'Denial', //Deny camera: 'Kamera', //Kamera} 

zh.js
exportiere const m = {
  deviceCode: 'Gerätecode', //Gerätecode deviceName: 'Gerätename', //Gerätename deviceType: 'Gerätetyp', //Gerätetyp denial: 'Ablehnen', //Ablehnen camera: 'Kamera', //Kamera}

(1) So schreiben Sie Platzhalter und Schaltflächen <el-row :gutter="30">
    <el-col :span="4">
        <div Klasse="Rasterinhalt bg-lila">
              <el-input v-model="Wert0" :Platzhalter="$t('m.placeOne')"></el-input>
         </div>
     </el-col>
      <el-col :span="8">
         <div Klasse="Rasterinhalt bg-lila">
              <el-button @click="searchData()" type="primary" icon="el-icon-search">{{ $t('m.query') }}</el-button> 
              <el-button @click="dialogVisible = true" type="warning">{{ $t('m.AddDevice') }}</el-button>
          </div>
    </el-col>
</el-row> (2) Wie schreibt man die Tabelle <el-table
    :data="Tabellendaten"
     Streifen
   Stil="Breite: 100%;">
         <el-table-column
              prop="Bereichsname"
              :label="$t('m.areaName')"
              Breite="100">
          </el-Tabellenspalte>
</el-Tabelle>

(3) Methode zum Schreiben von Popup-Fenstern für Unterkomponenten <el-dialog :title="$t('m.Ediedevice')" :visible.sync="dialogVisibles" width="30%" :before-close="handleClose" :close-on-click-modal=false>
     <edit-equipment @subsuccess="subsuccess" :editDate="editDate" style="overflow: hidden;"></edit-equipment>
 </el-dialog>
(4) Zeichenkettenverkettung in js: strHtml = strHtml + "<td>"+this.$i18n.t('m.deviceCode')+"：</td>";