当前位置: 首页 > 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>

相关文章:

  • 北京网站建设多少钱?
  • 辽宁网页制作哪家好_网站建设
  • 高端品牌网站建设_汉中网站制作
  • ★ C++进阶篇 ★ 多态
  • yolov5明厨亮灶检测系统,厨师帽-口罩检测,带pyqt界面-可检测图片和视频,支持中文标签,检测接口已封装好并优化,代码可读性强!
  • QT Layout布局,隐藏其中的某些部件后,不影响原来的布局
  • ffmpeg实现视频的合成与分割
  • 深度学习自编码器 - 随机编码器和解码器篇
  • 深度学习之线性代数预备知识点
  • 幼儿园自动分班工具:使用Python进行实现
  • 如何在kotlin中给空字符串(””)和null值设置默认值问题?
  • Docker数据挂载本地目录
  • STM32单片机 内存 字 字节 位关系详细讲解
  • 【鸿蒙】HarmonyOS NEXT星河入门到实战6-组件化开发-样式结构重用常见组件
  • 关于安卓App自动化的一些想法
  • HTML5中下拉框标签`<select>`深入全面解析
  • 学习笔记 韩顺平 零基础30天学会Java(2024.9.16)
  • C语言 | Leetcode C语言题解之第405题数字转换为十六进制数
  • IE9 : DOM Exception: INVALID_CHARACTER_ERR (5)
  • 2017-09-12 前端日报
  • CAP 一致性协议及应用解析
  • CSS 专业技巧
  • CSS相对定位
  • es6要点
  • hadoop集群管理系统搭建规划说明
  • Java 网络编程(2):UDP 的使用
  • Odoo domain写法及运用
  • PHP面试之三:MySQL数据库
  • Python爬虫--- 1.3 BS4库的解析器
  • React as a UI Runtime(五、列表)
  • React Native移动开发实战-3-实现页面间的数据传递
  • RxJS: 简单入门
  • Sublime Text 2/3 绑定Eclipse快捷键
  • thinkphp5.1 easywechat4 微信第三方开放平台
  • ⭐ Unity 开发bug —— 打包后shader失效或者bug (我这里用Shader做两张图片的合并发现了问题)
  • 从0实现一个tiny react(三)生命周期
  • 多线程事务回滚
  • 服务器之间,相同帐号,实现免密钥登录
  • 给自己的博客网站加上酷炫的初音未来音乐游戏?
  • 软件开发学习的5大技巧,你知道吗?
  • 深入浏览器事件循环的本质
  • 掌握面试——弹出框的实现(一道题中包含布局/js设计模式)
  • 国内唯一,阿里云入选全球区块链云服务报告,领先AWS、Google ...
  • 小白应该如何快速入门阿里云服务器,新手使用ECS的方法 ...
  • ​Distil-Whisper:比Whisper快6倍,体积小50%的语音识别模型
  • # 数据结构
  • # 睡眠3秒_床上这样睡觉的人,睡眠质量多半不好
  • #ifdef 的技巧用法
  • #我与Java虚拟机的故事#连载01:人在JVM,身不由己
  • (1)(1.8) MSP(MultiWii 串行协议)(4.1 版)
  • (Python第六天)文件处理
  • (二)fiber的基本认识
  • (二)WCF的Binding模型
  • (附源码)ssm高校社团管理系统 毕业设计 234162
  • (附源码)计算机毕业设计SSM基于java的云顶博客系统
  • (十七)Flask之大型项目目录结构示例【二扣蓝图】
  • (算法设计与分析)第一章算法概述-习题
  • (译) 函数式 JS #1:简介