vue 跳坑指南

1. vue.js 组件添加事件

<Buttom @click.native='handleClick'>

.native 是用来区分组件的事件和组件内部的事件，当然也可以是用的$emit('myClick') 从组件内部派发事件来实现

2. vue 微信支付遇到的坑

使用的vue-router 的hash模式，所以页面的路径是www.ssss.com/shop/#/home 的样子，但是微信支付目录验证不支持这种hash模式，所以在微信看来目录是错误。

// Recharge.vue
created() {
    let config = {};
    config.url = window.location.href;
    // 判断当前url是否存在?参数匹配符
    if(!config.url.match(/\?/)) {
        location.replace(window.location.href.split('#')[0] + '?' + window.location.hash);
        return ;
    }
}

3. 微信中拉起微信支付控件

  1. 使用wx的[jssdk](https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115)；是比较新的方式,需要引入威信度的jssdk
  2.  使用老的WeixinJSBridgeReady方式拉起支付控件，

这次使用的是后面这种方法：步需要引入七牛的jssdk直接就可以拉起

```
handleWxpay() {
  if(this.isweixin) {
    //options 是接口返回的wx的一些配置信息
    this.wxReadyToPay(options)
  }else {
     console.log('open in wx')
  }
},
onBridgeReady(options){
  let that = this
  console.log(options)
  WeixinJSBridge.invoke(
    'getBrandWCPayRequest',
    options,
    function(res){
      console.log(res);
      //使用以上方式判断前端返回,微信团队郑重提示：res.err_msg将在用户支付成功后返回    ok，但并不保证它绝对可靠。
      switch(res.err_msg){
        case "get_brand_wcpay_request:ok": //支付成功
          console.log('支付成功')
          // that.$router.push({path:'/SettlemenSuccess'})
          break;
        case "get_brand_wcpay_request:cancel": //支付取消
          console.log('取消支付')
          break;
        case "get_brand_wcpay_request:fail": //支付失败
          console.log('支付失败')
          break;
        default:
          // console.log(res.err_msg);
        break;
      }
    }
  )
},
wxReadyToPay(options){
  let that = this
  if (typeof WeixinJSBridge == "undefined"){
    if( document.addEventListener ){
      document.addEventListener('WeixinJSBridgeReady', that.onBridgeReady(options), false);
    }else if (document.attachEvent){
      document.attachEvent('WeixinJSBridgeReady', that.onBridgeReady(options));
      document.attachEvent('onWeixinJSBridgeReady', that.onBridgeReady(options));
    }
  }else{
    that.onBridgeReady(options);
  }
},
isweixin() {
  const ua = window.navigator.userAgent.toLowerCase();
  if(ua.match(/MicroMessenger/i) == 'micromessenger'){
      return true;
  } else {
      return false;
  }
},
```

4. 微信中预览图片(类似微信支付)

