❝有时候我们写一个网页的时候，不想使用脚手架去搭建，因为太笨重，但又想使用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>
关注公众号了解更多
