关于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。