Vue3学习(二)之集成Ant Design Vue
一、集成Ant Design Vue
npm install ant-design-vue@2.0.0-rc.3 --save
兼容性
Ant Design Vue 2.x 支持所有的现代浏览器。
如果需要支持 IE9+,你可以使用 Ant Design Vue 1.x & Vue 2.x。
对于 IE 系列浏览器,需要提供 es5-shim 和 es6-shim 等 Polyfills 的支持。
二、组件的使用
官网地址: https://2x.antdv.com/docs/vue/getting-started-cn
1、完整引用
在main.ts中修改内容如下:
import { createApp } from 'vue';
import Antd from 'ant-design-vue';
import App from './App.vue';
import 'ant-design-vue/dist/antd.css';
import router from './router';
import store from './store';
//优点就是方便开发,缺点就是打包的时候会使文件较大(但不并影响什么)
createApp(App).use(store).use(router).use(Antd).mount('#app')
2、组件引用
完整引入后,我们就能快乐的使用组件了,如果你之前使用过Vue2.0或者 Element UI相对上后会更快。
三、组件使用示例
我们来为home主页,添加一个按钮,如下图:
1、我们在home主页做修改
<template>
<div class="home">
<a-button type="primary" danger>Primary</a-button>
<img alt="Vue logo" src="../assets/logo.png">
<HelloWorld msg="Welcome to Your Vue.js + TypeScript App"/>
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import HelloWorld from '@/components/HelloWorld.vue'; // @ is an alias to /src
export default defineComponent({
name: 'Home',
components: {
HelloWorld,
},
});
</script>
2、重新启动服务查看效果
双击server启动,查看结果如下图:
四、写在最后
本来很简单个事,可惜身体不佳(不能久坐),但是还是想坚持下来,只有技术你的投入,才会有产出,也不会骗你,踏实的去学习吧
Vue3学习(二)之集成Ant Design Vue的更多相关文章
- React学习及实例开发(二)——用Ant Design写一个简单页面
本文基于React v16.4.1 初学react,有理解不对的地方,欢迎批评指正^_^ 一.引入Ant Design 1.安装antd yarn add antd 2.引入 react-app-re ...
- Ant Design Vue Pro 项目实战-项目初始化(一)
写在前面 时间真快,转眼又是新的一年.随着前后端技术的不断更新迭代,尤其是前端,在目前前后端分离开发模式这样的一个大环境下,交互性.兼容性等传统的开发模式已经显得有些吃力.之前一直用的是react,随 ...
- 基于Ant Design Vue封装一个表单控件
开源代码 https://github.com/naturefwvue/nf-vue3-ant 有缺点本来是写在最后的,但是博文写的似乎有点太长了,估计大家没时间往下看,于是就把有缺点写在前面了,不喜 ...
- Ant Design Vue select下拉列表设置默认值
在项目中需要为Ant Design Vue 的 select 组件设置一个默认值,如下图所示的状态下拉选择框,默认选择全部 代码如下: <a-select v-model="query ...
- 使用ant design vue的日历组件,实现一个简单交易日与非交易日的切换
使用ant design vue的日历组件,实现一个简单交易日与非交易日的切换 需求: 日历区分交易日.非交易日 可以切换面板查看整年交易日信息 可以在手动调整交易日.非交易日 演示实例 序--使用软 ...
- 使用npm安装 Ant Design Vue 时报错—ant-design-vue@latest(sha1-qsf / gCIFcRYxyGmOKgx7TmHf1z4 =)seems to be corrupted.
安装 Ant Design Vue 时报错: npm install ant-design-vue --save ant-design-vue @ latest(sha1-qsf / gCIFcRYx ...
- (二)React Ant Design Pro + .Net5 WebApi:前端环境搭建
首先,你需要先装一个Nodejs,这是基础哦.如果没有这方面知识的小伙伴可以在园子里搜索cnpm yarn等关键字,内容繁多,此不赘述,参考链接 一. 简介 1. Ant Design Pro v5 ...
- 实战build-react(二)-------引入Ant Design
安装 Ant Design npm install antd --save 或 yarn add antd 注释:https://www.jianshu.com/p/21caf40ee93e(cop ...
- Python学习二十八周(vue.js)
一.指令 1.一个例子简单实用vue: 下载vue.js(这里实用1.0.21版本) 编写html代码: <!DOCTYPE html> <html lang="en&qu ...
随机推荐
- promise小案例
页面中有个板块,需要多张图片加载完之后才能进行显示 //页面中有个板块 需要多张图片加载完之后才能进行显示 const loadImg = (src) => { return new Promi ...
- java对象的引用级别
解释 在java中也有引用的概念,其实就可以认为是变量.标题中的引用级别是指变量与对象之前的引用级别.java中分为4种,按引用强弱关系排序分别是:强引用.软引用.弱引用.虚引用. 强引用(Stron ...
- Servlet学习笔记(三)之HttpServletRequest
HttpServletRequest(HttpServletRequest 想比 ServletRequest 添加与协议相关 API)对象代表客户端的请求,当客户端通过HTTP协议访问服务器时,HT ...
- VUE006. 前端跨域代理服务器ProxyTable概述与配置
概述 使用 vue-cli 工具生成一个 vue 项目: vue init webpack my-project-vue 在生成的项目结构里,会有一个 index.js 文件.在这个文件里 ...
- 编写一个应用程序,利用数组或者集合, 求出"HELLO",“JAVA”,“PROGRAM”,“EXCEPTION”四个字符串的平均长度以及字符出现重复次数最多的字符串。
public class Number { public static void main(String[] args) { String[] arr = { "HELLO", & ...
- docker学习笔记(一)--ubunru18.04下面安装docker18.03
我是在本地安装的虚拟机,再搭建的环境,虚拟机的安装可以参考下面的博客: https://blog.csdn.net/u013142781/article/details/50529030 安装好了之后 ...
- 加入Erlang社区-指引
国内暂且没有发现较活跃.人气较高的论坛或者社区,偶然发现Erlang官网的Community页面描述了一个Slack交流平台,里面有众多异国他乡的大佬,感兴趣的.有技术疑问的都可以加入看看. 加入教程 ...
- 机器学习——EM算法
1 数学基础 在实际中,最小化的函数有几个极值,所以最优化算法得出的极值不确实是否为全局的极值,对于一些特殊的函数,凸函数与凹函数,任何局部极值也是全局极致,因此如果目标函数是凸的或凹的,那么优化算法 ...
- Java统计文件中字母个数
import java.text.DecimalFormat; import java.io.File; import java.io.FileReader; import java.io.Buffe ...
- (转载)深入理解MDL元数据锁
作者:MySQL技术本文为作者原创,转载请注明出处:https://www.cnblogs.com/kunjian/p/11993708.html 前言: 当你在MySQL中执行一条SQL时,语句并没 ...