关于nuxt.js:nuxt-如何使用

小记

环境 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。