依赖包引入的方式(node安装的antd)
1、映入antd中文包并传给a-config-provider(此时组件已经都是中文了,第二步是为了moment的中文化,方便moment的使用)
2、将moment配置成中文(安装antd默认会给你安装moment不需要重新安装)
//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中找到)
<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-provider
//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>
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。