最近学习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. python语言(五)匿名函数、读写excel、操作数据库、加密、redis操作

    一.匿名函数 递归:就是调用自己 def func(): num = int(input('num:')) if num % 2 ==0: print('是偶数') return else: func ...

  2. 编译lua固件NodeMcu 8266

    https://www.cnblogs.com/yangfengwu/p/10547024.html 因为我现在的Wifi的教程是lua语言编写的,但是有些功能需要自己编译lua固件才可以,这篇文章就 ...

  3. 【题解】洛谷 P1080 国王游戏

    目录 题目 思路 \(Code\) 题目 P1080 国王游戏 思路 贪心+高精度.按\(a \times b\)从小到大排序就可以了. \(Code\) #include<bits/stdc+ ...

  4. 【JZOJ6213】【20190613】String

    题目 \(n \le 10^{18} \ , \ |T| \le 10^5\) 题解 显然,最少的操作次数一定是贪心地能匹配就匹配 我们可以建出\(T\)的SAM,把SAM不能走的边补到根的后继节点 ...

  5. Sherlock and His Girlfriend（信息学奥赛一本通 1623）

    [题目描述] 原题来自:Codeforces Round #400 B. Sherlock 有了一个新女友(这太不像他了!).情人节到了,他想送给女友一些珠宝当做礼物. 他买了 n 件珠宝.第 i 件 ...

  6. ERA-Interim数据学习

    1.气象再分析数据有很多种,看文献里用到的主要有这几种 ECWRF——ERA-Interim,分辨率0.125°,欧洲的 MERRA-2,分辨率0.625°*0.5°,NASA的 GEOS-5FP,分 ...

  7. Nagios HTTP WARNING: HTTP/1.1 403 Forbidden

    当我们第一次搭建好nagios后会有Nagios HTTP WARNING: HTTP/1.1 403 Forbidden告警 要解决这个问题, 可以创建一个html文件,然后重启两个服务,等待几分钟 ...

  8. 第08组 Alpha冲刺（4/4）

    小李的博客 作业博客 作业链接 组员1李昕晖(组长) 过去两天完成了哪些任务 文字/口头描述 11月20日了解各个小组的进度与难以攻破的地方,晚上安排开会,安排新的冲刺任务. 实现地图功能 展示Git ...

  9. Unity2019.1中文技术手册离线版

    使用离线版优质.系统化的教程.经验文档.参考手册,为开发者节省时间,提高效率! 解压后打开UnityDocumentation_2019.1/Manual/index.html 需要的自取,下载地址: ...

  10. mysql/mongodb监控之Percona Monitoring and Management (PMM) 2.1.0安装使用

    Percona Monitoring and Management (PMM)是Percona Server一款开源的用于管理和监控MySQL和MongoDB性能的开源平台,通过PMM客户端收集到的D ...