vue实际项目中遇到的问题及解决整理

2023年6月21日发(作者：)

vue实际项⽬中遇到的问题及解决整理⽬录

1. 克隆git项⽬后只有master分⽀问题问题：git clone 项⽬后，默认clone该项⽬的master分⽀，但是最新代码不在该分⽀上并且git branch后本地也只存在master分⽀，该怎么办？⽅法：#第⼀步：从远程服务器取回所有分⽀的更新数据(克隆项⽬后，如果其他⽤户后来新建了远程分⽀，这⼀步才是必要的)git pull #或者git fetch#第⼆步: 新建⼀个等会要与远程分⽀绑定的本地分⽀，并⾃动切换到该分⽀git checkout -b <分⽀名>#第三步：将新建的本地分⽀绑定到⽬标远程分⽀git branch --set-upstream-to=origin/<远程分⽀名>解释：概念上分成远程分⽀和本地分⽀，git branch只查看本地分⽀；git branch -r可以查看远程分⽀。当克隆项⽬时，默认只把远程分⽀⾥的origin/master分⽀绑定到本地的master分⽀，但如果你想⽤其他远程分⽀，需要新建⼀个本地分⽀然后与其绑定2. vue中封装公共⽅法，全局使⽤⽂件夹下新建⽂件以便存放公共⽅法export default { rowspan: function (data) { var index = data; // 代码 return index; }}中,将unils⾥的⽅法注册为全局⽅法：import utils from '@/util/' = utils2.3.任意⽂件中使⽤mounted () { var index = n(1)}3. git报错：You are in the middle of a merge -- cannot amend解决⽅法：git reset --merge注：取消合并4. 组件强制刷新场景：当组件动态赋值，dom却不能及时更新，⽆法及时渲染出正确的结果时，可以采⽤组件强制刷新的⽅法。 //模版上绑定key //选项⾥绑定data data(){ return{ theKey:0 } } //刷新key达到刷新组件的⽬的 theKey++; 也可以⽤强制重新渲染⽅法： this.$forceUpdate()5. vue直接引⽤ 动画不起作⽤问题场景（原因）：由于vue官⽹引⽤的是 3.5版本，其⽆法向上兼容最新的版本，这就导致了直接npm install 后，动画压根⽆法⽣效。因此解决⽅案就是安装对应低版本的：安装依赖： npm install @3.5.1 --全局引⼊：import animated from ""(animated) 6. Vue在使⽤Echart时init初始化失败，获取不到DOM元素 报错如下： 原因及解决：页⾯元素渲染顺序问题，⼀般是因为v-if控制的视图显⽰导致的渲染顺序出错。⽐如切换tab出现⼀个echart图，然⽽如果这个切换事件带有动画animation或transition，会导致本该出现的元素要延迟⼏毫秒才出现，但其实早就已经执⾏了dom元素的相关事件，会直接报错找不到该dom元素。因此⼀般需要给echart初始化⽅法添加this.$nextTick⽅法，等当前动画等渲染完毕的下⼀帧才执⾏。7. vue的tab页切换与echart缩成⼀团问题如果⽤tab页切换来控制什么时候显⽰哪些echart图，需要⽤上resize⽅法(先resize，然后再监听缩放来个resize)this.$nextTick(() => { ()})ntListener("resize", () => { ()})特别的，如果将若⼲echart封装在组件⾥，还需要搭配watch监听。同时在mounted和watch钩⼦⾥判断是否已经切换tab页/拿到数据，然后再渲染数据props: ['Data'],data () { return { data: }},watch: { Data: function (data) { if (data) { hart1(data) hart2(data) } }},mounted () { if () { hart1() // 渲染echart的⽅法 hart2() // 渲染echart的⽅法 }}8. 没有加⼊git项⽬团队前拉代码，会导致⽆法推送到主分⽀。此时若已经加⼊团队，需要重新拉代码，把本地代码覆盖进去再上传代码9. Vue：使⽤function函数改变v-if的标志时会导致⽆法更新视图注意（排查）：如果以后直接粘代码时，发现视图没有渲染，很有可能是⽼代码还在⽤function定义函数⽽不是箭头函数() => {}10. 前端的导⼊⽂件/上传⽂件接⼝注意事项导⼊接⼝的传参⽐较特殊，⼀般⽤FormData格式的对象，其包含了⽂件和其他参数 beforeAvatarUpload1 (file) { var data = new FormData() ('uploadFile', file) ('gangId', ) phoneRecordReadExcel(data).then(res => { // 其他操作 )} }⽤append(参数名, 数据)⽅法往FormData对象内添加⽂件等其他参数。不能直接⽤对象格式传参： var data = { gangId: , uploadFile: file }11. vue引⼊本地图⽚的特殊情况除了img标签的src和css的background：url(),其他情况想要引⽤本地项⽬的静态资源图⽚需要⽤require('../../assets/img/')的格式，⽽不能直接⽤'../../assets/img/'格式引⼊。如在某个组件内引⽤，如echart或G6引擎中的图标img或icon

