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>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值