IT评测·应用市场-qidao123.com

标题: vue3 axios ant-design-vue cdn的方式使用 [打印本页]
作者: 南七星之家    时间: 2024-9-21 00:19
标题: vue3 axios ant-design-vue cdn的方式使用
1、vue3
快速上手 | Vue.js
  1. <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  3. <div id="app">{{ message }}</div>
  5. <script>
  6.   const { createApp, ref } = Vue
  8.   createApp({
  9.     setup() {
  10.       const message = ref('Hello vue!')
  11.       return {
  12.         message
  13.       }
  14.     }
  15.   }).mount('#app')
  16. </script>
复制代码
2、ant-design-vue 4.2.3
  1. <script src="https://unpkg.com/vue@3.4.27/dist/vue.global.prod.js"></script>
  2.         <script src="https://unpkg.com/dayjs/dayjs.min.js"></script>
  3.         <script src="https://unpkg.com/dayjs/plugin/customParseFormat.js"></script>
  4.         <script src="https://unpkg.com/dayjs/plugin/weekday.js"></script>
  5.         <script src="https://unpkg.com/dayjs/plugin/localeData.js"></script>
  6.         <script src="https://unpkg.com/dayjs/plugin/weekOfYear.js"></script>
  7.         <script src="https://unpkg.com/dayjs/plugin/weekYear.js"></script>
  8.         <script src="https://unpkg.com/dayjs/plugin/advancedFormat.js"></script>
  9.         <script src="https://unpkg.com/dayjs/plugin/quarterOfYear.js"></script>
  10.         <link type="text/css" href="https://unpkg.com/ant-design-vue@4.2.3/dist/reset.css" media="screen" rel="stylesheet">
  11.         <script src="https://unpkg.com/ant-design-vue@4.2.3/dist/antd.min.js"></script>
  12.         <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
复制代码
  1. import { DatePicker } from 'ant-design-vue';
  2. app.use(DatePicker);
复制代码
3、template
  1. <body class="bg">
  2.         <div id="app">
  3.     </div>
  4. </body>
复制代码
  1. <script>
  2.                 Object.assign(window, Vue);
  3.                 const vue3App = {
  5.                         setup() {
  6.                                 const msg = ref(''); //信息
  8.                                 onMounted(() => {
  9.                                         console.log(window.location.search);
  11.                                 });
  13.                                 function test() {
  14.                                         // 发送 POST 请求
  15.                                         axios({
  16.                                                 method: 'post',
  17.                                                 url: '/url换成自己的',
  18.                                                 data: {
  19.                                                         code: '0',
  20.                                                         message: 'success',
  21.                                                         type: 'opt',
  22.                                                         result: 'success',
  23.                                                         uid: uid.value,
  24.                                                         msgid: msgid.value,
  25.                                                 }
  26.                                         }).then(function (response) {
  27.                                                 console.log(response);
  28.                                                 msg.value = response.data.message;
  30.                                         })
  31.                                                 .catch(function (error) {
  32.                                                         console.log(error);
  33.                                                 });
  34.                                 }
  35.                                 // 返回值会暴露给模板和其他的选项式 API 钩子
  36.                                 return {
  37.                                         msg,
  38.                                         btnClick() {
  39.                                                 //console.log(msg.value);
  40.                                                 test();
  41.                                         },
  42.                                 }
  43.                         },
  44.                 }
  45.                 //初始化
  46.                 const app = createApp(vue3App);
  47.                 app.use(antd);
  48.                 app.mount("#app");
  50.         </script>
  51.         <style>
  52.                 .bg {
  53.                         background-color: rgb(213, 213, 213);
  54.                 }
  56.                 .margintop {
  57.                         margin-top: 300px;
  58.                 }
  60.                 .marginbottom {
  61.                         margin-bottom: 30px;
  62.                 }
  63.         </style>
复制代码


免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。



欢迎光临 IT评测·应用市场-qidao123.com (https://dis.qidao123.com/) Powered by Discuz! X3.4