打赏
啥脚手架，啥npm，还是太复杂，针对只想在前端用vue的来说。
基础H5
<!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>
<div id="app">{{ message }}</div>
<script>
const { createApp, ref } = Vue
createApp({
setup() {
const message = ref('Hello vue!')
return {
message
}
}
}).mount('#app')
</script>
压缩过的js
https://unpkg.com/vue@3/dist/vue.global.prod.js
有些引用有所不同，效果一样。
<script>
const app = Vue.createApp({
data() {
return {
message: "HelloWorld!"
}
},
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>
详细一点
axios.get("/")
.then(function(response){
console.log(response.data);
})
.catch(function(error){
console.log(error);
});
axios.post("/",{
name:"ease",
email:"ease@scwy.net"
})
.then(function(response){
console.log(response.data);
})
.catch(function(error){
console.log(error);
});