• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

vue-cli3+ant-design-vue+typescript注意事项

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

项目参考vue-cli3-web-init

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 >
      ...
    </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: 缺少 ':'

  1. 找到对应的包,将包的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, '/');

鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
一些好用的javascript/typescript方法封装分享发布时间:2022-07-18
下一篇:
TypeScript之Https通信发布时间:2022-07-18
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap