目录
3. git报错：You are in the middle of a merge -- cannot amend
5. vue直接引用animate.css 动画不起作用问题
6. Vue在使用Echart时init初始化失败，获取不到DOM元素
8. 没有加入git项目团队前拉代码，会导致无法推送到主分支。此时若已经加入团队，需要重新拉代码，把本地代码覆盖进去再上传代码
9. Vue：使用function函数改变v-if的标志时会导致无法更新视图
19. 项目配置：vue cli3.0项目如何在F12里定位css所在的vue文件及行数
20. ElementUI - image-viewer - 图片放大查看组件
21理解：不能在computed中改变页面变量的值，如果需要改变，请使用watch
23. （vue-cli2）assest和static文件夹的区别（图片放在哪)assets->bundle(编译到一起)
30. el-table的show-overflow-tooltip功能因为写了template而失效问题
35. el-input限制只能输数字，不能是负数并且限制最大或最小值
37. 预编译stylus的使用stylus是一个强大的css预编译语言,stylus支持省略花括号，支持省略分号，代码整洁，支持引入，并且支持语法内函数，富于表现力、动态的、健壮的 CSS
42. 自定义动画@keyframes以及Animate.css的组合使用
43. vue在setTimeout内修改this失效的解决办法
44. Promise报错 Expected the Promise rejection reason to be an Error：
45. vue项目打包后，写的覆盖element的样式无效了
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中封装公共方法，全局使用
2.1.src文件夹下新建util.js文件以便存放公共方法
export default {
rowspan: function (data) {
var index = data;
// 代码
return index;
}
}
2.2.main.js中,将unils里的方法注册为全局方法：
import utils from '@/util/util.js'
Vue.prototype.utils = utils
2.3.任意文件中使用
mounted () {
var index = this.utils.rowspan(1)
}
3. git报错：You are in the middle of a merge -- cannot amend
解决方法：
git reset --merge
注：取消合并
4. 组件强制刷新
场景：
当组件动态赋值，dom却不能及时更新，无法及时渲染出正确的结果时，可以采用组件强制刷新的方法。
//模版上绑定key
<SomeComponent :key="theKey"/>
//选项里绑定data
data(){
return{
theKey:0
}
}
//刷新key达到刷新组件的目的
theKey++;
也可以用强制重新渲染方法：
this.$forceUpdate()
5. vue直接引用animate.css 动画不起作用问题
场景（原因）：
由于vue官网引用的是animate.css 3.5版本，其无法向上兼容最新的animate.css版本，这就导致了直接npm install animate.css后，动画压根无法生效。
因此解决方案就是安装对应低版本的animate.css：
安装依赖：
npm install animate.css@3.5.1 --save
main.js全局引入：
import animated from "animate.css"
Vue.use(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(() => {
this.chart2.resize()
})
window.addEventListener("resize", () => {
this.chart2.resize()
})
特别的，如果将若干echart封装在组件里，还需要搭配watch监听。同时在mounted和watch钩子里判断是否已经切换tab页/拿到数据，然后再渲染数据
props: ['Data'],
data () {
return {
data: this.Data
}
},
watch: {
Data: function (data) {
if (data) {
this.initEchart1(data)
this.initEchart2(data)
}
}
},
mounted () {
if (this.data) {
this.initEchart1(this.data) // 渲染echart的方法
this.initEchart2(this.data) // 渲染echart的方法
}
}
8. 没有加入git项目团队前拉代码，会导致无法推送到主分支。此时若已经加入团队，需要重新拉代码，把本地代码覆盖进去再上传代码
9. Vue：使用function函数改变v-if的标志时会导致无法更新视图
注意（排查）：
如果以后直接粘代码时，发现视图没有渲染，很有可能是老代码还在用function定义函数而不是箭头函数() => {}
10. 前端的导入文件/上传文件接口注意事项
导入接口的传参比较特殊，一般用FormData格式的对象，其包含了文件和其他参数
beforeAvatarUpload1 (file) {
var data = new FormData()
data.append('uploadFile', file)
data.append('gangId', this.id)
phoneRecordReadExcel(data).then(res => {
// 其他操作
)}
}
用append(参数名, 数据)方法往FormData对象内添加文件等其他参数。
不能直接用对象格式传参：
var data = {
gangId: this.id,
uploadFile: file
}
11. vue引入本地图片的特殊情况
除了img标签的src和css的background：url(),其他情况想要引用本地项目的静态资源图片需要用require('../../assets/img/aaa.png')的格式，而不能直接用'../../assets/img/aaa.png'格式引入。
如在某个组件内引用，如echart或G6引擎中的图标img或icon
icon: {
show: true,
cursor: 'pointer',
img: require('../../assets/img/aa.png'),
width: 75,
height: 91
},
16. vue-countupjs
基于 CountUp.js 的 Vue 组件, 简易数字动画跳动
安装：
npm install vue-countupjs --save
main.js：
import VueCountUp from 'vue-countupjs'
Vue.use(VueCountUp)
html：
<v-countup start-value="0" :end-value="1000"></v-countup>
配置项：
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 -g
vue-cli3 / vue-cli4: npm install -g vue@cli
创建新项目命令
vue-cli2: vue init webpack 2.0project
vue-cli3 / cue-cli4: vue creat 3.0project
启动项目命令
vue-cli2: npm run dev
vue-cli3 / vue-cli4: npm run serve
项目结构
vue-cli3 / vue-cli4中移除了配置文件目录config和build文件夹，以及static静态文件夹。
18. route用法
this.$route.path:获取当前路由的路径
this.$route.name:获取当前路由名（路由最后一级）
获取各级路由名：
let names = this.$route.path.split('/')
let firstName = names[1] // 第一级路由名
let secondName = names[2] // 第二级路由名
// 以此类推，另外names[0]为空字符
另外如果要获取完整url可以用 window.location.href
19. 项目配置：vue cli3.0项目如何在F12里定位css所在的vue文件及行数
在vue cli3.0版本，新建vue.config.js文件在其中配置 css:{ sourceMap: true }
vue.config.js:
module.exports = {
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：
<el-image-viewer v-if="showViewer" :on-close="closeViewer" :url-list="imgURL"></el-image-viewer> -
其中urk-list属性需传一个图片url的数组，如果只有一张图片时不会出现左右切换按钮。
-
用v-if判断是否显示查看图片功能
-
on-close方法为点击关闭按钮后执行的事件
21理解：不能在computed中改变页面变量的值，如果需要改变，请使用watch
22. 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才可以
<p>动态绑定路径</p>
<img :src="assetsURL" alt="图片加载失败" title="assets中的图片">
<img :src="staticURL" alt="图片加载失败" title="static中的图片">
data (){
return {
assetsURL: require('../../assets/11.png'),
staticURL: '../../../static/11.png'
}
}
<!-- 没有..的是绝对路径，默认从项目根目录开始 -->
<img src="/static/aaa.png" />
<!-- 带..的是相对路径，默认从文件自己开始 -->
<img src="../../static/aaa.png" />
使用绝对路径的图片不会被打包进js，也就是远程请求了static中的本地图片，如果static本地删了那页面就找不到该图片；
而使用相对路径的图片在打包时会将其完整的图片文件数据打包进js，因此即使删掉了static中的图片，仍然能够显示
综上所述，使用相对路径的是不根据项目本地改变而改变的文件，而绝对路径的是和页面直接相关的文件。
因此，为了统一区分，webpack默认要将static目录的文件原原本本的输出，即从功能划分来讲，用绝对路径的是和页面直接相关的全都放在static中；那么相对的，所有使用相对路径的文件或者说一旦打包就不会被本地实际图片所影响的图片统一放在assets中。
从实际应用角度来讲：经常要更换的图片不能被打包限死，所以放在static中可以灵活替换，如商品图片等；而固定不会变的，如项目icon、导航栏icon、按钮icon等统一放在assets中
24. IE兼容难题
在IE浏览器下，数字过大或者过长都有可能自动添加类似于a标签的下划线：
解决办法如下：
<meta name="format-detection" content="telephone=no,email=no,address=no">
25. 关于计时器无法清除问题
最好不要在外部清除计时器（比如页面销毁的钩子事件中），根据用户的操作不同有一定概率会导致清除失败。最好在setTimeout()和setInterval()内部清除，找一个判断标志。比如在页面销毁时（destroyed钩子)，可以把某个变量置空，然后如果在计时器内部发现这个变量变空，那就说明页面被我销毁了，那么他就自我销毁clearTimeout(A)或clearInterval(B),这样的话他每一轮触发计时器都必须判断这个标志才行，肯定不会出现无法销毁或销毁不及时的问题
26. Vue状态管理
大项目中，状态管理用Vuex。
而小项目中，如果有一处需要被多个实例（组件）间共享的状态，可以使用store模式。
- 文件夹层级：src/store/myStore.js
- myStore.js
var myStore = {
debug: true,
state: {
msg: 'hello'
},
setMsgAction (newValue) {
if (this.debug) console.log('setMsgAction trigged with ', newValue)
this.state.msg = newValue
},
clearMsgAction () {
if (this.debug) console.log('clearMsgAction trigged')
this.state.msg = ''
}
}
export default myStore // 不要忘记导出export，不导出怎么用
- 在组件中使用store模式
import myStore from '@/store/myStore'
export default {
data () {
return {
shareState: myStore.state // 此处必须这样写，如果写成sharedState: store.state.message则不能同步更新
}
},
mounted () {
console.log(this.sharedState.message) // 输出'hello'
}
}
27. vue深拷贝、浅拷贝
- 浅拷贝
当一个对象直接赋值非另一个对象时，修改另一个对象的值会影响前一个对象的值
let a = this.vehicleChange
let b = this.vehicleChangeData
b = a
比如，修改b对象中的name属性时，会同时把a对象中的name也修改掉
- 深拷贝
this.vehicleChangeData = JSON.parse(JSON.stringify(this.vehicleChange))JSON.stringify()对象转为串，JSON.parse()串转为对象，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.$refs.table1.bodyWrapper // 上面的子表格
let table2 = this.$refs.table2.bodyWrapper // 下面的子表格
table2.addEventListener('scroll', () => {
// 滚动监听事件
table1.scrollLeft = table2.scrollLeft
this.$nextTick(() => {
// 表格滚动时有一定概率发生错位，解决办法是让table重新布局。这里官方提供了doLayout方法，来解决重新布局的问题
this.$refs.table1.doLayout()
this.$refs.table2.doLayout()
})
})
然后隐藏上面子表格的滚动条即可
<style lang="stylus">
.firstTable
::-webkit-scrollbar, ::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb
display none
</style>
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赋值
// 这里请求接口，获得数据res.data
let children = []
if (res.data.length !== 0) {
for (let i in res.data) {
children.push({
label: res.data[i].name,
id: res.data[i].code,
children: [{
label: '',
id: '',
children: []
}]
})
}
this.$nextTick(() => {
this.treeData = children
})
} else {
this.$nextTick(() => {
this.treeData[0].label = '(暂无节点)'
})
}
35. el-input限制只能输数字，不能是负数并且限制最大或最小值
<el-input v-model="ruleForm.total" oninput="value=value.replace(/[^0-9.]/g, '');if(value>100)value=100"></el-input>
首先用oninput将输入内容处理为只能为数字（负号是除了数字以外的字符所以也不会被算在里面），然后再对value做个判断超出最大值的话改回最大值，最小值同理
36. vscode快速创建多层子文件夹
我们可以在左侧目录列表上新建文件夹的时候，直接输入aa/bb/cc，就可以创建多层子文件夹
37. 预编译stylus的使用
stylus是一个强大的css预编译语言,stylus支持省略花括号，支持省略分号，代码整洁，支持引入，并且支持语法内函数，富于表现力、动态的、健壮的 CSS
需要安装stylus和stylus-loader
npm 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时，如果用this.ruleForm = []来初始化有一定概率因为el-form层级过深而导致输入后无法更新视图及导致校验错误。必须在渲染el-form之前，用this.$set(this.ruleForm, ‘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'
}
},
<el-table
:data="tableData"
:header-cell-style="indexHeaderClass"
:cell-style="indexCellClass"
style="width: 100%;height:100%">
<el-table-column v-for="(item,index) in titleDates" :key="index"
:prop="item.attr"
:label="item.name"
:width="item.width">
</el-table-column>
</el-table>
42. 自定义动画@keyframes以及Animate.css的组合使用
①在全局文件中定义自定义动画
/* 自定义的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可以在animate.css中挑选，然后在改一改里面的参数适应具体情况或合并多个动画效果都可以。接下载用vue的进场入场钩子.ziduan-enter-active 和.ziduan-leave-active设置相关参数，用什么动画，多久等。它的命名以‘transition的name-enter-active’为格式。
②在需要加动画效果的div外层套一层transition标签，name就是第二步的写name
<transition name='ziduan'>
<div>框框</div>
</transition>
43. vue在setTimeout内修改this失效的解决办法
使用function定义setTimeout时，this会优先指向window对象。
①第一种解决方案是必须在它的外层重新拿到当前对象this
let 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加载顺序有问题，样式被覆改了。
所以在mian.js里面这样修改：
‘./APP’和’./router’放在element css的后面，router放到最后
还有就是每个vue组件里的style要加scoped,这很关键，起到css不被组件之间重叠的作用
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
