首页 前端知识 HTML如何使用Vue3、Element-plus、Axios

HTML如何使用Vue3、Element-plus、Axios

2024-02-25 11:02:58 前端知识 前端哥 718 362 我要收藏

有时候我们写一个网页的时候,不想使用脚手架去搭建,因为太笨重,但又想使用vue3去实现,怎么办?

下面就讲一讲如何实现!

基本结构

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网页</title>
</head>
<body>
</body>
</html>

引入vue3

...
 <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
...

使用vue3

具体vue3语法请看官网

注意:setup语法糖,无法在html里面使用,请使用 setup() 函数 去处理

<!-- 不支持 -->
<script setup>
   // doingsthing
</script>

错误写法示例

错误写法示例

<!-- 正确用法 -->
...

<body>
<div id="app"></div>
</body>
...
<script>
 const { createApp } = Vue
 const APP = createApp({
    setup(){}
  })
 APP.mount('#app')
</script>

使用UI框架

这里以element-plus为例

引入
...
<!-- 全局样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css" />
<!-- UI -->
<script src="https://unpkg.com/element-plus"></script>
...
基本使用
...
<div id="app">
    <el-input v-model="value"  clearable />
</div>
...

<script>
 const { createApp, ref } = Vue
 const APP = createApp({
    setup(){
      const value = ref(null)
      return {
          value
      }
    }
  })
 APP.use(ElementPlus).mount('#app')
</script>

交互
...
<div id="app">
    <el-button  type="primary" @click="handle">提示</el-button>
</div>
...

<script>
 const { createApp, ref } = Vue
 const APP = createApp({
    setup(){
      const handle = () => {
          ElementPlus.ElMessage({
             message'点击!',
             type'success',
          })
      }
      return {
          handle
      }
    }
  })
 APP.use(ElementPlus).mount('#app')
</script>

使用组件
...
<script src="//unpkg.com/@element-plus/icons-vue"></script>

...
<div id="app">
    <el-button icon="edit"  type="primary" @click="handle">提示</el-button>
</div>
...

<script>
 const { createApp, ref } = Vue
 const APP = createApp({
    setup(){
      const handle = () => {
          ElementPlus.ElMessage({
             message'点击!',
             type'success',
          })
      }
      return {
          handle
      }
    }
  })
  
 APP.component('edit',ElementPlusIconsVue.Edit)
 APP.use(ElementPlus).mount('#app')
</script>

发送请求

...
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
...

<script>
 ...
  axios.post(url,options }
 ...
</script>

关注公众号了解更多

关注公众号了解更多

转载请注明出处或者链接地址:https://www.qianduange.cn//article/2658.html
标签
评论
会员中心 联系我 留言建议 回顶部
复制成功!