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

具体可查看 这里

愿你成为终身学习者