1.微信的jssdk
2.WeixinJSBridgeReady
```
handleToSwiper(index) {
  this.current = index
  this.wxReady(index)
},
wxSwiper(index){
  let newImgs = this.newImgs.map((item) => {
    return this.host + item.filename + this.previewParameter //添加的七牛图片的参数，根据自己项目的需求添加
  })
  WeixinJSBridge.invoke('imagePreview', {
    current: newImgs[index],
    urls:newImgs  
    }
  )
},
wxReady(index){
  let that = this
  if (typeof WeixinJSBridge == "undefined"){
    if( document.addEventListener ){
      document.addEventListener('WeixinJSBridgeReady', that.wxSwiper(index), false);
    }else if (document.attachEvent){
      document.attachEvent('WeixinJSBridgeReady', that.wxSwiper(index));
      document.attachEvent('onWeixinJSBridgeReady', that.wxSwiper(index));
    }
  }else{
    that.wxSwiper(index);
  }
},
```
[七牛图片处理](https://developer.qiniu.com/dora/manual/1270/the-advanced-treatment-of-images-imagemogr2#imagemogr2-thumbnail-spec) 例如：`?imageView2/1/w/200/h/200/interlace/1/q/100'`参数，让图片，无论是横图还是竖图在n * n大小的范围你不变形的显示出来

5. vue开发环境跨域问题使用代理的方式解决

在开发的过程中后端给的接口，存在跨域的问题，导致在本地调试无法正常的进行，通常解决这样的问题有两种方式：
1. 后端允许跨域，（为了安全可以加一些限制，有很多种的方法，可以和后端的小伙伴进行协商解决）
2. 利用node.js 在vue-cli中使用 代理的方式，服务器去请求服务器不会存在跨域的问题。

proxyTable的配置：实际是webpack中devServer的proxy的配置

       //在vue-cli config下dev环境配置中
       const getIP = utils.getIP // 获取ip的方法
       const host = getIP() ? getIP() : 'localhost'
       const port = 9092
       const proxyTableUrl = `http://${host}:${port}/yiqi`
       const baseUrl = 'http://xxxxxxxxx.cn/'
       proxyTable: {
         [proxyTableUrl]: {
             target: baseUrl,
             changeOrigin: true, //允许跨域
             pathRewrite: {
                 '^/yiqi': ''
             }
          }
       }

访问 http://192.168.13.233:8081/yiqi/apixxxxx
代理了http://xxxxxxxxx.cn/apixxxxx

6. 获取的本地内网的ip 目的是为了达到在手机预览的目的

//环境是mac机子  window系统存在问题
const glob = require('glob');

module.exports = {
  getIP:function () {
    var os = require('os')
    var IPv4 = '127.0.0.1'
    var interfaces = os.networkInterfaces()
    for (var key in interfaces) {
      interfaces[key].some(function (details) {
        if (details.family == 'IPv4' && key == 'en0') {
          IPv4 = details.address
          return true
        }
      })
    }
    return IPv4
  }
}

7. 使用webpack 配置外部引入，避免vender.js打包过大的问题

在使用vue-cli进行打包的时候，会把一些第三方的插件打包在vender.js中，随着项目的迭代，会因为插件使用的越来越多导致vender.js过大。这种情况下可以把一些插件使用cdn，或着使用自己的地址来作为外部的引用来使用

//wwbpack.base.config.js
externals: {//CDN 引入文件 减少vendor.js体积
    // vue: 'Vue',
    swiper:"Swiper"
},

在index.html模板中引入你想使用的插件的cdn

image.png

在项目中就可以正常的使用Swiper插件了

  // sipwer.vue
  import '@/plugins/css/swiper-3.4.2.min.css';
  import Swiper from 'swiper'

在项目打包之后就在控制台查看就会看见已经引入了你想要的js

image.png

当然你也可以吧vue从外部引入使用。本人的项目选择打包在vender.js中。

8. 图片，字体 , 媒体是否打包在js中的配置（webpack）

{
    test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
    loader: 'url-loader',
    options: {
    // 超过10字节 会打包到img目录下,否则打包在js中； 想要打包在    img limit:1 
        limit: 1, 
        name: utils.assetsPath('img/[name].[hash:7].[ext]')
    }
},
{
    test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
    loader: 'url-loader',
    options: {
        limit: 10000,
        name: utils.assetsPath('media/[name].[hash:7].[ext]')
    }
},
    {
    test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
    loader: 'url-loader',
    options: {
        limit: 10000,
        name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
    }
}

9. webpack路径的配置结合vue-cli

//vue-cli 中配置
build:{
  // Paths
  assetsRoot: path.resolve(__dirname, '../dist'),
  assetsSubDirectory: '',
  assetsPublicPath: '/shop/',
}

// webpack
output: {
  path: config.build.assetsRoot,
  filename: utils.assetsPath('js/[name].[chunkhash].js'),
  chunkFilename: utils.assetsPath('js/[id].[chunkhash].js'),
  publicPath: process.env.NODE_ENV === 'production'
      ? config.build.assetsPublicPath
      : config.dev.assetsPublicPath
},
plugins:[
  // copy custom static assets
  new CopyWebpackPlugin([
    {
      from: path.resolve(__dirname, '../static'),
      to: config.build.assetsSubDirectory,
      ignore: ['.*']
    }
  ])
]

assetsRoot决定了webpack中输出的路径;在目录下的 dist目录

image.png

assetsSubDirectory决定了打包之后dist下的目录，
比如assetsSubDirectory:''

image.png

如果assetsSubDirectory:'static'

image.png

assetsPublicPath决定了放在服务器时的项目路径
如果assetsPublicPath:'/shop/'

image.png

如果assetsPublicPath:''
则上面的路径中的shop不存在，根据自己姓名不同的需求来配置该路径

10. vconsole在vue中的使用

const debug = process.env.NODE_ENV !== 'production'
if (debug) { //vconsole 移动端调试
    const Vconsole = () => import('vconsole')
    let  vConsole = new Vconsole()
    vConsole.then(res => {
        vConsole = new res()
     }, err => {
        console.log(err)
    })
}

11. 分包加载

// 没有进行分包的加载 会在首次进入首页的时候加载所有的组件
import ProfilePicture from '@/components/ProfilePicture'

// 就版本的分包加载的方法
const ProfilePicture = r => require.ensure([], () => r(require('../components/ProfilePicture')), 'ProfilePicture')

// 新版webpack 3.6的分包加载
const ProfilePicture = () => import('../components/ProfilePicture')

12. tabbar的封装当然方法也很多,懒得写了直接贴代码吧

<template>
  <div id="table-bar" class="border-top-1px">
    <div class="items" @click='switchTab("Home")'
      :class="$route.path.indexOf('Home') !== -1? 'active' : ''">
      <div class="icon">
        <img v-if="$route.path.indexOf('Home') !== -1" 
          src="../images/icon_shouye.png" alt='active'/>
        <img v-else src="../images/icon_shouye2.png" alt="normal">
      </div>
      <div class="text">
        首页
      </div>
    </div>
    <div class="items" @click='switchTab("Order")'
      :class="$route.path.indexOf('Order') !== -1? 'active' : ''">
      <div class="icon">
        <img v-if="$route.path.indexOf('Order') !== -1" 
          src="../images/icon_dingdan.png" alt='active'>
        <img v-else src="../images/icon_dingdan2.png" alt="normal">
      </div>
      <div class="text">
        订单
      </div>
    </div>
    <div class="items" @click='switchTab("Mine")'
      :class="$route.path.indexOf('Mine') !== -1? 'active' : ''">
      <div class="icon">
        <img v-if="$route.path.indexOf('Mine') !== -1" 
          src="../images/icon_me2.png" alt="active">
        <img v-else src="../images/icon_me.png" alt="normal">
      </div>
      <div class="text">
        我的
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "TableBar",
  data(){
    return {

    }
  },
  methods: {
    switchTab(path) {
      this.$router.replace(path)
    }
  },
  mounted() {
    
  },
}
</script>
<style lang='less' scoped>
  @import '../styles/mixin.less';
  @import '../styles/base.less';
  #table-bar{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 0.5rem;
  }
  .items{
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
    color: @subtitle-color;
    font-size: 0.11rem;
  }
  .text{
    font-size: 0.11rem;

  }
  .icon{
    width: 0.22rem;
    height: 0.22rem;
    overflow: hidden;
    margin-bottom: 0.03rem;
    img{
      width: 100%;
      height: 100%;
    }
  }
  .active{
    color: @title-color;
  }
