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

标签: ant-design-vue  vue  js  

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

常见报错

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

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

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

1.局部注册

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

  1. 先将官方示例代码<a-layout> ... </a-layout>部分copy到我们的<div id="app"></div>
  2. 然后再把css样式复制到末尾。这时候你可以看一下浏览器控制台,会有一堆报错,告诉你好多东西没有引入/注册
  3. 因此,最后要做是引入组件、注册组件
<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>
                <a-menu-item key="3">
                    option3
                </a-menu-item>
                <a-menu-item key="4">
                    option4
                </a-menu-item>
                </a-sub-menu>
                <a-sub-menu key="sub2">
                <span slot="title"><a-icon type="laptop" />subnav 2</span>
                <a-menu-item key="5">
                    option5
                </a-menu-item>
                <a-menu-item key="6">
                    option6
                </a-menu-item>
                <a-menu-item key="7">
                    option7
                </a-menu-item>
                <a-menu-item key="8">
                    option8
                </a-menu-item>
                </a-sub-menu>
                <a-sub-menu key="sub3">
                <span slot="title"><a-icon type="notification" />subnav 3</span>
                <a-menu-item key="9">
                    option9
                </a-menu-item>
                <a-menu-item key="10">
                    option10
                </a-menu-item>
                <a-menu-item key="11">
                    option11
                </a-menu-item>
                <a-menu-item key="12">
                    option12
                </a-menu-item>
                </a-sub-menu>
            </a-menu>
            </a-layout-sider>
            <a-layout-content :style="{ padding: '0 24px', minHeight: '280px' }">
            Content
            </a-layout-content>
        </a-layout>
        </a-layout-content>
        <a-layout-footer style="text-align: center">
        Ant Design ©2018 Created by Ant UED
        </a-layout-footer>
    </a-layout>
  </div>
</template>

<script>

import { Layout, Icon, Menu, Breadcrumb } from 'ant-design-vue' // 引入 

export default {
  name: 'App',
  data() {
    return {
      collapsed: false,
    };
  },
  components:{          // 注册 
    AIcon: Icon,
    
    ALayout: Layout,
    ALayoutHeader: Layout.Header,   //子组件也要注册,这个地方对新手来说太坑了
    ALayoutSider: Layout.Sider,
    ALayoutContent: Layout.Content,
    ALayoutFooter: Layout.Footer,

    AMenu: Menu,
    ASubMenu: Menu.SubMenu,
    AMenuItem: Menu.Item,
    
    ABreadcrumb: Breadcrumb,
    ABreadcrumbItem: Breadcrumb.Item,
  }
}
</script>

<style>
#components-layout-demo-top-side .logo {
  width: 120px;
  height: 31px;
  background: rgba(255, 255, 255, 0.2);
  margin: 16px 28px 16px 0;
  float: left;
}
</style>

2.全局注册

main.js

import Vue from 'vue'
import App from './App.vue'

import { Layout, Icon, Menu, Breadcrumb } from 'ant-design-vue' // 引入 

Vue.component(Icon.name, Icon)        // 注册

Vue.component(Layout.name, Layout);
Vue.component(Layout.Header.name, Layout.Header);
Vue.component(Layout.Content.name, Layout.Content);
Vue.component(Layout.Footer.name, Layout.Footer);
Vue.component(Layout.Sider.name, Layout.Sider);

Vue.component(Menu.name, Menu);
Vue.component(Menu.SubMenu.name, Menu.SubMenu);
Vue.component(Menu.Item.name, Menu.Item);

Vue.component(Breadcrumb.name, Breadcrumb);
Vue.component(Breadcrumb.Item.name, Breadcrumb.Item)

Vue.config.productionTip = false;

new Vue({
  render: h => h(App),
}).$mount('#app')

App.vue

<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>
                <a-menu-item key="3">
                    option3
                </a-menu-item>
                <a-menu-item key="4">
                    option4
                </a-menu-item>
                </a-sub-menu>
                <a-sub-menu key="sub2">
                <span slot="title"><a-icon type="laptop" />subnav 2</span>
                <a-menu-item key="5">
                    option5
                </a-menu-item>
                <a-menu-item key="6">
                    option6
                </a-menu-item>
                <a-menu-item key="7">
                    option7
                </a-menu-item>
                <a-menu-item key="8">
                    option8
                </a-menu-item>
                </a-sub-menu>
                <a-sub-menu key="sub3">
                <span slot="title"><a-icon type="notification" />subnav 3</span>
                <a-menu-item key="9">
                    option9
                </a-menu-item>
                <a-menu-item key="10">
                    option10
                </a-menu-item>
                <a-menu-item key="11">
                    option11
                </a-menu-item>
                <a-menu-item key="12">
                    option12
                </a-menu-item>
                </a-sub-menu>
            </a-menu>
            </a-layout-sider>
            <a-layout-content :style="{ padding: '0 24px', minHeight: '280px' }">
            Content
            </a-layout-content>
        </a-layout>
        </a-layout-content>
        <a-layout-footer style="text-align: center">
        Ant Design ©2018 Created by Ant UED
        </a-layout-footer>
    </a-layout>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      collapsed: false,
    };
  },
}
</script>

