接触的第一个vue项目

Gemini 发布于2019-08-26 14:04 / 998人阅读

摘要：序言刚来杭州的时候，是两个人一起来的。后来一个回家当老师，一个留在了杭州。想起那时，在慕课买的第一课程，囫囵吞枣的看完了。现在回过头来看看，这个临时抱佛脚的启蒙项目，真的还有不少的收获。滚动视图的位置缓存路由元对象。

序言

刚来杭州的时候，是两个人一起来的。后来一个回家当老师，一个留在了杭州。想起那时，在慕课买的第一课程，囫囵吞枣的看完了。勉强才找到了一份工作，今天看起来，其实还是有点难过的。唉，其实人生不就是这样吗？还是要感谢思否还有类似掘金这种前端社区，帮助我解决不少问题，直到今天，也算是入门了。
现在回过头来看看，这个临时抱佛脚的启蒙项目，真的还有不少的收获。漏了不少知识点，现在捡起来，总结一下。

滚动视图的位置缓存

  /*
  *@to,from 路由元对象。@savedPosition 触发H5下的 popstate，go导航 (通过浏览器的 前进/后退 按钮触发) 时才可用。
  */
   scrollBehavior(to, from, savedPosition) {
      return {
        x: 0,
        y: 0
      }
    }

这个功能只在 HTML5 history 模式下可以使用。

{ selector: string, offset? : { x: number, y: number }} (offset 只在 2.6.0+ 支持)

路由导航，可以模拟hash滚动到锚点

 if (to.hash) {
    return {
      selector: to.hash
    }
  }

kekeepAlive结合，返回上次停留的位置（常用）,缓存页面数据，当且两个keepAlive以上的页面才可以触发。

    if (savedPosition) {
            return savedPosition
    } else {
        if (from.meta.keepAlive) {
        　　from.meta.savedPosition = document.body.scrollTop;
        }
        return { x: 0, y: to.meta.savedPosition ||0}
    }

动态路由匹配参数

    routes:[
        {
            path: "/detail/:id",
            name: "Detail",
            component: Detail
        }
    ]    
  this.$router.push({name:"Detail",params:{id:id}});

路由模式为history模式，服务器需要做到对前端路由的全匹配。可以参考官网

类似项目中的购物车，商品详情页等，可以做到直观符合逻辑，params可以作为路径参数传递，前提是做好路由匹配。

mock数据与跨域代理

建立mock数据，最好建立在public文件之内

配置代理，直接指向本地mock文件夹.项目中可以配置后台接口或者映射地址，

devServer: {
    proxy: {
      "/api": {
        // 到时候修改这个地方
        target: "http://localhost:8080",
        changeOrigin: true,
        // 后台接口地址重定向，真实对接的时候下面的替换到路径，测试环境和本地。
        pathRewrite: {
          "^/api": "/mock"
        }
      }
    }
  }

封装组件

awosome-swiper为例,github上的一个开源swiper组件，公共画廊组件的拆分，其实所用到数据是从上述本地mock中得来的。

通用画廊组件

// CommonGallary.vue
// 已在main.js中引用awosome-swiper(use)

过度动画通用组件

 // FadeAnimation.vue
 // 已在main.js中引用awosome-swiper(use)

画廊父组件 DetailBanner.uve

    // DetailBanner.vue
    //

到这里的就基本上差不多了。

事件监听与吸顶过渡

Header头部记录

之后再接着写吧，有点累了。不知道说什么好了，公司开的就剩我一个前端了，可能我也要走了,我可不想这么轻易的滚回家。

云服务器服务器托管云服务器搭建vue项目腾讯云服务器部署vue项目 vue项目放到云服务器上阿里云服务器搭建vue项目

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/109982.html

一个JAVA WEB伪全栈的VUE入坑随笔，从零点零五学起

摘要：开始时间日接触，先在官网十目一行学完了基本特性，作为一个的伪全栈，用感受了一把双向绑定，感觉比的要强悍不少，但这开发环境吧，不能写个，就总觉得自己不能零距离接触。开始时间：3.26日接触Vue，先在官网十目一行学完了基本特性：http://cn.vuejs.org/v2/guide/，作为一个JAVA WEB的伪全栈，用Myclipse感受了一把双向绑定，感觉比JQUERY的JSRE...

HmyBmny 2019-08-21 15:33 评论0 收藏0
一年前端造的轮子是什么样子？

摘要：起因工作也差不多满一年了，对于基本的业务开发有了一些自己的想法刚开始工作的前个月，每天都可以接触到新东西，接触新业务个月之后业务开发熟悉了对于自己的技术成长就感觉受到了局限如果一直没有作出改变，那么等于是个月的经验要用一年我的学习方式就是多起因工作也差不多满一年了，对于基本的业务开发有了一些自己的想法刚开始工作的前3个月，每天都可以接触到新东西，接触新业务 3个月之后业务开发熟...

szysky 2019-08-23 16:53 评论0 收藏0
Java 初学者做的第一个微信小程序总结--关于Java基础

摘要：官方资料微信公众平台注册小程序。官网开发文档社区开发工具部署微信小程序微信小程序本身不需要部署，在微信开发工具中直接上传代码就行。为什么学习 Java 三年，目前已经工作了2年，因为自学，基础差，所以打算年末总结一下常见的基础知识和面试点；也可以通过独立做一个项目整合自己工作期间学习的知识，加深印象。但是想着回家或是平时手机用的多，做一款APP和小程序很方便查看。项目展示本...

mudiyouyou 2019-08-16 14:30 评论0 收藏0
学校 -> 实习 -> 毕业，前端——我一直在路上

摘要：职业生涯，离开校门自己的第一份工作，每天上下班都骑自行车，下雨也是，只为省点车费。，属于外包行业。虽然互联网行业加班是正常的。至今，面试流程技术复试，心中暗喜。但是，我毫无畏惧。学校 -> 实习 -> 毕业，前端——我一直在路上就要毕业了，从学校到实习直至毕业，一路走来，酸甜苦辣，记录这段时间的点滴，以后在回味肯定另有一番风情！感悟 2017/5-2018-7是非常特别的时光，见...

CoyPan 2019-08-23 11:26 评论0 收藏0
学校 -> 实习 -> 毕业，前端——我一直在路上

摘要：职业生涯，离开校门自己的第一份工作，每天上下班都骑自行车，下雨也是，只为省点车费。，属于外包行业。虽然互联网行业加班是正常的。至今，面试流程技术复试，心中暗喜。但是，我毫无畏惧。学校 -> 实习 -> 毕业，前端——我一直在路上就要毕业了，从学校到实习直至毕业，一路走来，酸甜苦辣，记录这段时间的点滴，以后在回味肯定另有一番风情！感悟 2017/5-2018-7是非常特别的时光，见...

Baaaan 2019-08-05 14:47 评论0 收藏0