在html5中使用Vue3，并且使用组件形式
有的时候为了使用vue编写一些前端程序，如果直接搭建框架感觉太过庞大了。如何直接在html中使用呢？接下来详细介绍：
1）引入Vue，并创建Vue实例
<!DOCTYPE html>
<html>
<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="vue3.js"></script>
<script>
const app = Vue.createApp({
data() {
return {
message: "hello world"
}
},
});
app.mount("#app");
</script>
</body>
</html>如果我们想使用UI框架：
1、引入antd-vue的UI框架
<!DOCTYPE html>
<html>
<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="vue.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>2、引入element-plus的UI框架
<!DOCTYPE html>
<html>
<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="vue3.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>2）、重点来了，html引入其他Component
首先我们先一个vue文件：
<template>
<h2>组件A</h2>
</template>
<script>
module.exports = {
}
</script>
<style scoped>
</style>这里我们命名成text.vue。注意这边是module.exports，而不是default exports
在html中的话，我们需要引入https://unpkg.com/http-vue-loader，具体如下：
<!DOCTYPE html>
<html>
<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>
</div>
<script src="vue3.js"></script>
<script src="https://unpkg.com/http-vue-loader"></script>
<script>
const { createApp,defineAsyncComponent } = Vue
const app = Vue.createApp({
data() {
return {
message: "引入组件"
}
},
});
app.component('com-a', defineAsyncComponent(httpVueLoader('./test.vue')));
app.mount("#app");
</script>
</body>
</html>
在这里我们一定要注意：如果页面出现报错：
httpVueLoader.js提示：Unhandled error during execution of async component loader at <AsyncComponentWrapper>
或者是vue报错：Invalid or unexpected token at Function (<anonymous>)
这里我们需要在<div id="app" v-cloak></div>，加上这个就不会出现上面的报错了，作用是等待页面加载完成后在执行。
如何需要向子组件进行传值：
子组件通过props接收数据，参数用小写
// 注意：httpVueLoader.js使用props传递参数时，需要参数名称全部小写（大小写混合情况，只能通过this.$attrs获取到属性值，但是不能建立props）
<template>
<h2>{{ abc}}</h2>
</template>
<script>
module.exports = {
props: {
abc: String,
},
data: function () {
return {
};
},
created: function () {},
mounted: function () {},
methods: {},
}
</script>
<style scoped>
</style>父页面中只要在组件上添加传入参数即可：
<com-a :abc="abc"></com-a>
后续其他操作后续慢慢更新...........
