日常记录

2018-10-24 本文已影响0人丶Pal

1、移动端使用切换2x 3x图

2、自动打包components下方的.vue组件

创建一个js文件，然后在main.js中 import 引用这个文件

这样当我们在components创建.vue文件时，所有文件就会被自动打包，这样我们就可以直接进行引用。

比如在components文件夹中创建一个component1.vue的组件然后在HelloWorld.vue文件中进行引用就可以这样写了。

<component1></component1>

这样我们避免了每次都先import，然后声明components的繁琐步骤。

最后声明一个问题，这种方式就适合打包全局的公用组件，如果有其他个性化的组件还是要单独的写在一个文件夹中，自行引入！！！！

3、实现一个横向滚动并且没有滚动条的nav

4、移动端允许页面滑动和禁止页面滑动

5、待定

6、微信授权获取code

获取的code值将会拼到重定向url上，写个方法将code值提取出来就好

7、微信分享

引入weixin-js-sdk import wx from 'weixin-js-sdk'

npm上weixin-js-sdk是1.3.3版本，如升级到1.4版本 updateAppMessageShareData(分享给微信好友) updateTimelineShareData(分享到微信朋友圈)

下方分享给微信好友、分享到朋友圈的接口将替换成上方的接口。但是！1.4版本的接口我没跑通，哪位有幸看到，并且跑通了，求教。

8、使用vue-lazyload

首先npm安装vue-lazyload，去npm找一下就ok

引入 vue-lazyload -----> import VueLazyLoad from 'vue-lazyload'

使用 vue-lazyload -----> Vue.use(VueLazyLoad,{listenEvents:['scroll'], attemp:2, preload:1.3})

上述属性 npm上有更详细的描述根据自己需求进行相应设置即可

最后只需在图片上将src替换成v-lazy即可，data中图片一定要用require引入

9、实际开发当中可以用：https://tinypng.com 来压缩图片，效果较好

10、vue 使用 lazyload动态加载图片的时候图片没有切换，加上:key就可以了

11、vue-cli 通过webpack切换开发、测试、线上环境

(1)首先安装cross-env，这个工具主要是用来进行跨平台配置变量支持windows Linux系统等多个平台

(2)修改config/dev.env.js中的代码

(3)修改config/prod.env.js中的代码

(4)接下来就是配置package.json文件,前边安装的cross-env在这里就用上了

这里配置的是3个环境，分别为开发环境、测试环境、正式环境。npm run dev 与 npm run dev-test是一样的效果

12、postmessage跨域请求