如何在html中使用Vue3
一、介绍
作为一名后端人员,有时候会写一点前端代码配合使用。
但比较轻量,没有必要使用脚手架创建工程,故此我在html
中使用就好了。
正如那句话,适合自己的才是最好的。
二、代码
1)引入Vue,并创建Vue实例
在官网上,已经讲得很清楚了,我们可以这样使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>html使用vue</title>
</head>
<body>
<div id="app" v-cloak>
<h1>{{ message }}</h1>
</div>
<script src="js/vue@3.3.0.js"></script>
<script>
const app = Vue.createApp({
data() {
return {
message: "hello world"
}
},
});
app.mount("#app");
</script>
</body>
</html>
运行查看效果
2)引入antd-vue的UI框架
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>引入antd-vue</title>
<link rel="stylesheet" href="css/antd@4.0.3.css">
</head>
<body>
<div id="app" v-cloak>
<a-button type="primary">{{ message }}</a-button>
</div>
<script src="js/vue@3.3.0.js"></script>
<script src="https://unpkg.com/dayjs/dayjs.min.js"></script>
<script src="https://unpkg.com/dayjs/plugin/customParseFormat.js"></script>
<script src="https://unpkg.com/dayjs/plugin/weekday.js"></script>
<script src="https://unpkg.com/dayjs/plugin/localeData.js"></script>
<script src="https://unpkg.com/dayjs/plugin/weekOfYear.js"></script>
<script src="https://unpkg.com/dayjs/plugin/weekYear.js"></script>
<script src="https://unpkg.com/dayjs/plugin/advancedFormat.js"></script>
<script src="https://unpkg.com/dayjs/plugin/quarterOfYear.js"></script>
<script src="js/antd.min@4.0.3.js"></script>
<script>
const app = Vue.createApp({
data() {
return {
message: "hello world"
}
},
});
app.use(antd);
app.mount("#app");
</script>
</body>
</html>
运行查看效果
3)引入element-plus的UI框架
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>引入elementPlus</title>
<link rel="stylesheet" href="css/element@2.3.14.css">
</head>
<body>
<div id="app">
<el-button>{{ message }}</el-button>
</div>
<script src="js/vue@3.3.0.js"></script>
<script src="js/element@2.3.14.js"></script>
<script>
const app = Vue.createApp({
data() {
return {
message: "按钮"
}
}
});
app.use(ElementPlus);
app.mount("#app");
</script>
</body>
</html>
运行查看效果
4)html引入其他Component
在刚开始的时候,单页面写的很快乐,但是东西一多,我就看着烦人。
我就在想,能不能引入其他的vue
文件,作为组件使用。
一查,果然有,那就很开心了,可以这样写。
我们先写两个vue
文件,作为我们的组件
<template>
<h2>组件A</h2>
</template>
<script>
module.exports = {
}
</script>
<style scoped>
</style>
<template>
<h2>组件B</h2>
</template>
<script>
module.exports = {
}
</script>
<style scoped>
</style>
注意这边是module.exports
,而不是default exports
在html
中的话,我们需要引入https://unpkg.com/http-vue-loader
,具体如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>html使用vue</title>
</head>
<body>
<div id="app" v-cloak>
<h1>{{ message }}</h1>
<com-a></com-a>
<com-b></com-b>
</div>
<script src="js/vue@3.3.0.js"></script>
<script src="https://unpkg.com/http-vue-loader"></script>
<script>
const { defineAsyncComponent } = Vue
const app = Vue.createApp({
data() {
return {
message: "引入组件"
}
},
});
app.component('com-a', defineAsyncComponent(httpVueLoader('./vue/ComA.vue')));
app.component('com-b', defineAsyncComponent(httpVueLoader('./vue/ComB.vue')));
app.mount("#app");
</script>
</body>
</html>
运行查看效果
三、最后
我是半月,你我一同共勉!!!