vue-cli4.0引入官方文档Layout示例过程(按需引入)

最新推荐文章于 2024-03-29 17:25:41 发布

LitStronger

最新推荐文章于 2024-03-29 17:25:41 发布

阅读量3.5k

点赞数 2

分类专栏： ant-design-vue vue 文章标签： vue js

本文链接：https://blog.youkuaiyun.com/weixin_43641850/article/details/108301690

版权

本文档介绍了在Vue CLI4.0环境下，如何按需引入并解决引入官方Layout组件时遇到的报错问题。通过局部注册和全局注册两种方式详细讲解，包括在App.vue中引入组件和在main.js中全局注册组件的步骤，帮助开发者避免“Unknown custom element”等错误。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

写在前面：建议在了解了如何按需引入一个简单的按钮后再看本篇。

常见报错

[Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the “name” option.
[Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the “name” option.
[Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the “name” option.
[Vue warn]: Error in render: “TypeError: Cannot read property ‘propsData’ of undefined”
TypeError: Cannot read property ‘propsData’ of undefined
…and so on…就不一一列举了

踩完坑后可以确定的是，上面的错误都是因为组件没有正确引入、注册引起的。

直接上代码（包括局部注册和全局注册两种方式），引入antd官方文档的一个例子，如下图
在这里插入图片描述

1.局部注册

我是在App.vue里直接改的。

先将官方示例代码<a-layout> ... </a-layout>部分copy到我们的<div id="app"></div>内
然后再把css样式复制到末尾。这时候你可以看一下浏览器控制台，会有一堆报错，告诉你好多东西没有引入/注册
因此，最后要做是引入组件、注册组件

<template>
  <div id="app">
    <a-layout id="components-layout-demo-top-side">
        <a-layout-header class="header">
        <div class="logo" />
        <a-menu
            theme="dark"
            mode="horizontal"
            :default-selected-keys="['2']"
            :style="{ lineHeight: '64px' }"
        >
            <a-menu-item key="1">
            nav 1
            </a-menu-item>
            <a-menu-item key="2">
            nav 2
            </a-menu-item>
            <a-menu-item key="3">
            nav 3
            </a-menu-item>
        </a-menu>
        </a-layout-header>
        <a-layout-content style="padding: 0 50px">
        <a-breadcrumb style="margin: 16px 0">
            <a-breadcrumb-item>Home</a-breadcrumb-item>
            <a-breadcrumb-item>List</a-breadcrumb-item>
            <a-breadcrumb-item>App</a-breadcrumb-item>
        </a-breadcrumb>
        <a-layout style="padding: 24px 0; background: #fff">
            <a-layout-sider width="200" style="background: #fff">
            <a-menu
                mode="inline"
                :default-selected-keys="['1']"
                :default-open-keys="['sub1']"
                style="height: 100%"
            >
                <a-sub-menu key="sub1">
                <span slot="title"><a-icon type="user" />subnav 1</span>
                <a-menu-item key="1">
                    option1
                </a-menu-item>
                <a-menu-item key="2">
                    option2
                </a-menu-item

最低0.47元/天解锁文章