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

花花鱼2024-09-17 14:12

1、vue3

<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>