【Ant Design of Vue】开发环境搭建

Bertha 。 2022-12-29 06:38 46阅读 0赞

### 文章目录 ###

*  1、Ant Design of Vue 使用教程
 *   *   *  （1）本地构建项目源码
         *  （2）设置全局默认语言为中文
 *  微信公众号

# 1、Ant Design of Vue 使用教程 #

### （1）本地构建项目源码 ###

拉取项目代码

git clone https://github.com/vueComponent/ant-design-vue-pro.git
    cd ant-design-vue-pro

安装依赖

yarn install

开发模式运行

yarn run serve

编译项目

yarn run build

Lints and fixes files

yarn run lint

### （2）设置全局默认语言为中文 ###

修改`src/locales/index.js`文件，设置默认语言

// default lang
    // import enUS from './lang/en-US'
    import zhCN from './lang/zh-CN' // 默认语言由英文改为中文
    
    Vue.use(VueI18n)
    
    // export const defaultLang = 'en-US'
    export const defaultLang = 'zh-CN'
    
    const messages = { 
      // 'en-US': { 
      // ...enUS
      // }
      'zh-CN': { 
        ...zhCN
      }
    }

修改`src/core/bootstrap.js`文件，设置初始化语言

// store.dispatch('setLang', storage.get(APP_LANGUAGE, 'en-US'))
      store.dispatch('setLang', storage.get(APP_LANGUAGE, 'zh-CN'))

修改`src/store/modules/app.js`文件，设置lang属性

// lang: 'en-US',
        lang: 'zh-CN',

修改完成之后，发现侧边栏显示的是类似`app.setting.pagestyle`的模样，创建`src/locales/lang/zh-CN/setting.js`，因为英文的这里有这个配置文件，中文的没有，所以手动添加一个，文件内容就是翻译成中文的

export default { 
        'app.setting.pagestyle': '主题风格设置',
        'app.setting.pagestyle.light': '白色',
        'app.setting.pagestyle.dark': '黑色',
        'app.setting.pagestyle.realdark': '全黑',
        'app.setting.themecolor': '主题颜色',
        'app.setting.navigationmode': '导航模式',
        'app.setting.content-width': '内容宽度',
        'app.setting.fixedheader': '固定头部',
        'app.setting.fixedsidebar': '固定侧边',
        'app.setting.sidemenu': '侧菜单布局',
        'app.setting.topmenu': '顶菜单布局',
        'app.setting.content-width.fixed': '固定',
        'app.setting.content-width.fluid': '滚动',
        'app.setting.othersettings': '其他设置',
        'app.setting.weakmode': '夜间模式',
        'app.setting.copy': '复制设置',
        'app.setting.loading': '加载主题',
        'app.setting.copyinfo': '复制成功，请替换src/models/ settings .js中的默认设置',
        'app.setting.production.hint': '设置面板只显示在开发环境中，请手动修改'
    
    }

重启项目，然后清空浏览器缓存，中文切换OK

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4NzYyMjM3_size_16_color_FFFFFF_t_70]

# 微信公众号 #

![每天Get一个小技巧][Get]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4NzYyMjM3_size_16_color_FFFFFF_t_70]: /images/20221120/dab05acd178945cdb36f6e5519281151.png
[Get]: https://img-blog.csdnimg.cn/20210317114147258.jpg#pic_center