Vue internationalization and skin change

internationalization

  1. Install internationalization dependencies
npm i vue-i18n --save
Copy the code
  1. main.js zh.js en.js
// main.js
import Vue from 'vue'
import App from './App.vue'

import zh from './i18n/zh'
import en from './i18n/en'

import VueI18n from 'vue-i18n';
Vue.use(VueI18n) // Mount through plug-ins
const i18n = new VueI18n({
  locale: 'zh'.$i18n.locale locale locale locale locale locale locale locale locale locale locale locale locale locale locale locale
  messages: {'zh': {... zh},'en': {... en} } });new Vue({
  i18n,
  render: h= > h(App),
}).$mount('#app')

Copy the code
// zh.js
export default {
    lg: {
        name: "Paul"}}Copy the code
// en.js
export default {
    lg: {
        name: "baoluo"}}Copy the code
  1. App.vue
<template>
  <div class="hello">
    <button @click="changTheme">Switch internationalization</button>
    <p>
      {{ $t("lg").name }}
    </p>
  </div>
</template>

<script>
export default {
  name: 'App'.methods: {
    changTheme() {
      this.$i18n.locale =  this.$i18n.locale === "zh" ? "en" : "zh"}}}</script>
Copy the code

In the skin

Global style file, where all colors should be written, in the form of variables

  1. root.css
:root[theme="Black"] {
    --defalut-color: white
}

:root[theme="White"] {
    --defalut-color: black
}
Copy the code
  1. main.js
import Vue from 'vue'
import App from './App.vue'

import "./theme/root.css"

new Vue({
  render: h= > h(App),
}).$mount('#app')
Copy the code
  1. App.vue
<template>
  <div class="hello">
    <select v-model="theme" @change="changeTheme">
      <option value="White">white</option>
      <option value="Black">black</option>
    </select>
    <p style="color: var(--defalut-color);">Skinning operation</p>
  </div>
</template>

<script>
export default {
  name: 'App'.created() {
    document.documentElement.setAttribute("theme"."Black");
  },
  methods: {
    changeTheme() {
      console.log(this.theme);
      document.documentElement.setAttribute("theme".this.theme); }}}</script>
Copy the code