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中封装公共⽅法，全局使⽤
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 = wspan(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元素
报错如下：
原因及解决：
animate下载安装页⾯元素渲染顺序问题，⼀般是因为v-if控制的视图显⽰导致的渲染顺序出错。⽐如切换tab出现⼀个echart图，然⽽如果这个切换事件带有动画animation或transition，会导致本该出现的元素要延迟⼏毫秒才出现，但其实早就已经执⾏了dom元素的相关事件，会直接报错不到该dom元素。因此⼀般需要给echart初始化⽅法添加this.$nextTick⽅法，等当前动画等渲染完毕的下⼀帧才执⾏。
7. vue的tab页切换与echart缩成⼀团问题
如果⽤tab页切换来控制什么时候显⽰哪些echart图，需要⽤上resize⽅法(先resize，然后再监听缩放来个resize)
this.$nextTick(() => {
size()
})
window.addEventListener("resize", () => {
size()
})
特别的，如果将若⼲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：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。