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年前端老司机8 分钟前
React 受控组件和非受控组件区别和使用场景
前端·javascript·react.js
夏晚星9 分钟前
vue实现微信聊天emoji表情
前端·javascript
停止重构11 分钟前
【方案】前端UI布局的绝技,响应式布局,多端适配
前端·网页布局·响应式布局·grid布局·网页适配多端
極光未晚11 分钟前
TypeScript在前端项目中的那些事儿:不止于类型的守护者
前端·javascript·typescript
ze_juejin12 分钟前
Vue3 + Vite + Ant Design Vue + Axios + Pinia 脚手架搭建
前端·vue.js
Rrvive13 分钟前
原型与原型链到底是什么?
javascript
lichenyang45314 分钟前
React项目(移动app)
前端
用户618482402195115 分钟前
Vue-library-start,一个基于Vite的vue组件库开发模板
前端
美团技术团队26 分钟前
报名 | 美团技术沙龙第86期:多业务场景下,美团如何做性能优化
前端
Rrvive1 小时前
localhost 和 127.0.0.1 的核心区别
前端