社区首页 >专栏 >如何在html中使用Vue3

如何在html中使用Vue3

半月无霜

发布于 2023-10-18 08:35:46

1.2K00

代码可运行

文章被收录于专栏：半月无霜半月无霜

运行总次数：0

代码可运行

如何在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>