最近学习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. TDD（测试驱动开发）

    什么是 TDDTDD 有广义和狭义之分,常说的是狭义的 TDD,也就是 UTDD(Unit Test Driven Development).广义的 TDD 是 ATDD(Acceptance Tes ...

  2. 市值TOP10，人类进化及中美坐标

    题记:观察人类进化,以及各国.各民族在这个进化中所起的作用.所处的位置,市值 TOP 10 的变迁,会是一个再好不过的指标! 2008年,经历了全球金融危机后,原油期货一路飙升,创出了147.27美元 ...

  3. 【Beta】Scrum meeting 6

    目录 写在前面 进度情况 任务进度表 Beta-1阶段燃尽图 遇到的困难 照片 commit记录截图 小程序前端仓库 后端代码仓库 技术博客 写在前面 例会时间:5.10 22:30-22:50 例会 ...

  4. 颜色空间模型(HSV\LAB\RGB\CMYK)

    通过Photoshop的拾色器,我们知道表征颜色的模型的不止一种,本文将系统并且详细讨论这四种模型(HSV.LAB.RGB和CMYK)之间的联系以及应用.本文部分章节整合了多位优秀博主的博客(链接见本 ...

  5. tomcat中文乱码

    1. https://blog.csdn.net/qq_35038153/article/details/78430359 2. 1.修改apache-tomcat-9.0.14-windows-x6 ...

  6. Javascript Date构造函数和比较 （二）

    JavaScript Date对象 构造函数实例 Date构造函数中没有参数,将返回当前日期 var currentDate = new Date(); writeLine(currentDate.t ...

  7. dubbo学习笔记(二)dubbo中的filter

    转:https://www.cnblogs.com/cdfive2018/p/10219730.html dubbo框架提供了filter机制的扩展点(本文基于dubbo2.6.0版本). 扩展接口 ...

  8. 微信token介绍

    这里的微信token 有以下三种 1.小程序的token  (appid+appsecret=token) 2.一个是第三方平台token(comment_appid+comment_appsecre ...

  9. java字符串格式化性能对比String.format/StringBuilder/+拼接

    String.format由于每次都有生成一个Formatter对象,因此速度会比较慢,在大数据量需要格式化处理的时候,避免使用String.format进行格式化,相反使用StringUtils.l ...

  10. 使用trace文件分析ANR

    2017年02月07日 12:32:45 不死鸟JGC 阅读数 13886更多 分类专栏: Android   版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链 ...