icon: { show: true, cursor: 'pointer', img: require('../../assets/img/'), width: 75, height: 91 },16. vue-countupjs基于 的 Vue 组件, 简易数字动画跳动安装： npm install vue-countupjs --： import VueCountUp from 'vue-countupjs' (VueCountUp)html： 配置项： start-value: 起始值 end-value: 结束值 decimals: ⼩数位数 duration: 动画持续时间 delay: 延时更新 immediate： true 是否⽴即执⾏动画 animateClass： 执⾏期间动画, 执⾏后删除，优先级低于animatedClass animatedClass：执⾏前插⼊, 执⾏后删除 option: { 其他配置项 useEasing: true, // 缓动动画 easing useGrouping: true, // 1,000,000 vs 1000000 separator: ',', // 数字分隔符 decimal: '.', // ⼩数分隔符 prefix: '', // 前缀 suffix: '' // 后缀 }17. 不同版本vue-cli区别cli脚⼿架安装命令vue-cli2: npm install vue-cli -gvue-cli3 / vue-cli4: npm install -g vue@cli创建新项⽬命令vue-cli2: vue init webpack 2.0projectvue-cli3 / cue-cli4: vue creat 3.0project启动项⽬命令vue-cli2: npm run devvue-cli3 / vue-cli4: npm run serve项⽬结构vue-cli3 / vue-cli4中移除了配置⽂件⽬录config和build⽂件夹，以及static静态⽂件夹。18. route⽤法this.$:获取当前路由的路径this.$:获取当前路由名（路由最后⼀级）获取各级路由名： let names = this.$('/') let firstName = names[1] // 第⼀级路由名 let secondName = names[2] // 第⼆级路由名 // 以此类推，另外names[0]为空字符另外如果要获取完整url可以⽤ 19. 项⽬配置：vue cli3.0项⽬如何在F12⾥定位css所在的vue⽂件及⾏数在vue cli3.0版本，新建⽂件在其中配置 css:{ sourceMap: true }: s = { css: { sourceMap: true, // 开启 CSS source maps } }20. ElementUI - image-viewer - 图⽚放⼤查看组件

// import引⼊import ElImageViewer from 'element-ui/packages/image/src/image-viewer'// 在组件内声明export default { components: { ElImageViewer }}html：其中urk-list属性需传⼀个图⽚url的数组，如果只有⼀张图⽚时不会出现左右切换按钮。⽤v-if判断是否显⽰查看图⽚功能on-close⽅法为点击关闭按钮后执⾏的事件21理解：不能在computed中改变页⾯变量的值，如果需要改变，请使⽤watch22. el-dialog垂直居中问题该组件并不⾃带让其垂直居中的属性，因此只能通过CSS来控制（以下样式代码已兼容IE） .el-dialog{ display: flex; display: -ms-flex; /* 兼容IE */ flex-direction: column; -ms-flex-direction: column; /* 兼容IE */ margin:0 !important; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); max-height:calc(100% - 30px); max-width:calc(100% - 30px); } .el-dialog .el-dialog__body{ max-height: 100%; flex: 1; -ms-flex: 1 1 auto; /* 兼容IE */ overflow-y: auto; overflow-x: hidden; }23. （vue-cli2）assest和static⽂件夹的区别（图⽚放在哪)assets->bundle(编译到⼀起)static->resources(远程URL请求)如果标签动态绑定了图⽚路径，assets路径的图⽚会加载失败，因为webpack使⽤的是commenJS规范，必须使⽤require才可以

动态绑定路径

data (){ return { assetsURL: require('../../assets/'), staticURL: '../../../static/' } }使⽤绝对路径的图⽚不会被打包进js，也就是远程请求了static中的本地图⽚，如果static本地删了那页⾯就找不到该图⽚；⽽使⽤相对路径的图⽚在打包时会将其完整的图⽚⽂件数据打包进js，因此即使删掉了static中的图⽚，仍然能够显⽰综上所述，使⽤相对路径的是不根据项⽬本地改变⽽改变的⽂件，⽽绝对路径的是和页⾯直接相关的⽂件。因此，为了统⼀区分，webpack默认要将static⽬录的⽂件原原本本的输出，即从功能划分来讲，⽤绝对路径的是和页⾯直接相关的全都放在static中；那么相对的，所有使⽤相对路径的⽂件或者说⼀旦打包就不会被本地实际图⽚所影响的图⽚统⼀放在assets中。从实际应⽤⾓度来讲：经常要更换的图⽚不能被打包限死，所以放在static中可以灵活替换，如商品图⽚等；⽽固定不会变的，如项⽬icon、导航栏icon、按钮icon等统⼀放在assets中24. IE兼容难题在IE浏览器下，数字过⼤或者过长都有可能⾃动添加类似于a标签的下划线：解决办法如下：

25. 关于计时器⽆法清除问题最好不要在外部清除计时器（⽐如页⾯销毁的钩⼦事件中），根据⽤户的操作不同有⼀定概率会导致清除失败。最好在setTimeout()和setInterval()内部清除，找⼀个判断标志。⽐如在页⾯销毁时（destroyed钩⼦)，可以把某个变量置空，然后如果在计时器内部发现这个变量变空，那就说明页⾯被我销毁了，那么他就⾃我销毁clearTimeout(A)或clearInterval(B),这样的话他每⼀轮触发计时器都必须判断这个标志才⾏，肯定不会出现⽆法销毁或销毁不及时的问题

