《Vue.js3Web开发案例教程（在线实训版）》 课件 10 单文件组件.pptx

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脚手架工具项目目录结构DEMO（投票页面）单页应用和多页应用DEMO

请看第11章——

AJAX与axios（上）