</style>

13. swiper插件自定义分页器直接上代码吧

<template>
  <div class="swiper">
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide" 
          v-for='(item, index) in banners'
          :key='index'>
          <img :src="item" alt="" style='width:100%;height:100%'>
        </div>
      </div>
      <!-- 如果需要分页器 -->
      <!-- <div class="swiper-pagination"></div> -->
    </div>
    <!--自定义的分页器 非官方-->
    <div v-cloak class="pagination swiper-pagination-custom">
      <span class="swiper-pagination-customs"
      :class="{'swiper-pagination-customs-active':index+1 == swiperActIndex}"
      v-for="(item, index) in banners"
      :key='index'></span>
    </div>
  </div>
</template>
<script>
  import '@/plugins/css/swiper-3.4.2.min.css';
  import Swiper from 'swiper';
  export default {
    name: "",
    data: () => ({
      swiperActIndex:1
    }),
    props:['banners'],
    methods:{
      _initScroll() {
        let that = this
        if(this.mySwiper) {
          this.mySwiper.destroy(true, true)
        }else {
          this.mySwiper = new Swiper('.swiper-container', {
            autoplay: 3000,// 可选选项，自动滑动
            speed:1000,
            loop:true,
            autoplayDisableOnInteraction:false, // hack 滑动后自动轮播停止
            pagination: '.swiper-pagination',
            paginationType : 'custom',
            paginationCustomRender(mySwiper, current, total) {
              var customPaginationHtml = "";
              for(var i = 0; i < total; i++) {
                if(i == (current - 1)) {
                customPaginationHtml += '<span class="swiper-pagination-customs swiper-pagination-customs-active"></span>';
                } else {
                customPaginationHtml += '<span class="swiper-pagination-customs"></span>';
                }
              }
              return customPaginationHtml;
            },
            onSlideChangeStart: function(swiper){
              // loop属性会影响len的值
              let len = swiper.slides.length - 2
              if(swiper.activeIndex === len+1) {
                that.swiperActIndex = 1
              }else if(swiper.activeIndex === 0) {
                that.swiperActIndex = len
              }else {
                that.swiperActIndex = swiper.activeIndex
              }

            }
          })
        }
      }
    },
    mounted() {
      setTimeout(function(){
        this._initScroll()
      }.bind(this),300)
    }

  }
