vue项目实践004

RobinsonZhang

发布于 2018-12-12 13:37:22

8070

发布于 2018-12-12 13:37:22

文章被收录于专栏：达摩兵的技术空间

前言

继续总结vue项目实践中的优化和思考，实践系列004，请持续关注不要掉队哦

实践问题

批量对象属性赋值

使用场景：主要是针对需要把对象的一些属性批量的赋值到另外一个对象上，然后如果你的属性很多可能要写很多赋值语句。（前提是属性名一般是相同的）

说明：可能有人会问为什么不直接用这个对象，答案也很简单，如果可以直接用，当然直接用是最好的，我自己在写接口param的时候，就会注意这些，需要传参的部分封装到一个特殊的对象里，然后进行data的绑定，这样需要的时候直接用传参对象。但这里讨论的不是这种情况。

//优化前
let data = {}
data.name = this.form.name
data.len = this.form.len
data.amount = this.form.amount
//优化版本一 ：利用对象的解构
let {name,len,amount} = this.form 
//利用对象解构还可以支持属性名变更的情况
let {name,len:length,amount:money} = this.form
let data = {name,len,amount}

//优化版本二 ：可以支持批量的导入需要赋值的，对于拷贝对象，用source属性承接，而需要赋值的属性用propArr承接
//在方法中用json的相关方法支持了简单的对象深拷贝
// 批量加载对象属性，支持传入数组[{source:sourceObj,propArr:[]}]  
setProps(arr) {
    if (arr.length <= 0) return {}
    return arr.reduce((acc, item) => {
         item.propArr.reduce((acc, prop) => {
          if (typeof item.source[prop] === 'object') {
            acc[prop] = JSON.parse(JSON.stringify(item.source[prop]))
         } else {
                acc[prop] = item.source[prop]
                }
            return acc
            }, acc)
        return acc
    }, {})
}

拓展思考：像这种代码如果你爹vue代码里经常写，不妨在你的mixins中混入这个方法，可以为你的页面节省大量的代码空间。

批量变量重置

在我们的代码中经常会遇到吧一些变量进行重置，这部分代码重复率很高又没有技术含量，所以我写一个工具方法进行简单的支持，代码优化。

//优化前
this.search = false 
this.data = []
this.cur_page = 1
this.pageNo = 1
this.totalCount = 0
this.processType = ''
this.person = ''
this.keyword = ''
this.taskStatus = ''
this.stdate = []
this.processStatus = ''
 /**
      * @author zhangbing 
      * @param [] arr 需要重置的数组变量
      * @param {*} options 配置对象 对于这里的重置规则如果不符合需求的可以自定义option字典,然后用instanceof 判断类型（todo）
      */   
    resetVars(arr, options) { 
        if (!arr || arr.length === 0) return 
        let _options = {
            object: {},
            string: '',
            number: 0,
            boolean: true,
            null: null,
            undefined: undefined
        }
        _options = options ? Object.assign({}, _options, options) : _options
        return arr.map(item => { 
            if (_options.includes(typeof item)) {
                item = _options[typeof item]
            } else { 
                // 不存在重置类型的 重置为字符串
                item = ''
            }
            return item
        })

    }

拓展思考：像这种代码如果你爹vue代码里经常写，不妨在你的mixins中混入这个方法，可以为你的页面节省大量的代码空间。

骨架屏的相关连接

骨架屏

axios配置的拦截

axios模块介绍

模块的过多介绍这里就不讲了，这里说明的是一个非http 200状态码的错误解析，一般情况下我们会针对response部分做异常解析。

// 配置返回拦截器
_axios.interceptors.response.use(function (response) {
  return response
}, function (error) {
  if (error.response) {
    console.warn(error.response)
    return Promise.reject(error.response)
  } else {
    return Promise.reject(error)
  }

})

那么这里就会有一个问题，首先报错中的error是不能直接打印的，如果你写会报错如下：

Request failed with status code 404
    at createError (createError.js?8da8:16)
    at settle (settle.js?664b:18)
    at XMLHttpRequest.handleLoad (xhr.js?ddba:77)

然后针对response存在的情况下，因为这部分的处理是一样的，返回也都在catch里解决的，所以我个人建议直接把错误的提示在这里解决掉，比如通过console.warn的方式或者ui的message.error的方式，这样节省了业务方面的处理错误代码。

但如果你一定希望在接口调用位置处理这部分非http 200的错误，要知道这部分是在catch，error中的，并不是在then中的作用域内。

api.xxx().then(res=> {
//http 200 处理代码
}).catch(error=> {
//非 200处理代码
})

