企业官网建设流程全解析

前言

第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>

步骤2：启动开发服务器

在项目根目录执行终端命令：

npmrun dev

步骤3：验证运行结果

打开终端输出的Local地址（如http://127.0.0.1:5173/），页面会显示自定义的标题与描述文本，样式与代码中定义的一致，说明应用创建与挂载成功。

5. 开发服务器核心特性：热更新

热更新是Vite开发服务器的核心特性，当修改.vue文件并保存后，浏览器页面会自动更新，无需手动刷新，且不会丢失页面状态。

工作原理（简化版）

Vite会监听项目文件的变化，当检测到.vue文件修改时，仅重新编译修改的文件，而非整个项目，因此更新速度远快于传统构建工具。

使用注意事项

• 热更新仅在开发环境（npm run dev）生效，生产环境（npm run build）无此特性；
• 修改main.js、index.html等核心文件时，可能触发页面全量刷新，属于正常现象；
• 若热更新失效，可检查终端是否有报错，或重启开发服务器。

6. 常见问题排查

问题1：启动项目后页面空白

• 检查main.js中mount方法的选择器是否与index.html中的DOM节点id一致；
• 检查App.vue的template是否有且仅有一个根元素；
• 打开浏览器控制台（F12）查看报错信息，根据提示定位问题。

问题2：终端提示“module not found”

• 确认已执行npm install安装依赖，项目根目录是否存在node_modules文件夹；
• 检查import导入路径是否正确，如App.vue的导入路径是否为’./App.vue’。

总结

1. createApp函数用于创建Vue3应用实例，mount方法将实例挂载到指定DOM节点，二者是创建Vue3应用的核心步骤；
2. Vue3单文件组件包含template、script、style三部分，template需有唯一根元素，scoped属性可避免样式污染；
3. 开发服务器的热更新特性可提升开发效率，页面空白、模块缺失等问题可通过检查选择器、依赖、导入路径排查。