</script>
<style lang="less" scoped>
  @import '../styles/base.less';

  .swiper-container{
    width: 3.3rem;
    height: 3.3rem;
  }
  .swiper-slide{
    width: 100%;
    height: 100%;
  }
  .pagination{
    display: flex;
    justify-content: center;
    align-items: flex-end;
    height: 0.2rem;
  }
  /*包裹自定义分页器的div的位置等CSS样式*/
  .swiper-pagination-custom {
    bottom: -0.2rem;
    left: 0;
    width: 100%;
  }
  /*自定义分页器的样式，这个你自己想要什么样子自己写*/
  .swiper-pagination-customs {
    width: 0.08rem;
    height: .01rem;
    display: inline-block;
    background: #000;
    opacity: .3;
    margin: 0 .07rem;
    background-color: @subtitle-color
  }
  /*自定义分页器激活时的样式表现*/
  .swiper-pagination-customs-active {
    opacity: 1;
    background-color: @title-color;
  }

</style>

webpack打包后可以看见源码

image.png

原理是你使用了 webpack 的 source-map 功能，与 vue 无关。
source-map 是“打包压缩后的代码”和“源代码”的对应关系，高级浏览器会自动加载这个文件以便调试。

解决办法:

将 config/index.js 中 build 下的 productionSourceMap: true,
改为 productionSourceMap: false, 即可.

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 203,098评论 5赞 476
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 85,213评论 2赞 380
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 149,960评论 0赞 336
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 54,519评论 1赞 273
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 63,512评论 5赞 364
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 48,533评论 1赞 281
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 37,914评论 3赞 395
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 36,574评论 0赞 256
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 40,804评论 1赞 296
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 35,563评论 2赞 319
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 37,644评论 1赞 329
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 33,350评论 4赞 318
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 38,933评论 3赞 307
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 29,908评论 0赞 19
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 31,146评论 1赞 259
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 42,847评论 2赞 349
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 42,361评论 2赞 342

vue 跳坑指南

1. vue.js 组件添加事件

2. vue 微信支付遇到的坑

3. 微信中拉起微信支付控件

4. 微信中预览图片(类似微信支付)

5. vue开发环境 跨域问题 使用代理的方式解决

6. 获取的本地内网的ip 目的是为了达到在手机预览的目的

7. 使用webpack 配置外部引入，避免vender.js打包过大的问题

8. 图片 ，字体 , 媒体 是否打包在js中的配置（webpack）

9. webpack路径的配置 结合vue-cli

10. vconsole在vue中的使用

11. 分包加载

12. tabbar的封装 当然方法也很多,懒得写了直接贴代码吧

13. swiper插件 自定义分页器 直接上代码吧

推荐阅读更多精彩内容

5. vue开发环境跨域问题使用代理的方式解决

8. 图片，字体 , 媒体是否打包在js中的配置（webpack）

9. webpack路径的配置结合vue-cli

12. tabbar的封装当然方法也很多,懒得写了直接贴代码吧

13. swiper插件自定义分页器直接上代码吧