当前位置：首页 > news >正文

前端流行框架Vue3教程：28. Vue应用

news 来源：原创 2025/5/26 5:30:10

28. Vue应用

在这里插入图片描述

应用实例
每个 Vue 应用都是通过 createApp函数创建一个新的应用实例

main.js

import {createApp} from 'vue'
import App from './App.vue'// app:Vue的实例对象
// 在一个Vue项目中，有且只有一个Vue的实例对象
const app = createApp(App)/* 根组件选项 */
// App:根组件
app.mount('#app')

根组件

我们传入createApp的对象实际上是一个组件，每个应用都需要一个根组件”，其他组件将作为其子组件。

import {createApp} from 'vue'// 从一个单文件组件中导入根组件
import App from './App.vue'const app = createApp(App)app.mount('#app')

挂载应用

应用实例必须在调用了.mount()方法后才会渲染出来。该方法接收一个“容器"参数，可以是一个实际的DOM元素或是一个 CSS 选择器字符串

app.mount('#app')

#app --> index.html

<!DOCTYPE html>
<html lang=""><head><meta charset="UTF-8"><link rel="icon" href="/favicon.ico"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Vite App</title></head><body><!--  浏览器可执行文件：1.Html2.CSS3.JavaScript4.Image构建工具：Webpack  vite--><div id="app"></div><script type="module" src="/src/main.js"></script></body>
</html>