我在vue开发中的小技巧_klivitamJ的专栏文章_微信文章

我好不容易鼓起勇气买了一手小米，还准备等着这货下崽呢！这货就闹分手。每天下班都会有一个同事在我耳旁放风买facebook，我正准备等加班结束买一手，结果facebook来了一次“跳水”。屋漏偏逢连夜雨呀! 今天9点半就下班了，终于有时间写东西了。本来考虑去写es6和异步操作的，写着写着感觉有点写不下了，然后想写书评，但是写着写着又发现感悟不深，想再读一遍再说。回头一想我最近一直加班，写了很多代码，那我就从代码说起讲讲我项目经验。

##一、 js适配经验：

我们在写代码的时候，很有可能写到这种代码：

[1,2,3,4,5].includes(1)
复制代码

或者是使用 promise 等es6的方法，但是我们的需求是在Android4.4上面完美运行。这样就会出现 includes is not undefied 等错误提示。如果看了我之前谈到 webpack 的文章就会疑问：我们之前不是用了 babel 插件用来转成es5了呢？我当时也疑问了好久，直到我在webpack里面找到一个插件，具体的使用方法：

import "babel-polyfill"
import es6Promise from 'es6-promise'
es6Promise.polyfill()
require('es6-promise').polyfill()

// webpack配置文件处
  entry: {
    app: ['babel-polyfill', './src/main.js']
  },
复制代码

二、全局定义

我们在写代码的时候，很有可能会封装很多库。如果存在有很多页面都在使用该库的情况，很可能会出现下面的代码：

// vue 1
import utils from "library"
// vue 2
import utils from "library"
...
// vue n
import utils from "library"
复制代码

就像我封装的http方法一样，我一般会这样处理

import Vue from 'vue'
import http from "http/http"
Vue.prototype.$okhttp = http

// use
this.$okhttp
复制代码

这样会节省很多没有必要的代码量

三、自定义目录

在写代码的时候，很多时候都存在这种情况：

import component1 from "../../../../component"
import component2 from "../../../../../component"
复制代码

这种代码是新手很可能出现的，如果一旦出现一个层级目录出问题了，或者是文件的位置被转移过了就会出问题。看过之前我写的webpack文航的都会知道。

module.exports = {
  context: path.resolve(__dirname, '../'),
  entry: {
    app: ['babel-polyfill', './src/main.js']
  },
  output: {},
  resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
      'components': resolve('src/components'),
      'pages': resolve('src/pages')
    }
  },
  module: {
},
  node: {
  },
  plugins: [],
}
复制代码

在resolve->alias里面可以配置绝对相对路径，在使用的时候

import component1 from "pages/component"
import component2 from "pages/component"
复制代码

四、路由懒加载

我看官方文档里面定义路由的时候都有两步：

import Vue from 'vue'
import Router from 'vue-router'
import xxx from 'xxx'
Vue.use(Router)

const router = new Router({
  routes: [
    {
      path: '/',
      component: xxx,
    }
]
})
复制代码

这样写虽然没有错误，但是我们在做大型项目的时候很可能定义很多很多个路由，那样页面就会写的特别多。此时懒加载就会解决这个问题

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)

const router = new Router({
  routes: [
    {
      path: '/',
      component: () => import("xxx")
    }
]
})
复制代码

当然这个也不是强制要求，个人推荐

五、样式污染和样式覆盖的问题

在我们新建vue的时候，经常会看到 scoped

<style scoped>
</style>
复制代码

如果我们去掉 scoped 的时候会发现，在本vue项目内定义的css属性会影响到其他vue页面的css属性。这个就很坑了。所以，我们在使用的时候一定要用scoped

但是在实际的开发中，也会遇到这么个问题。就拿我们项目来说，我用的是 elementUI ，虽然里面的资源库很强大，但是里面的视图不能完全符合策划的需求，此时就需要进行微调。

<style lang="stylus" scoped>
  .custom-dialog
    .el-dialog__header
      padding 0
    .el-dialog__body
      padding 0
</style>
复制代码

