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

Python涛哥2025-05-28 18:44

28. Vue应用

应用实例

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

main.js

js 复制代码

import {createApp} from 'vue'
import App from './App.vue'

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

根组件

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

js 复制代码

import {createApp} from 'vue'

// 从一个单文件组件中导入根组件
import App from './App.vue'

const app = createApp(App)

app.mount('#app')

挂载应用

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

js 复制代码

app.mount('#app')

#app --> index.html

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.Html
				2.CSS
				3.JavaScript
				4.Image
				
				构建工具：Webpack  vite
		-->
    <div id="app"></div>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>

公共资源

在src目录下的assets文件夹的作用就是存放公共资源，例如：图片、公共CSS或者字体图标等

Vue教程至此结束。当然，vue要学的还有很多，比如前后端分离等等。自行扩展学习吧

多练习为主！