Ant Design Vue 2.x+ 支持所有的现代浏览器。
兼容性 #
Ant Design Vue 2.x+ 支持所有的现代浏览器。
如果需要支持 IE9+,你可以使用 Ant Design Vue 1.x & Vue 2.x。
npm config set registry https://registry.npm.taobao.org
npm config get registry
vue-cli
$ npm install -g @vue/cli
# OR
$ yarn global add @vue/cli
2. 创建一个项目
使用命令行进行初始化。
$ vue create hrdemo
并配置项目。
若安装缓慢报错,可尝试用 cnpm 或别的镜像源自行安装:rm -rf node_modules && cnpm install。
$ cd hrdemo
$ yarn serve
3. 使用组件
$ npm i --save ant-design-vue@next
完整引入
import { createApp } from 'vue';
import Antd from 'ant-design-vue';
import App from './App';
import 'ant-design-vue/dist/antd.css';
const app = createApp();
app.config.productionTip = false;
app.use(Antd);
yarn serve
yarn : 无法加载文件 C:\Users\zhj\AppData\Roaming\npm\yarn.ps1,因为在此系统上禁止运行脚本
1. 搜索powershell,然后以管理员身份运行
2. 输入 set-ExecutionPolicy RemoteSigned 回车 在弹出的内容后面 输入Y 然后关闭即可
http://bbs.jeecg.com/
https://www.cnblogs.com/wuhuacong/archive/2010/06/23/1763274.html
https://www.cnblogs.com/wuhuacong/p/15221679.html
https://www.cnblogs.com/wuhuacong/p/15323217.html
https://www.uviewui.com/components/intro.html
http://boot.jeecg.com/appHome
https://www.layuiweb.com/demo/layer.html
http://www.jimureport.com/
https://github.com/EbookFoundation/free-programming-books
Ant DesignVue Antd
https://animate.style/
ue-drag-resize
vue-drag-resize是一个专门用于vue项目的拖拽组件,定义元素可拖拽,或者可缩放,或者二者兼有;可限制拖拽的最大与最小值、拖拽的范围是否超出其父元素;并且支持触摸事件
https://kalacloud.com/blog/best-drag-drop/
Vue Draggable - Vue 拖拽组件王者
Vue drag resize - 轻量级,无依赖,可缩放
https://www.cnblogs.com/yycc11/p/9565915.html
vue拖拽组件vuedraggable
vue draggable resize
vue draggable resizable
https://github.com/umdjs/umd
https://blog.csdn.net/qq_43567345/article/details/114855520
springboot 接口接收對象
https://github.com/vuejs/vue-router/blob/dev/examples/named-routes/app.js
https://www.jb51.net/article/228549.htm
https://www.csdn.net/tags/Ntzagg4sNDIxNjMtYmxvZwO0O0OO0O0O.html
https://time.geekbang.org/course/intro/100024601?code=KHKYcoBU6vZa8nMglg7AWfDxxi3BWrz9INAzAY3umPk%3D
https://codesandbox.io/s/named-views-vue-router-4-examples-rd20l?file=/src/router.js:0-649
https://www.surely.cool/doc/dragable#columns
https://blog.51cto.com/u_15081048/2592238
https://www.jqhtml.com/64048.html
https://pro.antdv.com/
https://mirrors.tuna.tsinghua.edu.cn/nodejs-release/v18.6.0/
兼容IE9建议使用Vue1 Vue2
https://github.com/es-shims/es5-shim
https://github.com/paulmillr/es6-shim
垫片
https://babeljs.io/docs/en/babel-polyfill/
https://babeljs.io/docs/en/babel-plugin-transform-runtime/
import { createApp } from 'vue';
import Antd from 'ant-design-vue';
import App from './App';
import 'ant-design-vue/dist/antd.css';
import router from "./router/index"
const app = createApp(App);
app.use(router);
app.use(Antd).mount('#app');
<template>
<a-back-top />
<CommLoading :spinning="spinning"/>
<HelloWorld/>
<router-link to="/">Go to Home</router-link>
<router-link to="/about">Go to About</router-link>
<router-view></router-view>
</template>
<script>
export default {
name: 'App'
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 0px;
min-height:800px
}
</style>
import { createRouter,createWebHashHistory } from "vue-router";
const routes = [
{
path:'/',
component:()=>import("../components/HelloWorld.vue")
},
{
path:'/about',
component:()=>import("../components/AdminManger.vue")
}
]
const router = createRouter({
history:createWebHashHistory('/'),
routes
})
export default router
<template>
<a-layout>
<a-layout-header class="header">
<div class="logo" />
<a-menu
v-model:selectedKeys="selectedKeys1"
theme="dark"
mode="horizontal"
:style="{ lineHeight: '64px' }"
>
<a-menu-item key="1">nav 1</a-menu-item>
<a-menu-item key="2">nav 2</a-menu-item>
<a-menu-item key="3">nav 3</a-menu-item>
</a-menu>
</a-layout-header>
<a-layout>
<a-layout-sider width="200" style="background: #fff">
<a-menu
v-model:selectedKeys="selectedKeys2"
v-model:openKeys="openKeys"
mode="inline"
:style="{ height: '100%', borderRight: 0 }"
>
<a-sub-menu key="sub1">
<template #title>
<span>
<user-outlined />
subnav 1
</span>
</template>
<a-menu-item key="1">option1</a-menu-item>
<a-menu-item key="2">option2</a-menu-item>
<a-menu-item key="3">option3</a-menu-item>
<a-menu-item key="4">option4</a-menu-item>
</a-sub-menu>
<a-sub-menu key="sub2">
<template #title>
<span>
<laptop-outlined />
subnav 2
</span>
</template>
<a-menu-item key="5">option5</a-menu-item>
<a-menu-item key="6">option6</a-menu-item>
<a-menu-item key="7">option7</a-menu-item>
<a-menu-item key="8">option8</a-menu-item>
</a-sub-menu>
<a-sub-menu key="sub3">
<template #title>
<span>
<notification-outlined />
subnav 3
</span>
</template>
<a-menu-item key="9">option9</a-menu-item>
<a-menu-item key="10">option10</a-menu-item>
<a-menu-item key="11">option11</a-menu-item>
<a-menu-item key="12">option12</a-menu-item>
</a-sub-menu>
</a-menu>
</a-layout-sider>
<a-layout style="padding: 0 24px 24px">
<a-breadcrumb style="margin: 16px 0">
<a-breadcrumb-item>Home</a-breadcrumb-item>
<a-breadcrumb-item>List</a-breadcrumb-item>
<a-breadcrumb-item>App</a-breadcrumb-item>
</a-breadcrumb>
<a-layout-content
:style="{ background: '#fff', padding: '24px', margin: 0, minHeight: '280px' }"
>
<JqTable/>
</a-layout-content>
</a-layout>
</a-layout>
</a-layout>
</template>
<script>
import { UserOutlined, LaptopOutlined, NotificationOutlined } from '@ant-design/icons-vue';
import { defineComponent, ref } from 'vue';
import JqTable from './JqTable.vue';
export default defineComponent({
components: {
UserOutlined,
LaptopOutlined,
NotificationOutlined,
JqTable
},
setup() {
return {
selectedKeys1: ref(['2']),
selectedKeys2: ref(['1']),
collapsed: ref(false),
openKeys: ref(['sub1']),
};
},
});
</script>
<style>
#components-layout-demo-top-side-2 .logo {
float: left;
width: 120px;
height: 31px;
margin: 16px 24px 16px 0;
background: rgba(255, 255, 255, 0.3);
}
.ant-row-rtl #components-layout-demo-top-side-2 .logo {
float: right;
margin: 16px 0 16px 24px;
}
.site-layout-background {
background: #fff;
}
</style>
<template>
<div class="example" v-show="spinning">
<a-spin tip="Loading..." />
</div>
</template>
<script>
import { defineComponent } from 'vue';
export default defineComponent({
props: {
spinning: Boolean
},
setup() {
},
});
</script>
<style scoped>
.example {
position:absolute;
top:30%;
left:50%;
transform:translateY(-50%);
transform:translateX(-50%);
z-index:9999;
text-align: center;
background: rgba(0, 0, 0, 1);
border-radius: 4px;
margin-bottom: 20px;
padding: 30px 50px;
margin: 20px 0;
}
</style>
<template>
<a-table :columns="columns" :data-source="data">
<template #headerCell="{ column }">
<template v-if="column.key === 'name'">
<span>
<smile-outlined />
Name
</span>
</template>
</template>
<template #bodyCell="{ column, record }">
<template v-if="column.key === 'name'">
<a>
{{ record.name }}
</a>
</template>
<template v-else-if="column.key === 'tags'">
<span>
<a-tag
v-for="tag in record.tags"
:key="tag"
:color="tag === 'loser' ? 'volcano' : tag.length > 5 ? 'geekblue' : 'green'"
>
{{ tag.toUpperCase() }}
</a-tag>
</span>
</template>
<template v-else-if="column.key === 'action'">
<span>
<a>Invite 一 {{ record.name }}</a>
<a-divider type="vertical" />
<a>Delete</a>
<a-divider type="vertical" />
<a class="ant-dropdown-link">
More actions
<down-outlined />
</a>
</span>
</template>
</template>
</a-table>
</template>
<script>
import { SmileOutlined, DownOutlined } from '@ant-design/icons-vue';
import { defineComponent } from 'vue';
const columns = [{
name: 'Name',
dataIndex: 'name',
key: 'name',
}, {
title: 'Age',
dataIndex: 'age',
key: 'age',
}, {
title: 'Address',
dataIndex: 'address',
key: 'address',
}, {
title: 'Tags',
key: 'tags',
dataIndex: 'tags',
}, {
title: 'Action',
key: 'action',
}];
const data = [{
key: '1',
name: 'John Brown',
age: 32,
address: 'New York No. 1 Lake Park',
tags: ['nice', 'developer'],
}, {
key: '2',
name: 'Jim Green',
age: 42,
address: 'London No. 1 Lake Park',
tags: ['loser'],
}, {
key: '3',
name: 'Joe Black',
age: 32,
address: 'Sidney No. 1 Lake Park',
tags: ['cool', 'teacher'],
}];
export default defineComponent({
components: {
SmileOutlined,
DownOutlined,
},
setup() {
return {
data,
columns,
};
},
});
</script>
Ant Design Vue 2.x+ 支持所有的现代浏览器。相关推荐
- ant design vue pro 支持多页签模式 页签可以缓存
ant design vue pro 支持多页签模式 页签可以缓存 代码贴在最后 启动之后页面是这样的: 第一步:修改 src/layouts/BasicLayout.vue 文件,在该文件中添加mu ...
- 【Ant Design Vue】之Grid栅格和Space间距
文章目录 Grid 栅格 Space 间距 Grid 栅格 Ant Design Vue 将整个设计建议区域按照 24 等分的原则进行划分,划分之后的信息区块我们称之为『盒子』.建议横向排列的盒子数量 ...
- Vue笔记-Ant Design Vue构建前端连接后端WebSocket
运行结果如下: 程序结构如下: 关键代码: App.vue <template><a-layout class="layout"><a-layout- ...
- Element UI, Ant Design Vue
1. 对比 框架名称 组件数量 单元测试率 admin项目 维护团队 GitHub Star数(2019/10/16) 原型设计素材 Element UI 46 81% vue-element-adm ...
- Vue 2.x折腾记 - (16) 基于Ant Design Vue 封装一个配置式的表单搜索组件
前言 这次的后台管理系统项目选型用了Vue来作为主技术栈: 因为前段时间用过React来写过项目(用了antd),感觉棒棒的. 所以这次就排除了Element UI,而采用了Ant Design Vu ...
- VUE3 使用 Ant Design Vue 图标库的图标
emmm 就是 Ant Design Vue 这玩意用来做蛮好的 支持VUE3 所以这里用了这个了. 首先他支持你一个个导入 那岂不是.....傻里傻气的 ,所以我们一次性导入! 1. 先安装: ...
- Ant Design Vue 相关介绍
Ant Design Vue有三个版本: v1(基于vue2.x):https://www.antdv.com/docs/vue/introduce-cn/ v2(基于vue3.x):https:// ...
- chrome插件开发(manifest_version版本V3 + Ant Design Vue)
1.什么是 Chrome 插件 谷歌浏览器插件是一种小型的定制浏览器体验的程序,通过插件可以自定义浏览器的一些行为来适合个人的需求,例如上面的查看服务器状态插件. 在应用商店中下载下来的插件基本上都是 ...
- vite+vue3+ts+ant design vue+tailwindcss搭建前端web应用(2)
回顾 上篇文章地址:vite+vue3+ts+ant design vue+tailwindcss搭建前端web应用(1)_konsei的博客-CSDN博客 上篇文章搭建了vue3项目,引入了ant ...
最新文章
- 基于Eclipse的TI集成开发环境IDE-CCSv5使用教程
- shsh验证服务器,SHSH(Signature HaSH blobs)是由Apple验证服务器根据iOS设备ECID和固件版本产生的一个签名证书...
- image.resize()==>返回此图像的大小调整后的副本
- vmware嵌套虚拟化对服务器的影响,VMware 虚拟机嵌套部署 KVM 虚拟机小结
- Padrino 生成器指南
- 索尼PS5国行版本周开售 后期将推全配色DualSense手柄
- 将java编译成so库_利用android studio 生成 JNI需要的动态库so文件
- 关键字 : this /self / parent
- PHP - ReflectorClass 反射类的作用
- 【MID音频读取和分析】基于matlab的MID音频文件读取和分析
- VSS2005使支持通过Internet访问
- 总管家云CRM:客户不跟踪,销售一场空
- 最全的国内外电子书籍网站合集
- 关于如何取消萤石云视频加密
- ASP.NET资源大全-知识分享
- FreeSWITCH的传真发送
- 股票世界观-招财大牛猫公众号整理
- Charles手机端抓包,抓取小说软件整本小说的示例
- [2016ACM多校] HDU5784 极角序 正难则反
- linux获取系统信息(sysinfo函数的使用)