如果此时我们加上 scoped 标签的话，我们发现并没有效果，发现 去掉scoped 才会起作用。

六、 mock、mock

很多情况下，后台还没有搭建完成之前。可能前端没办法进行数据的接入。这种情况可能是一个大问题，这样会严重拖慢项目开发，此时就需要 mock 首先在webpack.dev.conf.js里面配置express，别问我为什么要在dev里面配置

const express = require('express')
const app = express()
const appData = require('../static/data/user.json')
const apiRouter = express.Router()
app.use('/api',apiRouter)
复制代码

然后将接口通过 devServer 发布出去:

 before(app) {
  app.get('/api/user',(req, res) => {
    res.json({
      data: appData
    })
  })
}
复制代码

使用的时候就直接打开 http://localhost:8080/api/user ,就可以了。

六、代理解决跨域

有些时候，在进行本地开发的时候，可能会遇到跨域的问题。为了解决这个问题呢？主要有两种方法： 1、服务器设置服务端设置很简单，就是将本地开发的东西加上 “Access-Control-Allow-Origin”, “*” ,或者是直接将本地开发的ip直接设置成白名单，这样就可以了. 2、本地代理首先引入

npm install http-proxy-middleware --save
复制代码

然后在 index.js 的标签下 proxyTable 使用

'/lesson': {
        target: 'http://xxx/v2/webapi/lesson', // 代理的网址
        changeOrigin: true, // 允许跨域
        pathRewrite: {
         '^/lesson': '/'
       }
  }
复制代码

使用的时候，就直接使用

 axios({
        method: 'get',
        url:'/lesson' ,
        params: qs.stringify(data)
      }).then(function (res) {
        if (res) {
          //...
        }
      });
    }).catch(function (error) {
      console.error(error);
    })
复制代码

七、页面统一判断

在开发中经常会遇到权限判断的问题，我们又不可能在每一个页面的生命周期中去判断一下，那样太消耗时间了，我的处理：

router.beforeEach((to, from, next) => {
  myAccess.checkhaveAccess(to.path) === true ? next() : next('/forbid')
})
复制代码

八、事件的传递：

一般来说事件的传递有很多种，比如父子之间传递数据就可以直接用 props ，和 emit 来做关联。父组件给子组件传递

// 父组件
<parent>
    <child :datas="content"></child> 
</parent>

data(){
    return {
        content:'sichaoyun'
    };
}

// 子组件

props:["datas"];
// 或者是 
props: {
 datas: String
}
复制代码

子组件给父组件传递

// 子组件
<template>
    <div @click="open"></div>
</template>

methods: {
   open() {
        this.$emit('showbox','the msg'); //触发showbox方法，'the msg'为向父组件传递的数据
    }
}
// 父组件
<child @showbox="toshow" :msg="msg"></child> //监听子组件触发的showbox事件,然后调用toshow方法

methods: {
    toshow(msg) {
        this.msg = msg;
    }
}
复制代码

兄弟组件之间的传递一般有几种方式： 1、注册全局事件 2、 vuex 3、 localstorage 关于后面两个，我会专门来讲这个的，我主要是讲全局事件吧，代码如下：

let vm = new Vue(); //创建实例

<div @click="ge"></div>
methods: {
    ge() {
        vm.$emit('click',data); //触发事件
    }
}

<div></div>
created

我在vue开发中的小技巧

正文

我在vue开发中的小技巧

二、全局定义

三、自定义目录

四、路由懒加载

五、样式污染和样式覆盖的问题

六、 mock、mock

六、代理解决跨域

七、页面统一判断

八、事件的传递：

请到「今天看啥」查看全文

我在vue开发中的小技巧

正文

我在vue开发中的小技巧

二、 全局定义

三、 自定义目录

四、 路由懒加载

五、 样式污染和样式覆盖的问题

六、 mock、mock

六、 代理解决跨域

七、 页面统一判断

八、 事件的传递：

请到「今天看啥」查看全文

二、全局定义

三、自定义目录

四、路由懒加载

五、样式污染和样式覆盖的问题

六、代理解决跨域

七、页面统一判断

八、事件的传递：