最近学习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. MongoDB mongoimport 从csv导入数据指定字段类型

    mongoimport:指定字段的类型,防止将数字型的字符串导入成数值类型 1.正常模式导入 mongoimport -d idpad_zl -c trs_action_dzwl_zm --type ...

  2. 用于 Quinella/Exacta/Trifecta/Pick Four/Pick Six/Quaddie/Superfecta 7大规则的测试

    上2篇给了详细API 设计,下面我们来模拟测试下: Quinella: self.bet_type = "Quinella" self.nraces = 1 self.horse_ ...

  3. 第04组alpha冲刺（2/4）

    队名:斗地组 组长博客:地址 作业博客:Alpha冲刺(2/4) 各组员情况 林涛(组长) 过去两天完成了哪些任务: 1.收集各个组员的进度 2.写博客 展示GitHub当日代码/文档签入记录: 接下 ...

  4. 【cf比赛记录】Codeforces Round #600 (Div. 2)

    Codeforces Round #600 (Div. 2) ---- 比赛传送门 昨晚成绩还好,AC A,B题,还能上分(到底有多菜) 补了C.D题,因为昨晚对C.D题已经有想法了,所以补起题来也快 ...

  5. Review of Semantic Segmentation with Deep Learning

    In this post, I review the literature on semantic segmentation. Most research on semantic segmentati ...

  6. oracle 使用count()函数进行分组计数时所踩的坑！

      1.情景展示 需要对id_card字段按字符长度进行分组统计并进行计数. 2.错误方式 第一步:统计出id_card字段共存在几种情况. 第一种方式:distinct 第二种方式:group by ...

  7. leetcode 494. 目标数

    题目描述: 给定一个非负整数数组,a1, a2, ..., an, 和一个目标数,S.现在你有两个符号 + 和 -.对于数组中的任意一个整数,你都可以从 + 或 -中选择一个符号添加在前面. 返回可以 ...

  8. Dubbo自定义Filter统一处理异常

    Dubbo版本:2.7 使用自定义Filter注意事项 1.自定义名称不能和默认Filter相同,否则可能不生效 2.只用定义Filter类和META-INF下的文本文件,不用添加配置,@Activa ...

  9. Docker运行图形化程序

    原理 Docker支持图形化程序,是利用Linux的X11技术. 相关文章 如何在Docker容器中启动D-Bus 引文详情 如何在Docker容器中启动D-Bus 翻译自 https://georg ...

  10. nodejs中使用cheerio爬取并解析html网页

    nodejs中使用cheerio爬取并解析html网页 转 https://www.jianshu.com/p/8e4a83e7c376 cheerio用于node环境,用法与语法都类似于jquery ...