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

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中添加：(我这边是静态资源都是入在阿里下的，所以直接指定到那个地址)

 <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>   

具体可查看 这里

愿你成为终身学习者