vue3 import 引入html页面
时间: 2023-07-27 10:13:10 浏览: 162
vue3项目中跳转页面隐藏TabBar的方法
Vue3 是一个 JavaScript 框架,通常我们使用它来构建单页应用程序(SPA)。如果你想在 HTML 页面中使用 Vue3,你需要先在 HTML 文件中引入 Vue3 库,然后创建 Vue 实例以及其它组件。
以下是一个基本的示例:
1. 在 HTML 文件中引入 Vue3 库
```html
<script src="https://unpkg.com/vue@next"></script>
```
2. 创建 Vue 实例
```html
<div id="app">
{{ message }}
</div>
<script>
const app = Vue.createApp({
data() {
return {
message: "Hello, Vue3!"
}
}
})
app.mount('#app')
</script>
```
以上代码中,我们通过 `Vue.createApp` 方法创建了一个 Vue 实例,并将其挂载到了 `#app` 元素上。在实例中,我们定义了一个 `message` 属性,然后在 HTML 代码中通过双花括号插值表达式 `{{ message }}` 将其渲染出来。
希望这能帮助到你!
阅读全文