我在vue开发中的小技巧

我好不容易鼓起勇气买了一手小米,还准备等着这货下崽呢!这货就闹分手。每天下班都会有一个同事在我耳旁放风买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


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

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


如果此时我们加上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来做关联。
父组件给子组件传递

// 父组件

     


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

// 子组件

props:["datas"];
// 或者是 
props: {
 datas: String
}

子组件给父组件传递

// 子组件


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

methods: {
    toshow(msg) {
        this.msg = msg;
    }
}

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

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

methods: { ge() { vm.$emit('click',data); //触发事件 } }
created() { vm.$on('click', (arg) => { }); }

九、 列表渲染

v-for循环绑定model:

这个是我在一个微信公众号上面看到的写法,很新颖:

 // 数据    
      data() {
          return{
           obj: {
              ob: "OB",
              koro1: "Koro1"
            },
            model: {
              ob: "默认ob",
              koro1: "默认koro1"
            }   
          }
      },
    // html模板
    
// input就跟数据绑定在一起了,那两个默认数据也会在input中显示

v-if尽量不要与v-for在同一节点使用:

v-for 的优先级比 v-if 更高,如果它们处于同一节点的话,那么每一个循环都会运行一遍v-if。

如果你想根据循环中的每一项的数据来判断是否渲染,那么你这样做是对的:

    
  • {{ index }}
  • 如果你想要根据某些条件跳过循环,而又跟将要渲染的每一项数据没有关系的话,你可以将v-if放在v-for的父节点:

     // 根据elseData是否为true 来判断是否渲染,跟每个元素没有关系    
         
    • {{ index }}
    // 数组是否有数据 跟每个元素没有关系
    • {{ index }}

    没有更多数据

    十、 深度watch与watch立即触发回调

    这个是我偶尔在vuejs官网上面发现的,watch有两个可选参数,但是好像版本有限制,具体请移步官方文档。查看版本信息
    选项:deep
    在选项参数中指定 deep: true,可以监听对象中属性的变化。
    选项:immediate
    在选项参数中指定 immediate: true, 将立即以表达式的当前值触发回调,也就是默认触发一次。

    十一、 路由的项目启动页和404页面

      export default new Router({
          routes: [
            {
              path: '/', // 项目启动页
              redirect:'/login'  // 重定向到下方声明的路由 
            },
            {
              path: '*', // 404 页面 
              component: () => import('./notfind')
            },
          ]
        })
    

    比如你的域名为:www.baidu.com

    项目启动页指的是: 当你进入www.baidu.com,会自动跳转到login登录页。

    404页面指的是: 当进入一个没有 声明/没有匹配 的路由页面时就会跳转到404页面。

    比如进入www.baidu.com/testRouter,就会自动跳转到notFind页面。

    当你没有声明一个404页面,进入www.baidu.com/testRouter,显示的页面是一片空白。


    说在最后

    这篇文章了写了好久了,我已经不知道当初想要写什么了。我早上快下班的时候,随手修改了一下,但是上面的内容确实是我在项目里面经常会用到的一些小技巧。可能有些瑕疵。但是或多或少也是总结了我一些经验的。

    你可能感兴趣的:(我在vue开发中的小技巧)