<style>
#components-layout-demo-top-side .logo {
  width: 120px;
  height: 31px;
  background: rgba(255, 255, 255, 0.2);
  margin: 16px 28px 16px 0;
  float: left;
}
</style>

结果如下,一切正常
在这里插入图片描述
有点困了,遭不住。先这样吧。本片略过了常规的步骤,仅列出了一些要点。如果有什么疑惑,欢迎评论区提出

版权声明:本文为weixin_43641850原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_43641850/article/details/108301690

智能推荐

saas-export项目-AdminLTE介绍与入门

AdminLTE介绍 (1)AdminLTE是什么? AdminLTE是一款建立在bootstrap和jquery之上的开源的模板主题工具 (2)AdminLTE有什么特点? 提供一系列响应的、可重复使用的组件, 并内置了多个模板页面 自适应多种屏幕分辨率,兼容PC和移动端 快速的创建一个响应式的Html5网站 AdminLTE 不但美观, 而且可以免去写很大CSS与JS的工作量 AdminLTE...

MyBatis中ResultMap结果集映射

用于解决属性名和字段名不一致的情况: resultMap 元素是 MyBatis 中最重要最强大的元素。...

编写一个shell

编写shell的过程: 1.从标准输入中读入一个字符串。 2.解析字符串 3.创建一个子进程的执行程序。 4.子进程程序替换。 5.父进程等待子进程退出。...

WEB自动化测试中Xpath定位方法

前言: Xpath是在XML文档中查找信息的一种语言,使用路径表达式来选取XML文档中的节点或节点集,由于XML与HTML结构类似(前者用于传输数据,后者用于显示数据),所以Xpath也常用于查找HTML文档中的节点或节点集。 一  路径表达式: 路径以“/”开始     表示找到满足该绝对路径的元素; 路径以//”开始  ...

力扣困难难度 第4题 寻找两个正序数组的中位数

先看一眼题 我的思路: 设置下标i,j分别用于遍历两个数组,初始值均为0,直到找到两个数组中从小到大的第第length/2个数为止结束循环,length为两个数组长度之和。 ·每次比较nums[i]nums[j],如果前者小则i++,否则j++ ·循环结束时,如果count已经达到length/2,则说明已经找到了中位数,[注意:此时有可能正好其中一个数组遍历完了!所以...

猜你喜欢

[国家集训队]小Z的袜子(莫队)

[国家集训队]小Z的袜子 题目描述 作为一个生活散漫的人,小Z每天早上都要耗费很久从一堆五颜六色的袜子中找出一双来穿。终于有一天,小Z再也无法忍受这恼人的找袜子过程,于是他决定听天由命…… 具体来说,小Z把这NN只袜子从1到NN编号,然后从编号LL到RR(LL 尽管小Z并不在意两只袜子是不是完整的一双,甚至不在意两只袜子是否一左一右,他却很在意袜子的颜色,毕竟穿两只不同...

服务器配置(五) 服务器使用tomcat配置https全过程

一.了解服务器配置https协议 HTTPS,是以安全为目标的HTTP通道,简单讲是HTTP的安全版。即HTTP下加入SSL层,HTTPS的安全基础是SSL,因此加密的详细内容就需要SSL。 配置HTTPS就需要证书,证书通过权威的CA机构付费获得的证书才能被互联网承认,我们将其放在服务器上面,配置好后,就可以进行https通信了。 通过https访问的网站,在地址前可以看到安全两个字,点击可以查...

SQL语言——基本概念、操作数据库、表、表记录、数据库备份与恢复、外键约束

SQL语言 1.基本概念 1.1 SQL SQL–Structured Query Language, 结构化查询语言,是关系型数据库通用的操作语言。 是一种非过程性语言。 由美国国家标准局(ANSI)与国际标准化组织(ISO)制定SQL标准。各大数据库厂商都对其做了实现。所以我们只要学会了SQL语言,就可以操作各大关系型数据库了。 为加强SQL的语言能力,各厂商增强了过程性语言的特征...

.net core3.1 dapper使用(Oracle链接字符串)

历经的艰辛就不多说了(.net 新手 不喜勿喷 欢迎指点) 废话不多说了,直接上正题: 1.首先建一个类来管理数据库连接 public class DbFactory : IDbFactory { readonly IOptions _options; public DbFactory(IOptions options) { _options = options; } public DbConne...

可自定义图片指示器并支持自定义Tab宽度的TabLayout

[置顶] 可自定义图片指示器并支持自定义Tab宽度的TabLayout 标签: 今日头条tablayout自定义tab宽度 2017-11-01 14:42 625人阅读 评论(3) 收藏 举报 分类: Android学习之路(21) 作者同类文章X 版权声明:转载请标明:http://blog.csdn.net/qq_27258799 目录(?)[+] 自定义图片指示器 自定义Tab宽度 方案1...