04项目文件之间引用关系_第1页
04项目文件之间引用关系_第2页
04项目文件之间引用关系_第3页
04项目文件之间引用关系_第4页
全文预览已结束

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

课题Vue环境搭建第七节vue项目各文件引用关系及代码详解授课时间第二周教学目的通过本章的学习，使学生了解vue项目各文件引用关系。教学重点项目文件之间引用关系。教学难点项目文件之间引用关系。教学过程教学环节教学内容教学方法、手段及时间分配课前准备知识回顾学生作业分享课堂引入知识讲解内容讲解案例开发课堂分享总结【教师】发布点名，了解学生出勤情况【学生】完成点名，班长同步给老师学生的请假信息提问：1.项目的入口文件是哪个？2.项目的根组件是哪个？3.public文件夹下一般存放哪些文件？分享：选出3组进行ES6语法讲解。每个组分享一个知识点。后续课程中会统一进行讲解。上节课我们知道了项目的各个模块作用，那么这些模块之间是如何统一合作，使得项目运行起来的呢？接下来我们要详细看一下每个文件中的内容及各个文件之间的引用关系了。第七节vue项目各文件引用关系及代码详解一、APP挂载文件index.html在项目的public文件夹中，内容非常简单，主要是将一个div标签提供给Vue创建的APP进行挂载。二、APP主文件main.js在项目的src文件夹下，该文件创建Vue的并引入所需要的插件。代码如下：引入需要的主文件和路由及状态管理文件，创建Vue实例，并使用引入的工具，最终将Vue实例挂载到ID为app的元素上。三、根组件App.vuemain.js文件把App.vue组件引入并作为根节点挂载到index.html文件的<divid=’app’></div>上，然后渲染到浏览器页面。说明：组件文件结构分为三个部分：模板（template）,脚本（script），样式（style）。代码如下：四、路由配置文件router/index.js在src/router/index.js文件中定义了用户输入的路由所对应的地址。代码内容如下：总结课程内容第一课时准备（2分钟）提问（3分钟）作业分享（15分钟）讲授（25分钟）第二课时讲解（10分钟）课堂练习：学生仿照老师的操作修改项目代码，添加样式。（20分钟）学生进行代码讲解（10分钟）总结（5分钟）课堂小结作业课堂小结：通过本次课学习，学生了解了项目中每个文件的具体作用，以及一些vue的语法和各个文件之间的引用关系。课后作业：自学Es6语法，下次课分享。完成博思第一次作业。博思平台作业教学反思同学

人人文库> 全部分类> 教育资料 > 备课教案

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论