21年前端实操项目-官网dy（你会在这里收获到不一样的细节点~）

技术栈

Vue、nuxt、less

开发思路

分为5个部分，组件抽离方式，数据用mock拦截数据模拟，后期从Vue迁移到nuxt，实现SSR服务器渲染，图片懒加载，flex布局，css样式使用less

创新

组件数据层和逻辑层分离，虽然在这个项目，逻辑处理很简单，好像没这个必要，但是考虑到以后开发复杂逻辑，这个思路很有必要去践行。

具体有记录性功能思路：

1. 下拉栏组件：

头部下拉栏组件抽离出来，一开始hover没想到直接用样式控制兄弟元素样式方式，直接用了数据驱动进行操控，不推荐，涉及到dom操作，这种类型下次直接使用样式方式控制即可，谨记。

2. 轮播图组件：

项目出现两个相似轮播图，但是小圆点位置不同，一开始分开做，后来考虑添加变量传入props进行样式控制，进而做成通用轮播图。推荐用vue做法：即v-for后v-show="currentIndex === index"这种方式，简约方便，符合vue数据驱动特色，这里有个坑点是，v-for里面的key值尽可能唯一，不能用index作为key值，其他关于特效方面可以加点transition过渡优化一下。以后类似这种可复用的，尽可能做成可复用。

3. 推荐产品组件：

搬砖组件，没什么好说，值得说的是Hover图片后有一个流光效果, 鼠标移入图片有流光滑过。

实现思路：

可以用伪元素或者DIV、i（light）作为流光，绝对定位放在左方。

.light {
    cursor: pointer;
    position: absolute;
    left: -510px；
    top: 0px;
    height: 436px;
    background-image: -moz-linear-gradient(0deg,rgba(255,255,255,0),rgba(255,255,255,0.5),rgba(255,255,255,0))
    background-image: -webkit-linear-gradient(0deg,rgba(255,255,255,0),rgba(255,255,255,0.5),rgba(255,255,255,0))
    transform: skewx(-25deg)
    -o-transform: skewx(-25deg)
    -moz-transform: skewx(-25deg)
    -webkit-transform: skewx(-25deg)
}
复制代码

需要加效果的图片（rec）:

.rec:hover .light {
    left: 305px;
    -moz-transition: 0.5s;
    -o-transition: 0.5s;
    -webkit-transition: 0.5s;
    transition: 0.5s;
}
复制代码

linear-gradient创建一个表示两种或多种颜色线性渐变的图片
-moz代表firefox浏览器私有属性
-ms代表IE浏览器私有属性
-webkit代表chrome、safari私有属性
-o代表Opera私有属性
skewX() 函数定义了一个转换，该转换将元素倾斜到二维平面上的水平方向
复制代码

4. 产品组件

产品组件也是个搬砖的开发，有几点值得注意：

有二维码和没二维码的时候，需要样式改变

可以通过数据驱动动态改变样式，边界识别这个需要做一个自定义指令,推荐使用getboundingclientrect这个api,可获取元素的大小及其相对于视口的位置。但是要考虑兼容性问题。开发这个重点注意，隐藏元素是无法获取属性值，所以折中方法是可以做一些特殊处理，先把他显示，后面再隐藏回去，这里也是一个比较坑的点。

5. 图片懒加载

简单省事就直接用Vue提供的指令vue-lazyload，下载即用即可，但是建议自己写一个自定义指令，会收获更多，细节点要敲过后才能知道原理。

主要思路：

第一种是绑定scroll事件进行监听。

第二种是IntersectionObserver判断图片是否在可视区域。

但是IntersectionObserver这个api是有兼容性问题，所以可以两者结合，先判断是否兼容IntersectionObserver，可以用，不可以就用scroll；scroll这个点可以防抖节流优化。

6. nuxt（SSR）迁移

基础可浏览官网，nuxt.js给我感觉和Vue在目录上的改变主要是main.js,以及router缺失。

nuxt是自动路由化，这个就是 nuxt 框架的独到之处，为了能实现更好的SSR渲染，它使用的是根据页面结构，所以文件名，就是路由名称。

main.js被nuxt.config.js代替。迁移过程直接在nuxt创建src目录，把相关目录拉进src中，结构参照vue即可，记得在nuxt.config.js中修改源目录配置srcDir为'src/'。

如果在vue项目中已经封装了axios，直接可以把vue中写的关于api的js都挪到plugins下，把export default axios抛出，再在nuxt.config.js下按照扩展的配置在plugins中添加就可以正常使用; 或者用nuxt提供的asyncData发送请求。迁移完正常启动即可，代码就是Vue的代码。

总结

1 开发时候总体思路很重要，先确定大致框架，然后怎么搭建，用什么技术栈,用什么组件，怎么抽离，通用，传的参数等，需要先构思好，不建议边做边想，后期重构会很难受。
2 能用vue提供的方法尽量别用原生，不然用vue框架意义不大。
3 v-for不推荐用index作为key值。
4 轮播图考虑复用性问题，同时不应该为了抽组件而抽组件，有些地方没要抽出来就不需要抽，同时轮播图定时器在生命周期销毁时候清除。
5 封装组件可以将数据和逻辑分开，方便操作。
6 自定义指令可以统一在index管理，丢进一个对象，然后再统一注册。
7 命名规范很重要，无论是组件名或者样式名，建议统一规范，这个可以看个人风格。
8 注释会很重要，提高可读性，给予阅读者遍历，毕竟不同人风格不同，你不备注，别人可能看不懂。
9 scoped下less样式建议不要用标签名，渲染效果不佳，建议给个class。
10 css样式规范也很重要，一些方位margin、paddinig、width、height建议放在前面，会提高那么点速度。
复制代码

如果对你有帮助，希望能够获得你的点赞认可～谢谢。