关于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'@Componentexport default class Header extends Vue {}</script><style> @import './navigation.css';</style>

运行测试，一切正常。

早安，北京。

p.s.如果你也是个老手能够去npm搜寻nuxt-property-decorator、vue-class-component。