ant-design-vue配置中文

依賴包引入的方式(node安裝的antd)

一、映入antd中文包並傳給a-config-provider(此時組件已經都是中文了,第二步是爲了moment的中文化,方便moment的使用)
二、將moment配置成中文(安裝antd默認會給你安裝moment不須要從新安裝)css

//App.vue
<template>
  <a-config-provider :locale="locale">
    <div>
      <a-date-picker/>
      <a-select style="width:150px"></a-select>
    </div>
  </a-config-provider>
</template>
<script>
import zhCN from 'ant-design-vue/es/locale/zh_CN';//引入antd中文包
import moment from 'moment';//引入moment 
moment.locale('zh-cn');//配置moment中文環境
export default {
  data(){
    return{
      locale:zhCN,//傳值給a-config-provider組件
      date:""
    }
  }
}
</script>

外部引入antd的方式(經過externals 外部引入的方式)

//webpack.config.js
module.exports = {
//...
  configureWebpack: {
    externals : {
      vue: 'Vue',
      antd: 'antd'
    }
  }
}

inde.html引入外部文件
antd語言包:antd-with-locales.min.js(能夠在node_modules\ant-design-vue\dist中找到)html

<link rel="stylesheet" href="./antd.min.css"></link>
<script src="./vue.min.js"></script>
<script src="./antd.min.js"></script>
<script src="./moment.min.js"></script>
<script src="./antd-with-locales.min.js"></script>//antd語言包,綁定到antd.locales屬性上
<script src="./zh-cn.js"></script>//moment.js中文包

入口(App.vue)中配置a-config-providervue

//App.vue
<template>
  <a-config-provider :locale="zh_CN">
    <div>
      <a-date-picker/>
      <a-select style="width:150px"></a-select>
    </div>
  </a-config-provider>
</template>
<script>

export default {
  data(){
    return{
      zh_CN:antd.locales.zh_CN//使用中文包
    }
  }
}
</script>
相關文章
相關標籤/搜索