首页 前端知识 如何在html中使用Vue3

如何在html中使用Vue3

2024-01-31 12:01:54 前端知识 前端哥 145 695 我要收藏

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

运行查看效果

image-20231013163607306

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>

运行查看效果

image-20231013163638791

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>

运行查看效果

image-20231013163826221

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>

运行查看效果

image-20231013170717714

三、最后

我是半月,你我一同共勉!!!

转载请注明出处或者链接地址:https://www.qianduange.cn//article/905.html
标签
评论
会员中心 联系我 留言建议 回顶部
复制成功!