1. Use babel-plugin-import #

Babel-plugin-import is a Babel plug-in for loading component code and styles on demand.

2. Modify the babel.config.js file and configure babel-plugin-import

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

And introduce the module in the following format.

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");
Copy the code

3. Repeat the preceding steps to import an error about the less-loader

The solution: 1

Also need to introduce “less”,”less-loader” two JS libraries; Add a js sentence to node_modules\less-loader\dist\index.js

options.javascriptEnabled = true
Copy the code
Solution: 2

Create vue.config.js in the root directory:

Module. exports = {// configure less CSS: {loaderOptions: {less: {javascriptEnabled: true,}}},}Copy the code

Start writing code

1.zhuanlan.zhihu.com/p/99343202

Type string trivially is 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>
Copy the code

Solution: Vue.config.js

module.exports = {
  lintOnSave: false,
}
Copy the code

3. Switch to display different routes on the same page

Route writing:

{
    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')
      },
    ]
  }
Copy the code

Page style:

<router-link class=" TAB ":class="$route.name=='Classroom'?'nowTab':' to="/learningCenter" > <router-link class=" TAB ":class="$route.name=='Exercise'?'nowTab':'" to="/learningCenter/ Exercise "> </router-link>Copy the code

4. An error is reported when the ant-design-vue internationalization setting is introduced

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

Solution:

Components-ant. Ts (where antD is loaded on demand) is added and written using: ConfigProvider Shims-vue.d.ts

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

App. Vue web page

<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>
Copy the code

5. An error message is displayed when the current page is displayed

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

Solution:

Add the route to the index.ts file

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

6. Eslint tip: Property ‘catch’ does not exist on type ‘void’ ts(2339)

Cause: Type not declared

Solution:

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

7. The run – time error occurs

Solution:

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

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,

Solution:

Add key to data of table

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

8.@watch

9. The anchor

(document.querySelector(idname) as Element).scrollIntoView(true);
Copy the code

10.www.cnblogs.com/guojikun/p/…