![JS数组[2, 5, 2, 5, 10, 12],如何循环打印 （2, 5, 10, 12） 不要打印重复的值，这个循环怎么写。](/aiimages/JS%E6%95%B0%E7%BB%84%5B2%2C+5%2C+2%2C+5%2C+10%2C+12%5D%2C%E5%A6%82%E4%BD%95%E5%BE%AA%E7%8E%AF%E6%89%93%E5%8D%B0+%EF%BC%882%2C+5%2C+10%2C+12%EF%BC%89+%E4%B8%8D%E8%A6%81%E6%89%93%E5%8D%B0%E9%87%8D%E5%A4%8D%E7%9A%84%E5%80%BC%EF%BC%8C%E8%BF%99%E4%B8%AA%E5%BE%AA%E7%8E%AF%E6%80%8E%E4%B9%88%E5%86%99%E3%80%82.png)
不得不说，vite 是真滴强，速度比起webpack 快了好几倍，用过就真的回不去了。本次的实践是实现一个常见的后台管理系统，细节会尽量跳过，只集中在路由上面去展示和记录。
首先整个页面就是一级路由，通常会有登录页，报错页，主页之间的切换，这里也是做路由切换动画的主要地方。当顶部有导航菜单的时候红色框就是二级路由，以此类推绿色框就是三级路由。
创建好vue3项目的第一步就是安装vue-router ,因为vite 默认并没有安装的。参考官网： 安装 | Vue Router (vuejs.org)
然后在src 目录下创建router目录，并添加2个文件index.js,routes.js.
这里就要画重点了。因为vue3的过度动画transition组件跟vue2比变化还是比较大的。主要是以下的2各方面：
1.transition组件在vue 2 中是作为父级包裹路由router-view 的，到了vue3就反过来了
2.动画类名发生了一点变化，开始和结束变成了from 和 to ，所以不能直接吧vue2的过度动画复制过来，需要做一些改动。
Boostrap:
Vue.js:
首先先对要画的网页进行一个原型设计，由于是公司的主页，因此最主要的功能就是介绍这个公司的业务还有一些新闻，在初步设计后，我的原型图大致为：
接着就可以开始尝试用boostrap 教程 和Vue.js来实现。
1、首先我们在 <head>中先引入boostrap和Vue
.js，其中顺序不要变：
2、 顶端文字跑马灯效果：
然后在CSS样式中，设置 news 的 float 和 width :
最后在js中写跑马灯的实现，用定时器 timer 来计时滚动，判断复制的信息是否到达 box 的最左边来进行无限循环。
3、 导航栏
接着用boostrap来实现一个导航栏，导航栏一般放在页面的顶部。
我们可以使用 navbar 类来创建一个标准的导航栏，后面紧跟: navbar-expand-xl|lg|md|sm 类来创建响应式的导航栏 (大屏幕水平铺开，小屏幕垂直堆叠)。导航栏上的选项可以使用 <ul>元素并添加 class= navbar-nav 类； 然后在 <li>元素上添加 nav-item 类， <a> 元素上使用 nav-link 类；
导航栏可以用 bg-dark 和 navbar-dark 来设置导航的样式：
其中， navbar-brand 类用于显示品牌logo，如果使用图片，可以使用 navbar-brand 类来设置图片自适应导航栏:
效果如图：
4、 轮播图片 ：
查阅Boostrap教程，大概了解到有这几个类：
实现效果如图：
5、 网格
我们可以结合网格和 Bootstrap4 的 .card 与 .card-body 类来创建一个简单的卡片：
实现效果如图：
6、 折叠
实现效果如图：
7、 链接列表组
实现效果如下：
8、最后再增加一个页尾，然后完善下就完成了一个公司页面：
页尾效果如图：
整个网页最后的实现效果为：
[图片上传失败...(image-6307a3-1628321072949)]
1、Boostrap和vue.js提供的组件很丰富而且实现起来很容易，值得深入学习。
2、vue.js还需要再深入学习下，在这里只用到了一点点。
