ant-design配置部分
1. 实现ant-disign-vue的按需加载方案
(1)引入所有的组件,然后加载到vue上面 components-ant
(2)对Ant Design Vue进行文件声明处理
// @/types/index.d.ts
declare module 'ant-design-vue' {
const Ant: any
export default Ant;
}
2. 安装拆安处理ant-design-vue
(1)安装插件
npm i babel-plugin-import --dev
(2)进行设置
plugins: [
[ "import", {
"libraryName": "ant-design-vue",
"libraryDirectory": "es",
"style": "css"
} ]
]
3. 修改主题
(1)参考 vue.config.js
css: {
/* less 变量覆盖,用于自定义 ant design 主题 */
loaderOptions: {
less: {
// modifyVars: {
// 'primary-color': '#1DA57A',
// 'link-color': '#1DA57A',
// 'border-radius-base': '2px',
// },
javascriptEnabled: true
}
}
}
4. ant-Design-vue 将组件默认的英文修改为中文
(1)在app.vue中进行设置
<a-locale-provider :locale="locale">
<div id="app">
...
</div>
</a-locale-provider>
<script>
import zhCN from 'ant-design-vue/lib/locale-provider/zh_CN'
export default class Home extends Vue {
locale = zhCN
}
</script>
5. 表单通过submit提交的时候,事件处理函数必须显示阻止默认行为
handleSubmitByMesssage (e:any) {
e.preventDefault();
...
}
项目
1. 替换favicon.ico
(1)设置vue.config.js
pwa: {
iconPaths: {
favicon32: 'favicon.ico',
favicon16: 'favicon.ico',
appleTouchIcon: 'favicon.ico',
maskIcon: 'favicon.ico',
msTileImage: 'favicon.ico'
}
}
2. 图片懒加载
只有列表的图片才使用懒加载,用户的头像信息不能使用懒加载。
bug部分
1. 使用forEach、map的时候报错 has an 'any' type
解决方法:为参数添加声明any
arr.map((item: any) => {
});
2. 使用filters
必须将filters放到component 里面
3. 使用表单
必须在组件里面设置,会出现红色警告,但是运行的时候不会报错
beforeCreate () {
this.form = this.$form.createForm(this);
}
4. 修改触发验证的方式
{
validateTrigger: [ 'blur'],
rules: [{ validator: validatorPhone}] }
5. 读取表单的值的时候只能通过下面的方式
{
this.form.getFieldValue('password')
}
6. 使用 vue-social-share
(1)在main.js中
import Share from 'vue-social-share'
Vue.use(Share)
(2)在组件中直接使用
<share :config="config" v-if="showShare"></share>
首选设置showShare为false,当config设置完成以后,设置showShare为true
兼容ie部分
1. SCRIPT1003: 缺少 ':'
- 找到对应的包,将包的install方法改成key:value类型
参考地址
install (Vue, options) {
Vue.component('vue-particles', particles)
}
===>
install: function(Vue, options) {
Vue.component('vue-particles', particles)
}
在使用antd的时候,ie浏览器不支持以svg的形式导入icon,可以用一张小图片代替
ie浏览器,进行时间处理的时候必须把-换成/,否则计算出来的结果就是NaN
time = timeProp.replace(/-/g, '/');