本篇文章基于vscode的一篇轮播图，vue和node的版本如下
首先创建一个vue项目，创建完之后在vs里面打开目录是这样的
打开App.vue文件
我们把template里面的东西都删了，改成
结果呈现
之后我们的app就不动了，用路由动态展现界面，那先讲一下路由吧，让我们打开router下面的index.js，把红色部分删掉，改成
有些朋友不知道路由做什么用的，就是我们的项目肯定不止一个界面，我们基本上是要点击一些按键跳转到其他界面的，路由就是存储你每个界面的网址，然后每个网址绑定对应按键，之后点击按键会直接呈现对应路由存的网址，path对应是你浏览器上方链接后缀（下图红色部分）
name对应值就是你要绑定按钮时后用的名字（实在不理解类比id的作用，name不能重复）
以后我们都是在view里面创建vue界面，每写一个我们就在路由里面添加他的信息，因为我们一开始进入vue项目，系统默认后缀为“/”，所以默认展示路径为“/”对应的链接，我这里是在view里面新建一个turnpicture.vue项目，这篇主要讲轮播图，所以我把默认路径改成我新建的项目了，切记，你放在路由里面的界面一定要有东西，如果空空白白会报错
我们先看一下最后图片样式吧
图片会自动切换，按左右会直接切界面，按下面小圆圈也会跳转对应界面，小圆圈会随着界面切换也会切换变大颜色变白，当我们鼠标按住不动的时候，图片停止切换，当我们按住的同时滑动鼠标或者松开鼠标时候图片继续轮播
首先我们说图片存储，vue项目里面有两个地方可以存照片，一个是public目录下，一个是assets目录下，public下面多用于单纯图片运用，我这里是放在public 下面，放哪都行
图片不能直接拖，要到对应文件public下面放置
然后就可以进入主题了，打开TurnPicture.vue，写主体
最外层写一个盒子（div）把要的装在盒子（红色区域里面）之后以这个盒子为坐标点，其他的内容更具这个盒子确定位置
我们这个轮播图是放映四张照片，但是需要加上第五张照片（和第一张照片一样），否则轮播图会有一段呈现空白，所以我们加五张照片（橙色区域）
下面黄色区域就是下面四个点的雏形
白色区域是左右按键的生成雏形代码
再来我们把style写了，最后再写逻辑代码
最后就到了最最最激动人心的逻辑环节了
727
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
