Vue-cli3 + ts +ant-design-vue总结babel-plugin-import 是一个用于按需加载

1.使用 babel-plugin-import #

babel-plugin-import 是一个用于按需加载组件代码和样式的 babel 插件。

2.修改babel.config.js文件，配置 babel-plugin-import

module.exports = {
 presets: ["@vue/app"],
+  plugins: [
+    [
+      "import",
+      { libraryName: "ant-design-vue", libraryDirectory: "es", style: true }
+    ]
+  ]};

并且按下面的格式引入模块。

import Vue from 'vue'
- import Button from 'ant-design-vue/lib/button';
+ import { Button } from 'ant-design-vue';
- import 'ant-design-vue/dist/antd.css'  
import App from './App'  
Vue.component(Button.name, Button)  
Vue.config.productionTip = false  
new Vue({
    render: h => h(App)
  }).$mount("#app");

3.按照如上引入报错关于less-loader

解决办法：1

还需引入 "less","less-loader" 两个js库；并且还需在node_modules\less-loader\dist\index.js文件中添加一句js

options.javascriptEnabled = true

解决办法：2

在根目录下新建vue.config.js：

module.exports = {
    // 配置less
    css: {
        loaderOptions: {
            less: {
                javascriptEnabled: true,
            }        
        }
    },
}

开始写代码

1.ts写法参考：zhuanlan.zhihu.com/p/99343202

2.如下写法报错：Type string trivially inferred from a string literal, remove type annotation

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
@Component
export default class Login extends Vue {
  userName: string = "";
  password: string = "";
}
</script>

解决：vue.config.js中加人：

module.exports = {
  lintOnSave: false,
}

3.在同一个页面上切换不同路由展示不同

路由写法：

{
    path: '/learningCenter',
    name: 'LearningCenter',
    component: () => import('@/views/learningCenter/LearningCenter.vue'),
    children: [
      {
        path: '',
        name: 'Classroom',
        component: () => import('@/views/learningCenter/Classroom.vue')
      },
      {
        path: 'exercise',
        name: 'Exercise',
        component: () => import('@/views/learningCenter/Exercise.vue')
      },
    ]
  }

页面写法：

<router-link
   class="tab"
   :class="$route.name=='Classroom'?'nowTab':''"
   to="/learningCenter"
   >班课</router-link>
<router-link
   class="tab"
   :class="$route.name=='Exercise'?'nowTab':''"
   to="/learningCenter/exercise"
   >练习</router-link>

4.引入ant-design-vue 国际化设置报错

Warning: [antdv: LocaleProvider] LocaleProvider is deprecated. Please use locale with ConfigProvider instead

解决：

Components-ant.ts(按需加载antd的地方)加入并使用：ConfigProvider Shims-vue.d.ts 写入

declare module 'ant-design-vue/es/locale/zh_CN' {
  const Ant: any
  export default Ant;
}

app.vue 页面

<template>
  <a-config-provider :locale="locale">
    <div id="app" class="flex flex_column"></div>
  </a-config-provider>
</template>
<script lang="ts">
import zhCN from "ant-design-vue/es/locale/zh_CN";
import moment from "moment";
import "moment/locale/zh-cn";
import { Component, Vue } from "vue-property-decorator";

moment.locale("zh-cn");
@Component
export default class App extends Vue {
  locale = zhCN;
}
</script>

5.在当前页面跳转到本页面报错

Uncaught (in promise) Error: Avoided redundant navigation to current location: "/learningCenter"

解决：

在路由的index.ts文件上添加

const originalPush = VueRouter.prototype.push
VueRouter.prototype.push = function push(location: string) {
  return originalPush.call(this, location).catch((err: any) => err)
}

6.eslint提示：类型“void”上不存在属性“catch”。ts(2339)

原因：未声明类型

解决：

const originalPush: any = VueRouter.prototype.push
VueRouter.prototype.push = function push(location: string) {
  return originalPush.call(this, location).catch((err: any) => err)
}

7.run-time报错

解决：

// vue.config.js
module.exports = {
runtimeCompiler: true,
}

8. Warning: Each record in table should have a unique `key` prop,or set `rowKey` to an unique primary key.

Warning: Each record in dataSource of table should have a unique `key` prop, or set `rowKey` of Table to an unique primary key,

解决：

给table的data加上key

res.testpaper_quote_vos.map((i: any) => {
          i.key = i.testpaper_id;
 });
 this.data = res.testpaper_quote_vos;

8.@watch

9.锚点

(document.querySelector(idname) as Element).scrollIntoView(true);

Vue-cli3 + ts +ant-design-vue总结