核心内容摘要
阿里云短信与语音通知服务实战指南
前言第1课已完成Vue3开发环境搭建与项目结构认知本课将聚焦Vue3核心应用的创建流程掌握createApp函数与mount方法的使用逻辑理解单文件组件的基础结构最终实现一个可独立运行的自定义Vue3应用为后续指令、响应式数据的学习奠定基础。
Vue3应用创建的核心createApp函数createApp是Vue3创建应用实例的核心函数该函数接收根组件选项对象作为参数返回一个应用实例所有与应用相关的配置、挂载操作均基于该实例完成。
基本语法// 从Vue包中解构出createApp函数import{createApp}fromvue// 定义根组件的基础配置对象constappcreateApp({// data函数返回组件的初始数据后续可在模板中直接使用data(){return{content:Vue3应用创建示例}}})核心说明createApp函数需从vue包中显式导入这是Vue3模块化设计的核心体现传入的对象为根组件的基础配置data函数必须返回一个对象用于存储组件的响应式数据应用实例创建后不会自动渲染需通过mount方法完成挂载。
应用挂载mount方法的使用规则mount方法用于将创建好的Vue应用实例挂载到指定DOM节点上挂载成功后Vue会接管该DOM节点内部的所有渲染逻辑。
基本语法// 将应用实例挂载到id为app的DOM节点上app.mount(#app)关键规则mount方法的参数可为有效的CSS选择器id、class或真实的DOM元素对象一个Vue应用实例只能挂载一次重复调用mount方法会抛出警告挂载的DOM节点需提前在index.html中定义如div idapp/div挂载完成后mount方法会返回根组件实例可用于后续调试。
完整入口文件示例main.jsmain.js是Vue3项目的入口文件应用创建与挂载逻辑均在此完成完整代码如下// src/main.js// 导入createApp函数与根组件Appimport{createApp}fromvueimportAppfrom./App.vue// 创建应用实例constappcreateApp(App)// 挂载到index.html中的#app节点app.mount(#app)
Vue3单文件组件SFC的核心结构Vue3的单文件组件.vue后缀是开发的核心载体一个完整的单文件组件包含template、script、style三个核心部分各部分分工明确且遵循固定规范。
1 核心结构拆解!-- src/App.vue -- template !-- 模板部分页面渲染的HTML结构必须包含且仅能有一个根元素 -- div classapp-container /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
2 各部分核心说明template负责页面结构渲染仅支持Vue语法扩展的HTML且必须有唯一根元素script负责组件逻辑通过export default导出组件配置对象包含data、methods等核心选项style负责组件样式scoped属性为可选添加后样式仅作用于当前组件避免全局样式污染。
实战创建并运行自定义Vue3应用基于第1课创建的my-vue3-demo项目修改核心文件实现自定义内容展示步骤1修改App.vue文件替换原有内容编写自定义模板、脚本与样式!-- src/App.vue -- template div classcustom-app h1/h1 p/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:
6; } /style步骤2启动开发服务器在项目根目录执行终端命令npmrun dev步骤3验证运行结果打开终端输出的Local地址如http://
127.
0.
1:5173/页面会显示自定义的标题与描述文本样式与代码中定义的一致说明应用创建与挂载成功。
开发服务器核心特性热更新热更新是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’。