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

前端小智

图片描述

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

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

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

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

clipboard.png

具体用法可以参考: 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

clipboard.png

clipboard.png

package.json

clipboard.png

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

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

 <link rel="shortcut icon" type="image/x-icon" href="https://static.nvwang.com/favicon.png">

设置 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-link :to="path: '/document#abc'">跳到指定锚点</router-link>

<p id='abc'></p>

// router/index.js

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

具体可参考这里

7. transition 过滤的两种模式

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

  1. in-out:新元素先进行过滤,完成之后当前过渡离开
  2. out-in:当前元素先进行过渡,完成之后新元素过渡进入

具体例子:

 <transition name="fade" mode="out-in">
    <router-view class="view"></router-view>
  </transition>

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

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

// xxx.vue
<g-input />
<button>我是一个按键</button>

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

<g-input><g-input>   

具体可查看 这里

愿你成为终身学习者
阅读 6k

终身学习者
我要先坚持分享20年,大家来一起见证吧。
61.1k 声望
87.9k 粉丝
0 条评论
你知道吗?

61.1k 声望
87.9k 粉丝
宣传栏