《Vue.js3Web开发案例教程（在线实训版）》 课件 10 单文件组件_第1页
《Vue.js3Web开发案例教程（在线实训版）》 课件 10 单文件组件_第2页
《Vue.js3Web开发案例教程（在线实训版）》 课件 10 单文件组件_第3页
《Vue.js3Web开发案例教程（在线实训版）》 课件 10 单文件组件_第4页
《Vue.js3Web开发案例教程（在线实训版）》 课件 10 单文件组件_第5页
已阅读5页，还剩9页未读， 继续免费阅读

下载本文档

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

文档简介

vue.js

2024.7vue.js第10章

单文件组件基础知识DEMO安装VueCLI脚手架工具项目目录结构DEMO（投票页面）单页应用和多页应用DEMO第10章

单文件组件

第10章

单文件组件基础知识每一个文件都是以.vue结尾的，并由template、script和style这3个部分，分别用于定义这个组件的结构、逻辑和样式。遵循了“高内聚、低耦合”的思想，对开发效率的提升有很大的帮助。第10章

单文件组件DEMO第10章

单文件组件安装VueCLI脚手架工具安装淘宝镜像命令如下：npminstall-gcnpm--registry=安装vue-cli脚手架：cnpminstall@vue/cli-g注：生产环境中，一般会对代码进行处理：合并和压缩第10章

单文件组件VueCLIv5.0.8?Pleasepickapreset:(Usearrowkeys)>Default([Vue3]babel,eslint)Default([Vue2]babel,eslint)Manuallyselectfeatures创建完之后，进入项目目录，运行npmrunserve命令，待运行完成之后，会给出一个访问地址，用浏览器访问即可，默认是：http://localhost:8080/。注：组合键“Ctrl+C”可以终止服务器的运行。这是一个菜单，使用键盘上的方向键可以上下移动左侧的大于号，在三个选项中进行选择，默认选中的是第1个选项：Default([Vue3]babel,eslint)。我们直接按回车键确认，即可选中第1个选项。第10章

单文件组件

项目目录结构：第10章

单文件组件动手实践：投票页面第10章

单文件组件DEMO第10章

单文件组件单页应用和多页应用单页面多页面页面结构一个页面+许多模块的组件很多完整页面体验效果页面切换流畅，体验效果佳页面切换慢，网速不好的时候，体验效果很不好资源文件组件公共的资源只需要加载一次每个页面都要加载一次公共资源路由模式可以使用hash，也可以使用history普通链接跳转适用场景对体验效果和流畅度有较高要求的应用不利于SEO（搜索引擎收录，可借助服务器端渲染技术优化SEO）适用于对SEO要求较高的应用内容更新相关组件的切换，即局部更新整体HTML的切换相关成本前期开发成本较高，后期维护较为容易前期开发成本低，后期维护就比较麻烦，可能一个功能需要改很多地方第10章

单文件组件DEMO第10章

单文件组件基础知识DEMO安装VueCLI脚手架工具

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

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

最新文档

评论

0/150

提交评论