使用vue开发pc前端及后台的项目总结(陆续更新)

Baoyuan 发布于2019-08-23 11:26 / 445人阅读

摘要：所以只有写完整，才是正确的。具体可查看这里愿你成为终身学习者

1.让img标签适应比例缩放

项目中做图片预览，如下图，效果要随着屏幕的大小来做自适应比例缩放，一开始用background-size:cover来做是可行的，但这里有包括上传图片的操作，而上传图片的文件流是blob流，用background-url blob流是显示不出来的，所以这里需要用img标签，但标签我们通过指定宽度图片容易变形，所以在想 css3 有没有提供像background-size这样的功能，果然查了一下，查到了 object-fit，只要设置值为 cover 就行啦，具体可查看鑫大神写的文章 https://www.zhangxinxu.com/wo...

2.让img 加载好后在执行其它操作

项目中图片的展示要获取图片真实的宽度，然后通过等比缩放在通过阿里oss图片进行裁剪，这时我们有一组图片，需要全部获取到宽高才能展示并且处理，不然会报找不到图片的宽高错误，这时我们会选择promise ，但是多带带用一个 promise是满足不了需求的（是指我的能力），所以可以通过 promisee.all 来实现，具体流程就是每次new img 时候生成对应的一个 promise, 最后可能通过 promise.all来判断是否所有的 promise都执行完成，最后返回 promise.all,以下是我具体的代码：

具体用法可以参考: https://www.jianshu.com/p/7e6...

3. npm build 根据传入参数来指定编译正式环境还是测试环境

我们一般开发中都有正式跟测试环境的，但是正式跟测试的API是不太一样的，vue 2.x以上在 config文件下有提供两个文件dev.evn.js和prod.ven.js分别是打包和运行的全局变量，可以通过设置里面的变量来达到我们想要的值。但对于我做的项目来说，因为我打包出来一个要放在测试的服务器，一个是正式的，因为正式的静态资源要入在阿里的服务器，这样我每次打包都是通过手动配置还实现，这样显然很麻烦，所以我在buid的时候分别传入test 或者 prod 表示测试和正式的意思，然后可以在config下的index里面获取然后判断，代码如下：

config/index.js

package.json

4.vue项目--favicon设置以及动态修改favicon

再index.html中添加：(我这边是静态资源都是入在阿里下的，所以直接指定到那个地址)

设置 favicon的更多设置可查看 http://www.cnblogs.com/chinab...

5. router.beforeEach 返回顶部，提升用户体验

一个页面较长，滚动到某个位置，再跳转到另外一个页面，滚动务默认是在上一个页面停留的位置，而好的体验肯定是能返回顶部，通过钩子 afterEach 就可以实现：

router.afterEach((to, from, next) => {

window.scrollTo(0, 0);

})

6. router 模拟“滚动到锚点”的行为

有时我们需要在路由上指定个锚点，当页面指定到这个地址时会自动滚动到这个锚点，vue-router 为我们提供了一个 scrollBehavior 的钩子，具体用法如下：

// xx.vue
跳到指定锚点



// router/index.js

scrollBehavior (to, from, savedPosition) {
  if (to.hash) {
    return {
      selector: to.hash
    }
  }
}

具体可参考这里

7. transition 过滤的两种模式

transition 有一个 mode 属性，文档好像没找到，这里简要说明一下：

in-out:新元素先进行过滤，完成之后当前过渡离开

out-in:当前元素先进行过渡，完成之后新元素过渡进入

具体例子:

8.所有 Vue.js 的模板都是合法的 HTML。

vue官网说模板都是合法的 HTML，这个是什么意思呢，就是自定义组件没有自闭合的功能，因为自闭合的功能是 xml 语法，这个经常很出现奇怪的现象如下：

// xxx.vue

上中 g-input 是自定义一个input,我们采用自闭合的方法，结果运行页面是看不到 button 这个标签的，因为 Vue.js 的模板都是合法的 HTML。所以只有写完整，才是正确的。

具体可查看这里

愿你成为终身学习者

云服务器 GPU云服务器前端开发项目 web前端开发项目实例设计开发前端后台更新服务器的项目

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

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

前端负责人不得不考虑的前端技术选型及构架（一）

摘要：不光发展方向多，同一个方向的技术选型也同样多，比如的。那么问题来了，在项目中，我们到底应该如何展开我们的技术选型呢，我就结合我的经历讲一讲。但是最终还是选择的包比较大，不利于前端快速加载，相比于那一套的出活率高。现在前端，都往大前端方向发展，pc, wapApp, 小程序，混合开发，桌面开发，node 后台。不光发展方向多，同一个方向的技术选型也同样多，比如wapApp的 vue,r...

geekzhou 2019-08-23 16:03 评论0 收藏0
关于Vue2一些值得推荐的文章 -- 五、六月份

摘要：五六月份推荐集合查看最新的请点击集前端最近很火的框架资源定时更新，欢迎一下。苏幕遮燎沈香宋周邦彦燎沈香，消溽暑。鸟雀呼晴，侵晓窥檐语。叶上初阳乾宿雨，水面清圆，一一风荷举。家住吴门，久作长安旅。五月渔郎相忆否。小楫轻舟，梦入芙蓉浦。五、六月份推荐集合查看github最新的Vue weekly；请::点击::集web前端最近很火的vue2框架资源；定时更新，欢迎 Star 一下。苏...

sutaking 2019-08-02 15:17 评论0 收藏0
关于Vue2一些值得推荐的文章 -- 五、六月份

摘要：五六月份推荐集合查看最新的请点击集前端最近很火的框架资源定时更新，欢迎一下。苏幕遮燎沈香宋周邦彦燎沈香，消溽暑。鸟雀呼晴，侵晓窥檐语。叶上初阳乾宿雨，水面清圆，一一风荷举。家住吴门，久作长安旅。五月渔郎相忆否。小楫轻舟，梦入芙蓉浦。五、六月份推荐集合查看github最新的Vue weekly；请::点击::集web前端最近很火的vue2框架资源；定时更新，欢迎 Star 一下。苏...

khs1994 2019-08-23 18:08 评论0 收藏0
前端最实用书签(持续更新)

摘要：前言一直混迹社区突然发现自己收藏了不少好文但是管理起来有点混乱所以将前端主流技术做了一个书签整理不求最多最全但求最实用。前言一直混迹社区,突然发现自己收藏了不少好文但是管理起来有点混乱; 所以将前端主流技术做了一个书签整理,不求最多最全,但求最实用。书签源码书签导入浏览器效果截图showImg(https://segmentfault.com/img/bVbg41b?w=107...

sshe 2019-08-23 12:00 评论0 收藏0