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>