最近学习AntDesign组件使用，官方Pro例子集成度太高，不容易学习，将从最基础组件一个一个搭建。

1、创建Vue Cli项目

2、引入ant design组件

$ cnpm i --save ant-design-vue

3、安装组件babel-plugin-import

4、修改babelrc文件

cnpm install babel-plugin-import --dev

5、mainjs中引用button组件

6、Vue组件中添加按钮

7、实际效果

AntDesign vue学习笔记（一）初始化项目的更多相关文章

  1. AntDesign vue学习笔记（七）Form 读写与图片上传

    AntDesign Form使用布局相比传统Jquery有点繁琐 (一)先读写一个简单的input为例 <a-form :form="form" layout="v ...

  2. Vue 学习笔记 — 组件初始化

    简书 在vue中有3个概念很容易搞混,data,computed,props,特别是我们这些原后端开发人员. new Vue({ el: "#x", data: { id: 1 } ...

  3. AntDesign vue学习笔记（九）自定义文件上传

    第七节时提到,上传文件时实际可能需要传输一个token. 1.查看vue antdesign文档https://vue.ant.design/components/upload-cn/ 2.使用cus ...

  4. AntDesign vue学习笔记（四）使用组件切换

    同样实现上一篇功能, 改为使用组件切换,实现方法如下 1.修改MainFrm中的<router-view/>如下代码 2.注册局部组件 export default { name: 'Ma ...

  5. AntDesign vue学习笔记（三）嵌套路由使用

    本项目目前结构如下 1.Login页面=>MainFrm页面=>MainFrm左部菜单,右边是显示区域可以切换子页面. 2.当点击左部菜单时,右边的子页面随着进行切换. 实现关键代码如下1 ...

  6. AntDesign vue学习笔记（二）axios使用

    之前在vue页面中引入axios使用,本篇在mainjs中引入,这样就不用单独在每个页面引入 1.mainjs中引入axios,设置基础url import axios from 'axios' ax ...

  7. AntDesign vue学习笔记（八）Table服务端分页使用

    本文是AntDesign后端分页方法 1.设置pagination <a-table :columns="columns" :dataSource="data&qu ...

  8. AntDesign vue学习笔记（六）Table 显示图片

    AntDeign官网上没有table动态绑定显示图片的示例,baidu上搜索出来的大部分都是React语法,无法使用. 经过摸索,实现方法如下:以显示一个图片,一个按钮为例(picurl是返回的jso ...

  9. AntDesign vue学习笔记（五）导航菜单动态加载

    一般的后台系统都有一个树形导航菜单,具体实现如下,主要参考https://my.oschina.net/u/4131669/blog/3048416 "menuList": [ { ...

随机推荐

  1. CF1245F: Daniel and Spring Cleaning

    CF1245F: Daniel and Spring Cleaning 题意描述: 给定区间\([L,R]\),其中 \((0\leq L,R\leq 10^9)\),问在区间内有多少数对\((x,y ...

  2. Xamarin.Android开发

    使用 Visual Studio 生成第一个 Xamarin.Android 应用程序,并进一步了解使用 Xamarin 进行 Android 应用程序开发的基础知识.在此过程中,会介绍生成和部署 X ...

  3. [RN] React Native 使用 阿里巴巴 矢量图标库 iconfont

    React Native 使用 阿里巴巴 矢量图标库 iconfont 文接上文: React Native 使用精美图标库react-native-vector-icons 本文主要讲述 如何 使用 ...

  4. Linux OOM一二三

    Linux开发一般会遇到“/proc/sys/vm/overcommit_memory”,即文件/etc/sysctl.conf中的vm.overcommit_memory,Overcommit的意思 ...

  5. LOJ3097 SNOI2019 通信 题解

    题目链接 费用流,当建边需要依靠位置和权值两个偏序关系时,可以用cdq分治优化建边. 代码: #include<bits/stdc++.h> using namespace std; #d ...

  6. Cloud-init原理

    Ubuntu修改主机名后,重启自动恢复原来的主机名? 这是因为Ubuntu18.10上,默认安装并启动了cloud-init, 需要停止它的四个服务进程,才可以使用传统的方式修改主机名. cloud- ...

  7. Spring Cloud Zuul 概览

    什么是API网关 网关这个词其实是一个硬件概念.因为按照定义,网络网关出现在网络的边缘,所以防火墙和代理服务器等相关功能 往往与之集成在一起.在家庭网络 和小型企业中,宽带路由器通常充当网络网关.它将 ...

  8. ethtool 强制设置网卡运行模式为100M

    ethtool -s eth0 autoneg off speed 100 duplex full

  9. 微信小程序图片宽度100%，高度自适应

    实现图片自适应,按照一般情况只需设置: img { width: 100%; height: auto; } 但是微信小程序里是特例,需要image标签上设置属性mode=widthFix,就是hei ...

  10. 【FPGA】always (*) 后代码全部显示注释字体的颜色之解决方法

    2015年08月26日 09:44:05 风雨也无晴 阅读数:1289    版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/scottly1/art ...