vue3 axios ant-design-vue cdn的方式使用

1、vue3

快速上手 | Vue.js

复制代码
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

<div id="app">{{ message }}</div>

<script>
  const { createApp, ref } = Vue

  createApp({
    setup() {
      const message = ref('Hello vue!')
      return {
        message
      }
    }
  }).mount('#app')
</script>

2、ant-design-vue 4.2.3

复制代码
<script src="https://unpkg.com/vue@3.4.27/dist/vue.global.prod.js"></script>
	<script src="https://unpkg.com/dayjs/dayjs.min.js"></script>
	<script src="https://unpkg.com/dayjs/plugin/customParseFormat.js"></script>
	<script src="https://unpkg.com/dayjs/plugin/weekday.js"></script>
	<script src="https://unpkg.com/dayjs/plugin/localeData.js"></script>
	<script src="https://unpkg.com/dayjs/plugin/weekOfYear.js"></script>
	<script src="https://unpkg.com/dayjs/plugin/weekYear.js"></script>
	<script src="https://unpkg.com/dayjs/plugin/advancedFormat.js"></script>
	<script src="https://unpkg.com/dayjs/plugin/quarterOfYear.js"></script>
	<link type="text/css" href="https://unpkg.com/ant-design-vue@4.2.3/dist/reset.css" media="screen" rel="stylesheet">
	<script src="https://unpkg.com/ant-design-vue@4.2.3/dist/antd.min.js"></script>
	<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

import { DatePicker } from 'ant-design-vue';
app.use(DatePicker);

3、template

复制代码
<body class="bg">
	<div id="app">
    </div>
</body>

<script>
		Object.assign(window, Vue);
		const vue3App = {

			setup() {
				const msg = ref(''); //信息

				onMounted(() => {
					console.log(window.location.search);

				});

				function test() {
					// 发送 POST 请求
					axios({
						method: 'post',
						url: '/url换成自己的',
						data: {
							code: '0',
							message: 'success',
							type: 'opt',
							result: 'success',
							uid: uid.value,
							msgid: msgid.value,
						}
					}).then(function (response) {
						console.log(response);
						msg.value = response.data.message;

					})
						.catch(function (error) {
							console.log(error);
						});
				}
				// 返回值会暴露给模板和其他的选项式 API 钩子
				return {
					msg,
					btnClick() {
						//console.log(msg.value);
						test();
					},
				}
			},
		}
		//初始化
		const app = createApp(vue3App);
		app.use(antd);
		app.mount("#app");

	</script>
	<style>
		.bg {
			background-color: rgb(213, 213, 213);
		}

		.margintop {
			margin-top: 300px;
		}

		.marginbottom {
			margin-bottom: 30px;
		}
	</style>
相关推荐
foxhuli22916 分钟前
禁止ifrmare标签上的文件,实现自动下载功能,并且隐藏工具栏
前端
青皮桔1 小时前
CSS实现百分比水柱图
前端·css
失落的多巴胺1 小时前
使用deepseek制作“喝什么奶茶”随机抽签小网页
javascript·css·css3·html5
DataGear1 小时前
如何在DataGear 5.4.1 中快速制作SQL服务端分页的数据表格看板
javascript·数据库·sql·信息可视化·数据分析·echarts·数据可视化
影子信息1 小时前
vue 前端动态导入文件 import.meta.glob
前端·javascript·vue.js
青阳流月1 小时前
1.vue权衡的艺术
前端·vue.js·开源
RunsenLIu1 小时前
基于Vue.js + Node.js + MySQL实现的图书销售管理系统
vue.js·mysql·node.js
样子20181 小时前
Vue3 之dialog弹框简单制作
前端·javascript·vue.js·前端框架·ecmascript
kevin_水滴石穿1 小时前
Vue 中报错 TypeError: crypto$2.getRandomValues is not a function
前端·javascript·vue.js
翻滚吧键盘1 小时前
vue文本插值
javascript·vue.js·ecmascript