❝
有时候我们写一个网页的时候，不想使用脚手架去搭建，因为太笨重，但又想使用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>
原文始发于微信公众号（分享是个有趣的东西）：HTML如何使用Vue3、Element-plus、Axios
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/151386.html
