Vue3 系列教程（二）创建第一个 Vue 应用

前言

第1课已完成Vue3开发环境搭建与项目结构认知，本课将聚焦Vue3核心应用的创建流程，掌握createApp函数与mount方法的使用逻辑，理解单文件组件的基础结构，最终实现一个可独立运行的自定义Vue3应用，为后续指令、响应式数据的学习奠定基础。

1. Vue3应用创建的核心：createApp函数

createApp是Vue3创建应用实例的核心函数，该函数接收根组件选项对象作为参数，返回一个应用实例，所有与应用相关的配置、挂载操作均基于该实例完成。

基本语法

// 从Vue包中解构出createApp函数import{createApp}from'vue'// 定义根组件的基础配置对象constapp=createApp({// data函数返回组件的初始数据，后续可在模板中直接使用data(){return{content:'Vue3应用创建示例'}}})

核心说明

createApp函数需从vue包中显式导入，这是Vue3模块化设计的核心体现；
传入的对象为根组件的基础配置，data函数必须返回一个对象，用于存储组件的响应式数据；
应用实例创建后不会自动渲染，需通过mount方法完成挂载。

2. 应用挂载：mount方法的使用规则

mount方法用于将创建好的Vue应用实例挂载到指定DOM节点上，挂载成功后，Vue会接管该DOM节点内部的所有渲染逻辑。

基本语法

// 将应用实例挂载到id为app的DOM节点上app.mount('#app')

关键规则

mount方法的参数可为有效的CSS选择器（id、class）或真实的DOM元素对象；
一个Vue应用实例只能挂载一次，重复调用mount方法会抛出警告；
挂载的DOM节点需提前在index.html中定义，如<div id="app"></div>；
挂载完成后，mount方法会返回根组件实例，可用于后续调试。

完整入口文件示例（main.js）

main.js是Vue3项目的入口文件，应用创建与挂载逻辑均在此完成，完整代码如下：

// src/main.js// 导入createApp函数与根组件Appimport{createApp}from'vue'importAppfrom'./App.vue'// 创建应用实例constapp=createApp(App)// 挂载到index.html中的#app节点app.mount('#app')

3. Vue3单文件组件（SFC）的核心结构

Vue3的单文件组件（.vue后缀）是开发的核心载体，一个完整的单文件组件包含template、script、style三个核心部分，各部分分工明确且遵循固定规范。

3.1 核心结构拆解

<!-- src/App.vue --> <template> <!-- 模板部分：页面渲染的HTML结构，必须包含且仅能有一个根元素 --> <div class="app-container"> {{ content }} </div> </template> <script> // 脚本部分：组件的逻辑代码，通过export default导出组件配置 export default { // 定义组件的响应式数据 data() { return { content: '这是第一个Vue3单文件组件' } } } </script> <style scoped> /* 样式部分：组件专属样式，scoped属性限制样式仅作用于当前组件 */ .app-container { font-size: 16px; color: #333; margin: 20px; } </style>

3.2 各部分核心说明

template：负责页面结构渲染，仅支持Vue语法扩展的HTML，且必须有唯一根元素；
script：负责组件逻辑，通过export default导出组件配置对象，包含data、methods等核心选项；
style：负责组件样式，scoped属性为可选，添加后样式仅作用于当前组件，避免全局样式污染。

4. 实战：创建并运行自定义Vue3应用

基于第1课创建的my-vue3-demo项目，修改核心文件实现自定义内容展示：

步骤1：修改App.vue文件

替换原有内容，编写自定义模板、脚本与样式：

<!-- src/App.vue --> <template> <div class="custom-app"> <h1>{{ title }}</h1> <p>{{ description }}</p> </div> </template> <script> export default { data() { return { title: 'Vue3基础应用', description: '通过createApp与mount创建的第一个自定义应用' } } } </script> <style scoped> .custom-app { width: 80%; margin: 0 auto; padding: 20px; border: 1px solid #eee; border-radius: 8px; } h1 { color: #42b983; font-size: 24px; } p { color: #666; line-height: 1.6; } </style>