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>
相关推荐
EricWang135812 分钟前
[OS] 项目三-2-proc.c: exit(int status)
服务器·c语言·前端
September_ning12 分钟前
React.lazy() 懒加载
前端·react.js·前端框架
web行路人22 分钟前
React中类组件和函数组件的理解和区别
前端·javascript·react.js·前端框架
番茄小酱00123 分钟前
Expo|ReactNative 中实现扫描二维码功能
javascript·react native·react.js
子非鱼92141 分钟前
【Ajax】跨域
javascript·ajax·cors·jsonp
超雄代码狂44 分钟前
ajax关于axios库的运用小案例
前端·javascript·ajax
长弓三石1 小时前
鸿蒙网络编程系列44-仓颉版HttpRequest上传文件示例
前端·网络·华为·harmonyos·鸿蒙
小马哥编程1 小时前
【前端基础】CSS基础
前端·css
嚣张农民1 小时前
推荐3个实用的760°全景框架
前端·vue.js·程序员
周亚鑫2 小时前
vue3 pdf base64转成文件流打开
前端·javascript·pdf