当前位置: 首页 > news >正文

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 } = VuecreateApp({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>

http://www.lryc.cn/news/442371.html

相关文章:

  • neo4j导入csv数据
  • YOLOV8实现小目标检测
  • 解决 Prettier ESLint 错误
  • 百度网盘企业版数据快速上云,数据流转平台 CloudFlow 加速大模型训练迭代
  • 地面站通过SSH连接无人机
  • 【Pytorch】大语言模型中的CrossEntropyLoss
  • 安全热点问题
  • C++——用选择法对10个数值进行排序。
  • CSP-CCF★★★201909-2小明种苹果(续)★★★
  • 硬件工程师笔试面试——变压器
  • Visual Studio Code( VS Code)倍速提高编程工作效率的免费的源代码编辑器
  • 华为SMU02B1智能通信电源监控单元模块简介
  • 【刷题日记】15. 三数之和
  • 低级编程语言和高级编程语言
  • Spring Boot-API网关问题
  • 三 auto占位符
  • tail: inotify 资源耗尽
  • 什么是损失函数?常见的损失函数有哪些?
  • Python Web 开发中的国际化与本地化处理
  • android API、SDK与android版本
  • OpenHarmony(鸿蒙南向开发)——小型系统内核(LiteOS-A)【内核通信机制】下
  • 如何联系真正的开发者而非公司??
  • OpenCV运动分析和目标跟踪(1)累积操作函数accumulate()的使用
  • source ~/.bash_profile有什么用
  • 【C++笔记】类和对象的深入理解(三)
  • 时代变了,MySQL 早已不是最流行的数据库了
  • K8S容器实例Pod安装curl-vim-telnet工具
  • 代码随想录算法训练营DAY09之动态规划(一)基础题目
  • 线性系统分析
  • Ubuntu 20.04 部署 NET8 Web - Systemd 的方式 达到外网访问的目的