搭建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

 @天才卧龙的博科人