一、映入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>
//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>