搭建antd+vue中簡體，中繁體，英文，日語多語言後臺管理系統

十年河東，十年河西，莫欺少年窮

學無止境，精益求精

1、官方教程

參考：https://iczer.gitee.io/vue-antd-admin-docs/start/use.html

 

 針對clone失敗，我們需要這樣做

1.1、配置你的hosts文件

https://zhuanlan.zhihu.com/p/93436925

按照知乎教程配置後，訪問github速度大幅度提升。

1.2、通過網頁下載VUE源碼

打開：https://github.com/iczer/vue-antd-admin/tree/basic

注意：這裏選擇的是基礎版

如果您想選擇master版本或其他，則打開 https://github.com/iczer/vue-antd-admin

 

 本篇教程以basic基礎版本爲例

下載完成後，解壓，按照教程，安裝依賴

 

 安裝完成後，運行項目

npm run serve

2、語言配置

2.1創建商家管理頁面及配置

用VSCode打開項目，新建文件夾Group，並添加GroupLists.vue

GroupLists.vue代碼

<template>
    <div class="new-page" :style="`min-height: ${pageMinHeight}px`">
      <h1>{{$t('content')}}</h1>
    </div>
  </template>
  
  <script>
    import {mapState} from 'vuex'
    export default {
      name: 'GroupLists',
      i18n: require('./i18n'),
      data() {
        return {
        }
      },
      computed: {
        ...mapState('setting', ['pageMinHeight']),
        desc() {
          return this.$t('description')
        }
      }
    }
  </script>
  
  <style scoped lang="less">
  @import "index";
  </style>

繼續添加 i18n.js

i18n.js代碼如下

module.exports = {
  messages: {
    CN: {
      content: '商家管理',
      description: '這是一個商家管理'
    },
    HK: {
      content: '啇傢涫理',
      description: '這是一個啇傢涫理'
    },
    US: {
      content: 'This is a Group',
      description: 'This is a Group'
    },
    JP: {
      content: 'マーチャント管理',
      description: 'マーチャント管理'
    }
  }
}

繼續添加 index.js 

index.js 代碼如下

import GroupLists from '../Group/GroupLists.vue'
export default GroupLists

繼續添加 index.less

index.less代碼如下：

.new-page{
  height: 100%;
  background-color: @base-bg-color;
  text-align: center;
  padding: 200px 0 0 0;
  border-radius: 4px;
  //margin-top: -24px;
  h1{
    font-size: 48px;
  }
}

總之

 

 2.2、新增日語

打開src\layouts\header\AdminHeader.vue 

新增日語

{key: 'JP', name: 'Japanese', alias: 'Japanese'}

2.3、完全覆蓋你的路由配置

打開src\router\config.js 

覆蓋路由信息爲：

import TabsView from '@/layouts/tabs/TabsView'
import BlankView from '@/layouts/BlankView' 
// import PageView from '@/layouts/PageView' 

// 路由配置
const options = {
  routes: [
    {
      path: '/login',
      name: '登錄頁',
      component: () => import('@/pages/login')
    },
    {
      path: '/',
      name: '首頁',
      component: TabsView,
      redirect: '/login',
      children: [
        {
          path: 'group',
          name: '商家管理',
          meta: {
            icon: 'dashboard',
          },
          component: BlankView,
          children: [
            {
              path: 'GroupLists',
               meta: {
                icon: 'dashboard',
              },
              name: '商家列表',
              component: () => import('@/pages/Group/GroupLists'),
            }
          ]
        },
        
      ]
    }
  ]
}

export default options

覆蓋後，就只有一個商家管理父菜單及一個商家列表子菜單

 

 2.4、配置多語言

打開src\router\i18n.js

i18n.js 代碼如下

module.exports = {
  messages: {
    CN: {
      home: { name: '首頁' },
      group: {
        name: '商家管理',
        GroupLists: { name: '商家列表' },
      },
    },
    US: {
      home: { name: 'home' },
      group: {
        name: 'groups',
        GroupLists: { name: 'grouplists' },
      },
    },
    HK: {
      home: { name: '首頁' },
      group: {
        name: '啇傢涫理',
        GroupLists: { name: '啇傢列表' },
      },
    }, 
    JP: {
      home: { name: '日本語首頁，我就不百度了' },
      group: {
        name: 'マーチャント管理',
        GroupLists: { name: 'ビジネス リスティング' },
      },
    },
  }
}

效果演示：

 

 

 

 

 

 

 源碼下載：https://pan.baidu.com/s/1upE4HdxAE2a84LLXnNRE-w

提取碼：5858

 @天才臥龍的博科人