1.让img标签适应比例缩放
项目中做图片预览，如下图，效果要随着屏幕的大小来做自适应比例缩放，一开始用background-size:cover来做是可行的，但这里有包括上传图片的操作，而上传图片的文件流是blob流，用background-url blob流是显示不出来的，所以这里需要用img标签，但标签我们通过指定宽度图片容易变形，所以在想 css3 有没有提供像background-size这样的功能，果然查了一下，查到了 object-fit，只要设置值为 cover 就行啦，具体可查看鑫大神写的文章
2.让img 加载好后在执行其它操作
项目中图片的展示要获取图片真实的宽度，然后通过等比缩放在通过阿里oss图片进行裁剪，这时我们有一组图片，需要全部获取到宽高才能展示并且处理，不然会报找不到图片的宽高错误，这时我们会选择promise ，但是单独用一个 promise是满足不了需求的（是指我的能力），所以可以通过 promisee.all 来实现，具体流程就是 每次new img 时候生成对应的一个 promise, 最后可能通过 promise.all来判断是否所有的 promise都执行完成，最后返回 promise.all,以下是我具体的代码：
具体用法可以参考:这里
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中添加：(我这边是静态资源都是入在阿里下的，所以直接指定到那个地址)
"shortcut icon" type="image/x-icon" href="https://static.nvwang.com/favicon.png">
复制代码设置 favicon的更多设置可查看这里
5. router.beforeEach 返回顶部，提升用户体验
一个页面较长，滚动到某个位置，再跳转到另外一个页面，滚动务默认是在上一个页面停留的位置，而好的体验肯定是能返回顶部，通过钩子 afterEach 就可以实现：
router.afterEach((to, from, next) => {
window.scrollTo(0, 0);
})
复制代码6. router 模拟“滚动到锚点”的行为
有时我们需要在路由上指定个锚点，当页面指定到这个地址时会自动滚动到这个锚点，vue-router 为我们提供了一个 scrollBehavior 的钩子，具体用法如下：
// xx.vue
"path: '/document#abc'">跳到指定锚点
'abc'>
// router/index.js
scrollBehavior (to, from, savedPosition) {
if (to.hash) {
return {
selector: to.hash
}
}
}
复制代码具体可参考这里
7. transition 过滤的两种模式
transition 有一个 mode 属性，文档好像没找到，这里简要说明一下：
- in-out:新元素先进行过滤，完成之后当前过渡离开
- out-in:当前元素先进行过渡，完成之后新元素过渡进入
具体例子:
"fade" mode="out-in">
"view">
复制代码8.所有 Vue.js 的模板都是合法的 HTML。
vue官网说模板都是合法的 HTML，这个是什么意思呢，就是自定义组件没有自闭合的功能，因为自闭合的功能是 xml 语法，这个经常很出现奇怪的现象如下：
// xxx.vue
上中 g-input 是自定义一个input,我们采用自闭合的方法，结果运行页面是看不到 button 这个标签的，因为 Vue.js 的模板都是合法的 HTML。所以只有写完整，才是正确的。
复制代码 具体可查看 这里
愿你成为终身学习者