用AI赚第一桶💰低成本搭建一套AI赚钱工具,源码可二开。 广告
[TOC] ## 前言 继续总结vue项目实践中的优化和思考 ## 实践问题 ### 批量对象属性赋值 使用场景:主要是针对需要把对象的一些属性批量的赋值到另外一个对象上,然后如果你的属性很多可能要写很多赋值语句。(前提是属性名一般是相同的) > 说明:可能有人会问为什么不直接用这个对象,答案也很简单,如果可以直接用,当然直接用是最好的,我自己在写接口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,length,money} //优化版本二 :可以支持批量的导入需要赋值的,对于拷贝对象,用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中混入这个方法,可以为你的页面节省大量的代码空间。 ### 骨架屏的相关连接 - [骨架屏](https://juejin.im/post/5b79a2786fb9a01a18267362) ### axios配置的拦截 - [axios模块介绍](https://npm.taobao.org/package/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);//用户离开 } } ```