26. Vue状态管理⼤项⽬中，状态管理⽤Vuex。⽽⼩项⽬中，如果有⼀处需要被多个实例（组件）间共享的状态，可以使⽤store模式。

⽂件夹层级：src/store/ var myStore = { debug: true, state: { msg: 'hello' }, setMsgAction (newValue) { if () ('setMsgAction trigged with ', newValue) = newValue }, clearMsgAction () { if () ('clearMsgAction trigged') = '' } }

export default myStore // 不要忘记导出export，不导出怎么⽤

在组件中使⽤store模式 import myStore from '@/store/myStore' export default { data () { return { shareState: // 此处必须这样写，如果写成sharedState: e则不能同步更新 } }, mounted () { (e) // 输出'hello' } }27. vue深拷贝、浅拷贝浅拷贝当⼀个对象直接赋值⾮另⼀个对象时，修改另⼀个对象的值会影响前⼀个对象的值 let a = eChange let b = eChangeData b = a⽐如，修改b对象中的name属性时，会同时把a对象中的name也修改掉深拷贝 eChangeData = (ify(eChange))ify()对象转为串，()串转为对象，JSON操作是深拷贝操作。注意：如果是对象的赋值，⼀般都是⽤深拷贝，否则会⼀起改变。通常使⽤的浅拷贝是适⽤于除对象以外的直接赋值

28. el-date-picker组件的⼩注意点注意format和value-format两种属性,前者是渲染时的格式，后者是存储下来⽤来传参的格式，注意不要搞混29. 接⼝报错code的⼀般含义404：后台压根没进接⼝，有可能前端把接⼝url写错，也有可能后端把接⼝⼊⼝写错500：前端的接⼝参数给错，注意字段类型或字段名有没有写错，要不然就是少传参数503：可能是后台的服务没起好，也有可能是后台写的逻辑有错30. el-table的show-overflow-tooltip功能因为写了template⽽失效问题template内不能⽤div标签包含很长的⽂字，⽽必须要span标签包裹，否则不显⽰省略号

31. 两个合并型el-table同时横向滚动先给两个table绑定上ref，这⾥分别为table1和table2,然后调⽤下⾯⽅法scroll () { let table1 = this.$apper // 上⾯的⼦表格 let table2 = this.$apper // 下⾯的⼦表格 ntListener('scroll', () => { // 滚动监听事件 Left = Left this.$nextTick(() => { // 表格滚动时有⼀定概率发⽣错位，解决办法是让table重新布局。这⾥官⽅提供了doLayout⽅法，来解决重新布局的问题 this.$ut() this.$ut() }) })然后隐藏上⾯⼦表格的滚动条即可

32. el-table的expand扩展⾏功能的冗余问题如下图，当扩展⾏内内容过长会导致表格渲染严重错乱，甚⾄影响到fixed固定列，并且我也不希望每⼀项内容压得很窄搞得很⾼解决⽅法是在expand的template上加上style=“display:flex;flex-wrap: wrap;”,这样多个div超出宽度后会⾃动换⾏，⽽不是强⾏挤到外⾯去

33 F12出现莫名的console问题F12⾥出现了⼀堆奇怪的输出，结果点击相应的⾏号却发现没有写任何console。最终发现是⽗组件、路由的⼊⼝处有⼏个console，但主要是我点击F12⽇志⾥跳转到相应的输出⾏他告诉我是当前⽂件的第⼏⾏。这算是⼀个误导吧，搞得我⼀脸懵逼，找错了⽅向还以为是什么离奇事件，其实是⽗组件⾥的第xxx⾏有个console。这个机制很有问题，希望以后可以改进，不然第⼀次遇到的话还不知道发⽣了什么。

34. 树形控件动态赋值有可能出现渲染出错问题由于项⽬的数据过多，项⽬要求点击⼀个⽗级节点请求⼀次接⼝，查询他的⼦节点有哪些。如果查询后直接赋值可能会出现渲染问题，⽐如第⼀个⼦节点⽆法正常显⽰扩展图标等奇怪问题。因此有必要先⽤⼀个对象数组children暂存所有⼦节点，然后⽤nextTick赋值 // 这⾥请求接⼝，获得数据 let children = [] if ( !== 0) { for (let i in ) { ({ label: [i].name, id: [i].code, children: [{ label: '', id: '', children: [] }] }) } this.$nextTick(() => { ta = children }) } else { this.$nextTick(() => { ta[0].label = '(暂⽆节点)' }) }

35. el-input限制只能输数字，不能是负数并且限制最⼤或最⼩值

⾸先⽤oninput将输⼊内容处理为只能为数字（负号是除了数字以外的字符所以也不会被算在⾥⾯），然后再对value做个判断超出最⼤值的话改回最⼤值，最⼩值同理

36. vscode快速创建多层⼦⽂件夹我们可以在左侧⽬录列表上新建⽂件夹的时候，直接输⼊aa/bb/cc，就可以创建多层⼦⽂件夹 37. 预编译stylus的使⽤stylus是⼀个强⼤的css预编译语⾔,stylus⽀持省略花括号，⽀持省略分号，代码整洁，⽀持引⼊，并且⽀持语法内函数，富于表现⼒、动态的、健壮的 CSS需要安装stylus和stylus-loadernpm install stylus stylus-loader --save-dev特性：冒号可有可⽆分号可有可⽆逗号可有可⽆括号可有可⽆

38. npm安装插件代码npm时加上–save可以在项⽬的dependency上添加这个插件名，这样其他⼈拉了项⽬之后只要npm install就可以⼀起安装该插件，否则需要单独⽤⼀⾏代码来安装插件39. el-select改变后视图不渲染问题因为组件嵌套太深，导致⽆法组件⽆法刷新或el-option绑定的List数据过多，导致来不及渲染。可以在@change⽅法内加⼊官⽅给出的更新选择框视图⽅法 this.$forceUpdate() // 官⽅给出的更新选择框视图⽅法如果是el-input绑定@input="changeContent"⽅法

changeContent (val) { this.$forceUpdate() },40. el-form校验失败问题初始化ruleForm时，如果⽤rm = []来初始化有⼀定概率因为el-form层级过深⽽导致输⼊后⽆法更新视图及导致校验错误。必须在渲染el-form之前，⽤this.$set(rm, ‘name’, ‘’) 的⽅式初始化，才可以使校验正常⼯作41. el-table第⼀列空出⼀段距离使其不贴边indexHeaderClass ({ row, column, rowIndex, columnIndex }) { // 第⼀列表头空出⼀⼩段距离 if (columnIndex === 0) { return 'padding-left: 25px' } },indexCellClass ({ row, column, rowIndex, columnIndex }) { // 第⼀列表格空出⼀⼩段距离 if (columnIndex === 0) { return 'padding-left: 25px' } }, 42. ⾃定义动画@keyframes以及的组合使⽤①在全局⽂件中定义⾃定义动画/* ⾃定义的ziduan框的进场退场动画 */@keyframes fadeInDown{ 0%{opacity:0;-webkit-transform:translate3d(0,-20%,0);transform:translate3d(0,-20%,0)} to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes fadeOutUp{ 0%{opacity:1} to{opacity:0;-webkit-transform:translate3d(0,-20%,0);transform:translate3d(0,-20%,0)}}.ziduan-enter-active { animation: fadeInDown 0.5s;}.ziduan-leave-active { animation: fadeOutUp 0.5s;}其中动画模板@keyframes可以在中挑选，然后在改⼀改⾥⾯的参数适应具体情况或合并多个动画效果都可以。接下载⽤vue的进场⼊场钩⼦.ziduan-enter-active 和.ziduan-leave-active设置相关参数，⽤什么动画，多久等。它的命名以‘transition的name-enter-active’为格式。②在需要加动画效果的div外层套⼀层transition标签，name就是第⼆步的写name

43. vue在setTimeout内修改this失效的解决办法使⽤function定义setTimeout时，this会优先指向window对象。①第⼀种解决⽅案是必须在它的外层重新拿到当前对象thislet that = this之后的this都⽤that代替即可②第⼆种解决⽅案是使⽤ES6的箭头函数setTimeOut(() => { //执⾏的代码},1000)

44. Promise报错 Expected the Promise rejection reason to be an Error：在promise的reject中需要传⼊的是⼀个Error对象.因此将reject()改为reject(new Error())即可45. vue项⽬打包后，写的覆盖element的样式⽆效了最近公司做的这个项⽬，要⼤量修改element⾥⾯的css样式，所以项⽬打包之后会出现样式和本地开发的时候样式有很多不⼀样，原因可能是css加载顺序有问题，样式被覆改了。所以在⾥⾯这样修改：‘./APP’和’./router’放在element css的后⾯，router放到最后还有就是每个vue组件⾥的style要加scoped,这很关键，起到css不被组件之间重叠的作⽤

2023年6月21日发(作者：)

vue实际项⽬中遇到的问题及解决整理⽬录

1. 克隆git项⽬后只有master分⽀问题问题：git clone 项⽬后，默认clone该项⽬的master分⽀，但是最新代码不在该分⽀上并且git branch后本地也只存在master分⽀，该怎么办？⽅法：#第⼀步：从远程服务器取回所有分⽀的更新数据(克隆项⽬后，如果其他⽤户后来新建了远程分⽀，这⼀步才是必要的)git pull #或者git fetch#第⼆步: 新建⼀个等会要与远程分⽀绑定的本地分⽀，并⾃动切换到该分⽀git checkout -b <分⽀名>#第三步：将新建的本地分⽀绑定到⽬标远程分⽀git branch --set-upstream-to=origin/<远程分⽀名>解释：概念上分成远程分⽀和本地分⽀，git branch只查看本地分⽀；git branch -r可以查看远程分⽀。当克隆项⽬时，默认只把远程分⽀⾥的origin/master分⽀绑定到本地的master分⽀，但如果你想⽤其他远程分⽀，需要新建⼀个本地分⽀然后与其绑定2. vue中封装公共⽅法，全局使⽤⽂件夹下新建⽂件以便存放公共⽅法export default { rowspan: function (data) { var index = data; // 代码 return index; }}中,将unils⾥的⽅法注册为全局⽅法：import utils from '@/util/' = utils2.3.任意⽂件中使⽤mounted () { var index = n(1)}3. git报错：You are in the middle of a merge -- cannot amend解决⽅法：git reset --merge注：取消合并4. 组件强制刷新场景：当组件动态赋值，dom却不能及时更新，⽆法及时渲染出正确的结果时，可以采⽤组件强制刷新的⽅法。 //模版上绑定key //选项⾥绑定data data(){ return{ theKey:0 } } //刷新key达到刷新组件的⽬的 theKey++; 也可以⽤强制重新渲染⽅法： this.$forceUpdate()5. vue直接引⽤ 动画不起作⽤问题场景（原因）：由于vue官⽹引⽤的是 3.5版本，其⽆法向上兼容最新的版本，这就导致了直接npm install 后，动画压根⽆法⽣效。因此解决⽅案就是安装对应低版本的：安装依赖： npm install @3.5.1 --全局引⼊：import animated from ""(animated) 6. Vue在使⽤Echart时init初始化失败，获取不到DOM元素 报错如下： 原因及解决：页⾯元素渲染顺序问题，⼀般是因为v-if控制的视图显⽰导致的渲染顺序出错。⽐如切换tab出现⼀个echart图，然⽽如果这个切换事件带有动画animation或transition，会导致本该出现的元素要延迟⼏毫秒才出现，但其实早就已经执⾏了dom元素的相关事件，会直接报错找不到该dom元素。因此⼀般需要给echart初始化⽅法添加this.$nextTick⽅法，等当前动画等渲染完毕的下⼀帧才执⾏。7. vue的tab页切换与echart缩成⼀团问题如果⽤tab页切换来控制什么时候显⽰哪些echart图，需要⽤上resize⽅法(先resize，然后再监听缩放来个resize)this.$nextTick(() => { ()})ntListener("resize", () => { ()})特别的，如果将若⼲echart封装在组件⾥，还需要搭配watch监听。同时在mounted和watch钩⼦⾥判断是否已经切换tab页/拿到数据，然后再渲染数据props: ['Data'],data () { return { data: }},watch: { Data: function (data) { if (data) { hart1(data) hart2(data) } }},mounted () { if () { hart1() // 渲染echart的⽅法 hart2() // 渲染echart的⽅法 }}8. 没有加⼊git项⽬团队前拉代码，会导致⽆法推送到主分⽀。此时若已经加⼊团队，需要重新拉代码，把本地代码覆盖进去再上传代码9. Vue：使⽤function函数改变v-if的标志时会导致⽆法更新视图注意（排查）：如果以后直接粘代码时，发现视图没有渲染，很有可能是⽼代码还在⽤function定义函数⽽不是箭头函数() => {}10. 前端的导⼊⽂件/上传⽂件接⼝注意事项导⼊接⼝的传参⽐较特殊，⼀般⽤FormData格式的对象，其包含了⽂件和其他参数 beforeAvatarUpload1 (file) { var data = new FormData() ('uploadFile', file) ('gangId', ) phoneRecordReadExcel(data).then(res => { // 其他操作 )} }⽤append(参数名, 数据)⽅法往FormData对象内添加⽂件等其他参数。不能直接⽤对象格式传参： var data = { gangId: , uploadFile: file }11. vue引⼊本地图⽚的特殊情况除了img标签的src和css的background：url(),其他情况想要引⽤本地项⽬的静态资源图⽚需要⽤require('../../assets/img/')的格式，⽽不能直接⽤'../../assets/img/'格式引⼊。如在某个组件内引⽤，如echart或G6引擎中的图标img或icon

icon: { show: true, cursor: 'pointer', img: require('../../assets/img/'), width: 75, height: 91 },16. vue-countupjs基于 的 Vue 组件, 简易数字动画跳动安装： npm install vue-countupjs --： import VueCountUp from 'vue-countupjs' (VueCountUp)html： 配置项： start-value: 起始值 end-value: 结束值 decimals: ⼩数位数 duration: 动画持续时间 delay: 延时更新 immediate： true 是否⽴即执⾏动画 animateClass： 执⾏期间动画, 执⾏后删除，优先级低于animatedClass animatedClass：执⾏前插⼊, 执⾏后删除 option: { 其他配置项 useEasing: true, // 缓动动画 easing useGrouping: true, // 1,000,000 vs 1000000 separator: ',', // 数字分隔符 decimal: '.', // ⼩数分隔符 prefix: '', // 前缀 suffix: '' // 后缀 }17. 不同版本vue-cli区别cli脚⼿架安装命令vue-cli2: npm install vue-cli -gvue-cli3 / vue-cli4: npm install -g vue@cli创建新项⽬命令vue-cli2: vue init webpack 2.0projectvue-cli3 / cue-cli4: vue creat 3.0project启动项⽬命令vue-cli2: npm run devvue-cli3 / vue-cli4: npm run serve项⽬结构vue-cli3 / vue-cli4中移除了配置⽂件⽬录config和build⽂件夹，以及static静态⽂件夹。18. route⽤法this.$:获取当前路由的路径this.$:获取当前路由名（路由最后⼀级）获取各级路由名： let names = this.$('/') let firstName = names[1] // 第⼀级路由名 let secondName = names[2] // 第⼆级路由名 // 以此类推，另外names[0]为空字符另外如果要获取完整url可以⽤ 19. 项⽬配置：vue cli3.0项⽬如何在F12⾥定位css所在的vue⽂件及⾏数在vue cli3.0版本，新建⽂件在其中配置 css:{ sourceMap: true }: s = { css: { sourceMap: true, // 开启 CSS source maps } }20. ElementUI - image-viewer - 图⽚放⼤查看组件

// import引⼊import ElImageViewer from 'element-ui/packages/image/src/image-viewer'// 在组件内声明export default { components: { ElImageViewer }}html：其中urk-list属性需传⼀个图⽚url的数组，如果只有⼀张图⽚时不会出现左右切换按钮。⽤v-if判断是否显⽰查看图⽚功能on-close⽅法为点击关闭按钮后执⾏的事件21理解：不能在computed中改变页⾯变量的值，如果需要改变，请使⽤watch22. el-dialog垂直居中问题该组件并不⾃带让其垂直居中的属性，因此只能通过CSS来控制（以下样式代码已兼容IE） .el-dialog{ display: flex; display: -ms-flex; /* 兼容IE */ flex-direction: column; -ms-flex-direction: column; /* 兼容IE */ margin:0 !important; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); max-height:calc(100% - 30px); max-width:calc(100% - 30px); } .el-dialog .el-dialog__body{ max-height: 100%; flex: 1; -ms-flex: 1 1 auto; /* 兼容IE */ overflow-y: auto; overflow-x: hidden; }23. （vue-cli2）assest和static⽂件夹的区别（图⽚放在哪)assets->bundle(编译到⼀起)static->resources(远程URL请求)如果标签动态绑定了图⽚路径，assets路径的图⽚会加载失败，因为webpack使⽤的是commenJS规范，必须使⽤require才可以

动态绑定路径

data (){ return { assetsURL: require('../../assets/'), staticURL: '../../../static/' } }使⽤绝对路径的图⽚不会被打包进js，也就是远程请求了static中的本地图⽚，如果static本地删了那页⾯就找不到该图⽚；⽽使⽤相对路径的图⽚在打包时会将其完整的图⽚⽂件数据打包进js，因此即使删掉了static中的图⽚，仍然能够显⽰综上所述，使⽤相对路径的是不根据项⽬本地改变⽽改变的⽂件，⽽绝对路径的是和页⾯直接相关的⽂件。因此，为了统⼀区分，webpack默认要将static⽬录的⽂件原原本本的输出，即从功能划分来讲，⽤绝对路径的是和页⾯直接相关的全都放在static中；那么相对的，所有使⽤相对路径的⽂件或者说⼀旦打包就不会被本地实际图⽚所影响的图⽚统⼀放在assets中。从实际应⽤⾓度来讲：经常要更换的图⽚不能被打包限死，所以放在static中可以灵活替换，如商品图⽚等；⽽固定不会变的，如项⽬icon、导航栏icon、按钮icon等统⼀放在assets中24. IE兼容难题在IE浏览器下，数字过⼤或者过长都有可能⾃动添加类似于a标签的下划线：解决办法如下：

25. 关于计时器⽆法清除问题最好不要在外部清除计时器（⽐如页⾯销毁的钩⼦事件中），根据⽤户的操作不同有⼀定概率会导致清除失败。最好在setTimeout()和setInterval()内部清除，找⼀个判断标志。⽐如在页⾯销毁时（destroyed钩⼦)，可以把某个变量置空，然后如果在计时器内部发现这个变量变空，那就说明页⾯被我销毁了，那么他就⾃我销毁clearTimeout(A)或clearInterval(B),这样的话他每⼀轮触发计时器都必须判断这个标志才⾏，肯定不会出现⽆法销毁或销毁不及时的问题

26. Vue状态管理⼤项⽬中，状态管理⽤Vuex。⽽⼩项⽬中，如果有⼀处需要被多个实例（组件）间共享的状态，可以使⽤store模式。

⽂件夹层级：src/store/ var myStore = { debug: true, state: { msg: 'hello' }, setMsgAction (newValue) { if () ('setMsgAction trigged with ', newValue) = newValue }, clearMsgAction () { if () ('clearMsgAction trigged') = '' } }

export default myStore // 不要忘记导出export，不导出怎么⽤

在组件中使⽤store模式 import myStore from '@/store/myStore' export default { data () { return { shareState: // 此处必须这样写，如果写成sharedState: e则不能同步更新 } }, mounted () { (e) // 输出'hello' } }27. vue深拷贝、浅拷贝浅拷贝当⼀个对象直接赋值⾮另⼀个对象时，修改另⼀个对象的值会影响前⼀个对象的值 let a = eChange let b = eChangeData b = a⽐如，修改b对象中的name属性时，会同时把a对象中的name也修改掉深拷贝 eChangeData = (ify(eChange))ify()对象转为串，()串转为对象，JSON操作是深拷贝操作。注意：如果是对象的赋值，⼀般都是⽤深拷贝，否则会⼀起改变。通常使⽤的浅拷贝是适⽤于除对象以外的直接赋值

28. el-date-picker组件的⼩注意点注意format和value-format两种属性,前者是渲染时的格式，后者是存储下来⽤来传参的格式，注意不要搞混29. 接⼝报错code的⼀般含义404：后台压根没进接⼝，有可能前端把接⼝url写错，也有可能后端把接⼝⼊⼝写错500：前端的接⼝参数给错，注意字段类型或字段名有没有写错，要不然就是少传参数503：可能是后台的服务没起好，也有可能是后台写的逻辑有错30. el-table的show-overflow-tooltip功能因为写了template⽽失效问题template内不能⽤div标签包含很长的⽂字，⽽必须要span标签包裹，否则不显⽰省略号

31. 两个合并型el-table同时横向滚动先给两个table绑定上ref，这⾥分别为table1和table2,然后调⽤下⾯⽅法scroll () { let table1 = this.$apper // 上⾯的⼦表格 let table2 = this.$apper // 下⾯的⼦表格 ntListener('scroll', () => { // 滚动监听事件 Left = Left this.$nextTick(() => { // 表格滚动时有⼀定概率发⽣错位，解决办法是让table重新布局。这⾥官⽅提供了doLayout⽅法，来解决重新布局的问题 this.$ut() this.$ut() }) })然后隐藏上⾯⼦表格的滚动条即可

32. el-table的expand扩展⾏功能的冗余问题如下图，当扩展⾏内内容过长会导致表格渲染严重错乱，甚⾄影响到fixed固定列，并且我也不希望每⼀项内容压得很窄搞得很⾼解决⽅法是在expand的template上加上style=“display:flex;flex-wrap: wrap;”,这样多个div超出宽度后会⾃动换⾏，⽽不是强⾏挤到外⾯去

33 F12出现莫名的console问题F12⾥出现了⼀堆奇怪的输出，结果点击相应的⾏号却发现没有写任何console。最终发现是⽗组件、路由的⼊⼝处有⼏个console，但主要是我点击F12⽇志⾥跳转到相应的输出⾏他告诉我是当前⽂件的第⼏⾏。这算是⼀个误导吧，搞得我⼀脸懵逼，找错了⽅向还以为是什么离奇事件，其实是⽗组件⾥的第xxx⾏有个console。这个机制很有问题，希望以后可以改进，不然第⼀次遇到的话还不知道发⽣了什么。

34. 树形控件动态赋值有可能出现渲染出错问题由于项⽬的数据过多，项⽬要求点击⼀个⽗级节点请求⼀次接⼝，查询他的⼦节点有哪些。如果查询后直接赋值可能会出现渲染问题，⽐如第⼀个⼦节点⽆法正常显⽰扩展图标等奇怪问题。因此有必要先⽤⼀个对象数组children暂存所有⼦节点，然后⽤nextTick赋值 // 这⾥请求接⼝，获得数据 let children = [] if ( !== 0) { for (let i in ) { ({ label: [i].name, id: [i].code, children: [{ label: '', id: '', children: [] }] }) } this.$nextTick(() => { ta = children }) } else { this.$nextTick(() => { ta[0].label = '(暂⽆节点)' }) }

35. el-input限制只能输数字，不能是负数并且限制最⼤或最⼩值

⾸先⽤oninput将输⼊内容处理为只能为数字（负号是除了数字以外的字符所以也不会被算在⾥⾯），然后再对value做个判断超出最⼤值的话改回最⼤值，最⼩值同理

36. vscode快速创建多层⼦⽂件夹我们可以在左侧⽬录列表上新建⽂件夹的时候，直接输⼊aa/bb/cc，就可以创建多层⼦⽂件夹 37. 预编译stylus的使⽤stylus是⼀个强⼤的css预编译语⾔,stylus⽀持省略花括号，⽀持省略分号，代码整洁，⽀持引⼊，并且⽀持语法内函数，富于表现⼒、动态的、健壮的 CSS需要安装stylus和stylus-loadernpm install stylus stylus-loader --save-dev特性：冒号可有可⽆分号可有可⽆逗号可有可⽆括号可有可⽆

38. npm安装插件代码npm时加上–save可以在项⽬的dependency上添加这个插件名，这样其他⼈拉了项⽬之后只要npm install就可以⼀起安装该插件，否则需要单独⽤⼀⾏代码来安装插件39. el-select改变后视图不渲染问题因为组件嵌套太深，导致⽆法组件⽆法刷新或el-option绑定的List数据过多，导致来不及渲染。可以在@change⽅法内加⼊官⽅给出的更新选择框视图⽅法 this.$forceUpdate() // 官⽅给出的更新选择框视图⽅法如果是el-input绑定@input="changeContent"⽅法

changeContent (val) { this.$forceUpdate() },40. el-form校验失败问题初始化ruleForm时，如果⽤rm = []来初始化有⼀定概率因为el-form层级过深⽽导致输⼊后⽆法更新视图及导致校验错误。必须在渲染el-form之前，⽤this.$set(rm, ‘name’, ‘’) 的⽅式初始化，才可以使校验正常⼯作41. el-table第⼀列空出⼀段距离使其不贴边indexHeaderClass ({ row, column, rowIndex, columnIndex }) { // 第⼀列表头空出⼀⼩段距离 if (columnIndex === 0) { return 'padding-left: 25px' } },indexCellClass ({ row, column, rowIndex, columnIndex }) { // 第⼀列表格空出⼀⼩段距离 if (columnIndex === 0) { return 'padding-left: 25px' } }, 42. ⾃定义动画@keyframes以及的组合使⽤①在全局⽂件中定义⾃定义动画/* ⾃定义的ziduan框的进场退场动画 */@keyframes fadeInDown{ 0%{opacity:0;-webkit-transform:translate3d(0,-20%,0);transform:translate3d(0,-20%,0)} to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes fadeOutUp{ 0%{opacity:1} to{opacity:0;-webkit-transform:translate3d(0,-20%,0);transform:translate3d(0,-20%,0)}}.ziduan-enter-active { animation: fadeInDown 0.5s;}.ziduan-leave-active { animation: fadeOutUp 0.5s;}其中动画模板@keyframes可以在中挑选，然后在改⼀改⾥⾯的参数适应具体情况或合并多个动画效果都可以。接下载⽤vue的进场⼊场钩⼦.ziduan-enter-active 和.ziduan-leave-active设置相关参数，⽤什么动画，多久等。它的命名以‘transition的name-enter-active’为格式。②在需要加动画效果的div外层套⼀层transition标签，name就是第⼆步的写name

43. vue在setTimeout内修改this失效的解决办法使⽤function定义setTimeout时，this会优先指向window对象。①第⼀种解决⽅案是必须在它的外层重新拿到当前对象thislet that = this之后的this都⽤that代替即可②第⼆种解决⽅案是使⽤ES6的箭头函数setTimeOut(() => { //执⾏的代码},1000)

44. Promise报错 Expected the Promise rejection reason to be an Error：在promise的reject中需要传⼊的是⼀个Error对象.因此将reject()改为reject(new Error())即可45. vue项⽬打包后，写的覆盖element的样式⽆效了最近公司做的这个项⽬，要⼤量修改element⾥⾯的css样式，所以项⽬打包之后会出现样式和本地开发的时候样式有很多不⼀样，原因可能是css加载顺序有问题，样式被覆改了。所以在⾥⾯这样修改：‘./APP’和’./router’放在element css的后⾯，router放到最后还有就是每个vue组件⾥的style要加scoped,这很关键，起到css不被组件之间重叠的作⽤