4-4 4.2认知Vue项目的组成结构与自定义配置ppt课件 Vue.js基础与应用开发实战（微课版）.pptx

《4-4 4.2认知Vue项目的组成结构与自定义配置ppt课件 Vue.js基础与应用开发实战（微课版）.pptx》由会员分享，可在线阅读，更多相关《4-4 4.2认知Vue项目的组成结构与自定义配置ppt课件 Vue.js基础与应用开发实战（微课版）.pptx（22页珍藏版）》请在得力文库 - 分享文档赚钱的网站上搜索。

1、4-4 4.2 认知Vue项目的组成结构与自定义配置教学课件 Vue.js基础与应用开发实战（微课版）4.2 认知Vue项目的组成结构与自定义配置【任务4-2】创建Vite项目实现多种方式浏览与操作图片【任务描述】创建Vite项目case02-view-images，在该项目实现以下功能：（1）项目运行时，初始状态显示5张图片。（2）单击某1张图片，切换到单张图片单独放大浏览状态，在放大图片左右两侧显示【】按钮，单击【】按钮切换上一张图片，如果当前图片为第1张，单击【】按钮切换下一张图片，如果当前图片为最后一张，单击【】按钮无效。【任务4-2】创建Vite项目实现多种方式浏览与操作图片【任务描

2、述】（3）在放大图片上方显示“当前图片序号/总图片数量”，同时在放大图片下方显示【放大】、【缩小】、【还原】按钮以及图片旋转等操作按钮，如图4-12所示。图图4-12 图片操作按钮图片操作按钮【任务4-2】创建Vite项目实现多种方式浏览与操作图片【任务描述】图片的缩放、切换、旋转等操作通过一个专用插件实现，该插件index.vue存放在view-images文件夹下，供程序调用。由于教材篇幅限制，该插件的程序代码本任务不再介绍，请自行打开对应的文件，分析代码。项目case02-view-images启动成功后，打开浏览器，在地址栏中输入网址：http:/localhost:3000/，按【E

3、nter】键，即可看到如图4-13所示页面内容。图图4-13 项目项目case02-view-images的浏览结果的浏览结果【任务4-2】创建Vite项目实现多种方式浏览与操作图片【任务描述】单击某一张图片，图片会处于放大浏览状态，如图4-14所示。图图4-14 图片处于放大浏览状态图片处于放大浏览状态【任务实施】1准备项目环境（1）先要确保本机所用的Node.js版本=12.x.0，在命令行使用node-v就可以查看node的版本。（2）全局安装create-vite-app。2开始创建Vite项目先进入创建Vite项目的文件夹，然后在命令行中输入以下命令创建Vite项目：npm init

4、 vitejs/app 或者 yarn create vitejs/app按照提示信息进行操作，首先输入Vite项目名称，然后选择framework和variant，即可完成Vite项目的创建。2开始创建Vite项目先进入创建Vite项目的文件夹，然后在命令行中输入以下命令创建Vite项目：npm init vitejs/app 或者 yarn create vitejs/app按照提示信息进行操作，首先输入Vite项目名称，然后选择framework和variant，即可完成Vite项目的创建。3安装项目依赖项在命令行中输入以下命令安装项目依赖项：cd case02-view-imagesn

5、pm install4初次启动Vite项目在命令行中输入以下命令初次启动Vite项目：npm run dev该命令执行完毕，Vite项目启动成功会出现一些以下信息：vite v2.6.14 dev server running at:Local:http:/localhost:3000/Network:use-host to expose ready in 471ms.打开浏览器，在地址栏中输入网址：http:/localhost:3000/，按【Enter】键，即可看到初始页面的内容。5完善Vite项目的文件夹与准备图片等资源在文件夹src中创建子文件夹view-images，在文件夹vie

6、w-images中创建子文件images。将待浏览的图片文件拷贝到文件夹srcassets中，将操作图片的按钮小图片拷贝到文件夹srcview-imagesimages中。6创建文件与编写程序代码（1）完善vite.config.js文件的代码vite.config.js文件完善后的代码如下：const path=require(path)import defineConfig from viteimport vue from vitejs/plugin-vue/https:/vitejs.dev/config/6创建文件与编写程序代码 export default defineConfig(

7、plugins:vue(),build:lib:entry:path.resolve(_dirname,src/view-images/index.js),name:view-images ,outDir:dist )（2）创建vite.config.docs.js文件与编写代码在本项目根文件夹中创建vite.config.docs.js文件，在该文件中输入以下代码：const path=require(path)import defineConfig from viteimport vue from vitejs/plugin-vue/https:/vitejs.dev/config/exp

8、ort default defineConfig(plugins:vue(),base:/view-images/,build:outDir:docs )（3）完善index.html文件的代码扫描二维码查看【电子活页4-14】中网页index.html的代码或者从本单元配套的教学资源中打开对应的文档查看相应内容。（4）查看src文件夹中main.js文件的初始代码src文件夹中main.js文件的初始代码如下：import createApp from vueimport App from./App.vuecreateApp(App).mount(#app)（5）完善src文件夹中App.v

9、ue文件的初始代码扫 描 二 维 码 查 看【电 子 活 页 4-15】中 src文 件 夹 下App.vue文件的代码或者从本单元配套的教学资源中打开对应的文档查看相应内容。（6）在srcview-images文件夹中创建index.js文件并编写代码在srcview-images文件夹中创建index.js，在该文件中输入以下代码：import createVNode from vue/runtime-coreimport render from vue/runtime-domimport constructor from./index.vueconst viewImages=(optio

10、ns=)=const container=document.createElement(div)container.className=image-viewer-container const vm=createVNode(constructor,options )vm.props.onDestroy=()=render(null,container)render(vm,container)document.body.appendChild(container.firstElementChild)export default viewImages在srcview-images文件夹下index.js中主要引入了同级文件index.vue，创建一个临时节点，将缩放的图片置于该临时节点中，实现缩放、切换与旋转等操作，这些操作的实现代码在index.vue中。7启动项目与浏览运行结果在命令行中执行以下命令，启动项目case02-view-images。npm run dev项目case02-view-images启动成功后，打开浏览器，在地址栏中输入网址：http:/localhost:3000/，按【Enter】键，即可看到页面内容。单击某一张图片，图片会处于放大浏览状态。经测试全部实现了要求的功能。快乐学习！高效学习！快乐学习！高效学习！祝学习进步！祝学习进步！