nuxt.js + typescript + ant-design-vu class语法开发

小记

环境 nuxt.js + typescript + ant-design-vue
文章分类：next入门、nuxt如何使用class语法、vue2+ts开发nuxt项目

文件1：
pages/expriment.vue

<template>
 <div>
 hello World !
 <nzDemandLayer />
 </div>
</template>
<script lang="ts">
import { Component, Vue, State, Action, } from "nuxt-property-decorator";
import { DatePicker } from "ant-design-vue";
import nzHeader from "~/components/nz-header";
import nzDemandLayer from "~/components/nz-demand-layer";
@Component({
 components: {
 nzDemandLayer,
 nzHeader
 },
})
export default class Expriment extends Vue {
 onChange(date:any, dateString:any) {
 console.log(date, dateString);
 }
}
</script>

文件2：
components/nz-header.vue  

<template>
 <div id="topaaa"> header
 </div>
</template>
<script lang="ts">
import { Component, Vue, State, Action, } from "nuxt-property-decorator";
export default class Header extends Vue {
}
</script>
<style>
 @import './navigation.css';
</style>

可以看到，我只是在 expriment 页面里注册了组件就导致了 ant-design 的DatePicker组件不可用。

就是：

而我预期的效果：

我刚开始怀疑是ant-ui 没在nuxt 中配置正确。因为我也第一次用nuxt。

后来以为是其他组件干扰了 ant-ui。

后来想起来之前测试 components/nz-header.vue 的 asyncData Hook 也就是回调，不起作用。

得，可以归类为不熟悉nuxt导致的问题了。

修改 components/nz-header.vue 如下

<template>
<div class="nav-top">
  hi
 </div>
</template>
<script lang="ts">
import Vue from 'vue'
import Component from 'vue-class-component'
@Component
export default class Header extends Vue {
}
</script>
<style>
 @import './navigation.css';
</style>

运行测试，一切正常。

早安，北京。

p.s.如果你是个新手可以去npm搜索nuxt-property-decorator、vue-class-component。