最近学习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. Bomb Enemy

    Description Given a 2D grid, each cell is either a wall 'W', an enemy 'E' or empty '0' (the number z ...

  2. v熬夜是场可怕的自杀

    转载于 https://baike.baidu.com/vbaike/%E7%86%AC%E5%A4%9C%E6%98%AF%E5%9C%BA%E5%8F%AF%E6%80%95%E7%9A%84%E ...

  3. vue使用插件的流程

    1.引入vue 2.引入插件 3.通过vue.use()调用 例子:使用router插件 import Vue from "vue"; import VueRouter from ...

  4. 2019 第二届 科成安洵杯 官方WriteUp -17网安

    长文预警:对应源码请加企鹅群获取:861677907 0x01 WEB 1.1 勇闯贪吃蛇大冒险 一进去就看出来是一道web页面JS的小游戏,提示说输入CDUESTC CTF即可闯关成功,但是存在着d ...

  5. SpringBoot + CXF快速实现SOAP WebService（支持Basic Auth）

    唠叨两句 讲真,SOAP跟现在流行的RESTful WebService比起来显得很难用.冗余的XML文本信息太多,可读性差,它的请求信息有时很难手动构造,不太好调试.不过说归说,对某些企业用户来说S ...

  6. 调用Fluent进行多工况计算总结

    算例来源:https://confluence.cornell.edu/display/SIMULATION/FLUENT+-+Turbulent+Pipe+Flow 有时候我们对同一模型进行多工况计 ...

  7. unicode欺骗—— hctf - admin

    查看源代码,发现<!-- you are not admin --> 提示要以管理员身份登陆 尝试注册管理员账号,提示The username has been registered 于是 ...

  8. DNS域名解析失败 和 何时会查询下一个nameserver

    阿里DNS:域名解析失败的那些事:https://zhuanlan.zhihu.com/p/40659713 只有第一个nameserver响应超时,才会请求下一个nameserver. 收到 NOD ...

  9. chrome如何禁用js代码

    chrome如何禁用js代码 一.总结 一句话总结: 设置-->高级-->隐私设置和安全性-->网站设置-->javascript 中禁止javascript即可 二.chro ...

  10. Guava 库

    https://www.yiibai.com/guava https://wizardforcel.gitbooks.io/guava-tutorial/content/1.html com.goog ...