vue元素标签带空格部分使用loader配置去掉

有些时候我们在写模板时不想让元素和元素之间有空格，可能会写成这样：

<ul>
  <li>1111</li><li>2222</li><li>333</li>
</ul>

当然还有其他方式，比如设置字体的font-size: 0，然后给需要的内容单独设置字体大小，目的是为了去掉元素间的空格。其实我们完全可以通过配置 vue-loader 实现这一需求。

{
  vue: {
    preserveWhitespace: false
  }
}

它的作用是阻止元素间生成空白内容，在 Vue 模板编译后使用 _v(” “) 表示。如果项目中模板内容多的话，它们还是会占用一些文件体积的。例如 Element 配置该属性后，未压缩情况下文件体积减少了近 30Kb。

vue-cli 脚手架之后待办事项

默认情况下没有样式预处理器的loader ，我用的scss,不加会报错，所以需要

npm i sass-loader node-sass --save-dev

默认况下，没有页面文件夹，在src目录下新加pages文件夹
默认情况下，没有全局的services、filter全局文件，可以分别用来是存放axios请求服务，过滤器的
默认情况下assets目录下没有分样式，脚本，图片的文件夹，需要加的
默认情况下，路由部分只有index,没有路由守卫，路由子模块，建议分别加入，当然我还有另外的import懒加载方法，filter路由配置文件要加
默认的@符号没有联想提示路径，需要加jsconfig.json

{
    "compilerOptions": {
      "target": "es2017",
      "allowSyntheticDefaultImports": false,
      "baseUrl": "./",
      "paths": {
        "@/*": ["src/*"],

      }
    },
    "exclude": ["node_modules", "dist"],
    "include": ["src"]
  }

默认的axios没有我们需要的业务网关配置和请求拦截
- 默认的mixins，你一定有很多工具方法和数据需要全局配置使用
默认情况下，没有业务枚举数据，建议新加一个枚举文件夹，用来存放各个业务的枚举数据
默认情况下，api服务没有mock设置和请求，可以根据自己需求设置其中baseUrl需要设置为自己的域名地址，可以根据process.node.env控制，可以根据域名判断。其中axios需要加必要的请求前后的拦截配置，其中用户id的部分在必要的时候需要加入。

const transformRequest = (data = {}, headers) => {
  if (typeof data === 'string') return data

  const loginId = getUid()
  return JSON.stringify({...data, loginId})
}

let _axios = axios.create({
  baseURL: apiProxyUrl,
  headers: { 'Content-Type': 'application/json' },
  transformRequest: [transformRequest],
  timeout: 10000
})

// 配置返回拦截器
_axios.interceptors.response.use(function (response) {
  return response
}, function (error) {
  if (error.response) {
    console.warn(error.response)
    return Promise.reject(error.response)
  } else {
    return Promise.reject(error)
  }
})

默认的app跟组件可能没有设置data为返回函数，返回对象

vue-router 路由死循环

下面这个报错是因为路由进入了死循环，需要纠正查看下路由的守卫部分有没有循环，以及设置的拦截、非拦截路径是否正确。

[vue-router] uncaught error during route navigation:
<failed to convert exception to string>

data属性没有设置为函数并返回对象的报错

显性的返回对象就可以了

[Vue warn]: data functions should return an object:

eslint配置自动验证和自动修复

前提：配置了eslint插件并且开启了eslint对文件的格式验证。

默认加了很多eslint规则之后，项目运行就会报错，但实际上肯定是期望软件帮我们自动修正，那么其设置的方法是什么呢？分为两部分，一部分是软件的设置，一部分插件的设置，这里以mac –vscode为例，说明下如何设置自动纠正：

1、window电脑：文件 > 首选项 > 设置打开 VSCode 配置文件 2、mac电脑 code>首选项 >设置

"eslint.autoFixOnSave": true,
"eslint.validate": [
    "javascript",{
        "language": "vue",
        "autoFix": true
    },"html",
    "vue"
],

备注：如果你不想在项目中使用eslint，其在config/index.js，dev配置中，useEslint: true ，设置为false即可。

vue路由拦截实现保存用户信息

场景：为了防止用户突然离开，没有保存已输入的信息。

 //在路由组件中:mounted(){}，
  beforeRouteLeave (to, from, next) {
      if(用户已经输入信息){
        //出现弹窗提醒保存草稿，或者自动后台为其保存
      }else{
        next(true);//用户离开
      }
  }

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2018-11-14，如有侵权请联系 cloudcommunity@tencent.com 删除

其他

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

其他

登录后参与评论

0 条评论

热度