最近学习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. 最长公共上升子序列 O(n^2)

    #include <bits/stdc++.h> using namespace std; const int MAXN = 5005; int A[MAXN], B[MAXN], N, ...

  2. LeetCode 911. Online Election

    原题链接在这里:https://leetcode.com/problems/online-election/ 题目: In an election, the i-th vote was cast fo ...

  3. Micro Benchmark Framework java 基准测试类库

    Micro Benchmark Framework 框架主要是method 层面上的 benchmark,精度可以精确到微秒级 比较典型的使用场景还有: 想定量地知道某个函数需要执行多长时间,以及执行 ...

  4. 织梦一二级导航菜单被点击顶级栏目高亮(加class)解决方法

    织梦一二级导航菜单被点击的栏目高亮显示方法详解,废话不多说直接举例说明: 织梦一级菜单被点击栏目高亮调用方法: {dede:channel typeid ='1'  type ='son' curre ...

  5. Python运行语法错误：IndentationError: unindent does not match any outer indentation level

    python脚本没有对齐.新的Python语法,是不支持的代码对齐中,混用TAB和空格的.

  6. Centos7 U盘安装&命令大全

    软件下载 1.centos下载,下载地址https://www.centos.org/download/ 我选择的镜像是:CentOS-7-x86_64-DVD-1804.iso 2.UltraISO ...

  7. Guava Cache 参数配置说明

    系统中用到了了Guava Cache: private DriverInfoServiceImpl(DriverClientProxy driverClientProxy) { this.driver ...

  8. Cesium原理篇：6 Render模块(6: Instance实例化)【转】

    https://www.cnblogs.com/fuckgiser/p/6027520.html 最近研究Cesium的实例化,尽管该技术需要在WebGL2.0,也就是OpenGL ES3.0才支持. ...

  9. 将文件File转换成byte数组

    代码如下: /** * 将文件转换成byte数组 * @param filePath * @return */ public static byte[] File2byte(File tradeFil ...

  10. PHP系列 | PHPexcel导入xls格式 ，提示错误：iconv(): Wrong charset, conversion from `CP936' to `UTF-8' is not allowed

    导入xls格式(2003版本)时会报错提示错误信息 iconv(): Wrong charset, conversion from `CP936' to `UTF-8' is not allowed[ ...