如何在html中使用Vue3
一、介绍
作为一名后端人员，有时候会写一点前端代码配合使用。
但比较轻量，没有必要使用脚手架创建工程，故此我在html中使用就好了。
正如那句话，适合自己的才是最好的。
二、代码
1）引入Vue，并创建Vue实例
在官网上，已经讲得很清楚了，我们可以这样使用
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
| <!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框架
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
| <!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框架
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
| <!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文件，作为我们的组件
1
2
3
4
5
6
7
8
9
10
11
12
13
| <template>
<h2>组件A</h2>
</template>
<script>
module.exports = {
}
</script>
<style scoped>
</style>
|
1
2
3
4
5
6
7
8
9
10
11
12
13
| <template>
<h2>组件B</h2>
</template>
<script>
module.exports = {
}
</script>
<style scoped>
</style>
|
注意这边是module.exports，而不是default exports
在html中的话，我们需要引入https://unpkg.com/http-vue-loader，具体如下
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
| <!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>
|
运行查看效果
三、最后
我是半月，你我一同共勉！！！
