vue-cli易错点笔记

---

1、绑定多个class

单个类名绑定,如下,变量为c,如果变量c的值为class_c,那么渲染后类名为 class_c
如下:

:class='c'

变量为bool_,表示 设置类 aaa, bbb, ccc是否设置取决于变量bool_
如下:

:class=['aaa bbb',{ccc:bool_}]

另外一种方式
ccc为变量,例如ccc的值为’class_c’,那么渲染之后此处有三个类名,分别为aaa,bbb,class_c

如下:

:class=['aaa bbb',ccc]

2、html中的img引用assets下面的图片

这种情况下不能直接引用到资源的url
一种方法是在vue的data中定义一个变量,比如 img_src,给他赋值为如下,然后再img标签中绑定src属性
如下:

变量赋值
img_src:require('@/assets/a.png')
绑定src属性
<img :src='img_src'>

另一种方法是把图片放在与index.html同级的目录中,比如/static/img下面,那么引用就可以正常引用了,
如下:

<img src='/static/img/a.png'>

3.绑定事件@click

4.绑定style

v-bind:style 的对象语法十分直观——看着非常像 CSS，但其实是一个 JavaScript 对象。CSS property 名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case，记得用引号括起来) 来命名：

<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
data: {
  activeColor: 'red',
  fontSize: 30
}

其他的没有再data中定义的值,设置在js对象中也不起作用,所以无关的其他样式尽量不要再这里操作,直接定义再css文件中
例如下面方式,后面添加的fontSize属性是不会被渲染出来的,直接报错

<div v-bind:style="{ color: activeColor, fontSize:  '30px' }"></div>
data: {
  activeColor: 'red',
}
//会报错

4. Loading chunk 0 failed 报错

大部分情况下是缓存问题,项目关闭,重新启动运行一班就好了,

还有一种情况如下:
懒加载导致的问题,解决方法:
在根目录下面新建配置文件vue.config.js,内容输入为:

module.exports = {
	publicPath: '/',
}

然后保存,运行 npm run build,不管是否成功,重新启动就可以了

5.build报错:Error: CSS minification error: postcss-svgo: Error in parsing SVG: Unquoted attribute value, 原因:mui.css中svg不能识别

svg标签不能识别导致的,整个项目中搜索svg关键词,发现除了引入svg图片外还有一个地方,是mui.css中的一个style如下:

svg:not(:root)
{
    overflow: hidden;
} 

看起来这个样式没有任何毛病,但编辑就是通不过,直接注释掉,然后通过了,而且这个样式是禁止svg溢出显示的,无所谓了

过了一段时间发现又不行了

发现里面用到svg的图片
style如下:

.mui-spinner:after {
	display: block;

	width: 100%;
	height: 100%;

	content: '';

	background-image: url('data:image/svg+xml;charset=utf-8,<svg viewBox=\'0 0 120 120\' xmlns=\'http://www.w3.org/2000/svg\' xmlns:xlink=\'http://www.w3.org/1999/xlink\'><defs><line id=\'l\' x1=\'60\' x2=\'60\' y1=\'7\' y2=\'27\' stroke=\'%236c6c6c\' stroke-width=\'11\' stroke-linecap=\'round\'/></defs><g><use xlink:href=\'%23l\' opacity=\'.27\'/><use xlink:href=\'%23l\' opacity=\'.27\' transform=\'rotate(30 60,60)\'/><use xlink:href=\'%23l\' opacity=\'.27\' transform=\'rotate(60 60,60)\'/><use xlink:href=\'%23l\' opacity=\'.27\' transform=\'rotate(90 60,60)\'/><use xlink:href=\'%23l\' opacity=\'.27\' transform=\'rotate(120 60,60)\'/><use xlink:href=\'%23l\' opacity=\'.27\' transform=\'rotate(150 60,60)\'/><use xlink:href=\'%23l\' opacity=\'.37\' transform=\'rotate(180 60,60)\'/><use xlink:href=\'%23l\' opacity=\'.46\' transform=\'rotate(210 60,60)\'/><use xlink:href=\'%23l\' opacity=\'.56\' transform=\'rotate(240 60,60)\'/><use xlink:href=\'%23l\' opacity=\'.66\' transform=\'rotate(270 60,60)\'/><use xlink:href=\'%23l\' opacity=\'.75\' transform=\'rotate(300 60,60)\'/><use xlink:href=\'%23l\' opacity=\'.85\' transform=\'rotate(330 60,60)\'/></g></svg>');
	background-repeat: no-repeat;
	background-position: 50%;
	background-size: 100%;
}

.mui-spinner-white:after {
	background-image: url('data:image/svg+xml;charset=utf-8,<svg viewBox=\'0 0 120 120\' xmlns=\'http://www.w3.org/2000/svg\' xmlns:xlink=\'http://www.w3.org/1999/xlink\'><defs><line id=\'l\' x1=\'60\' x2=\'60\' y1=\'7\' y2=\'27\' stroke=\'%23fff\' stroke-width=\'11\' stroke-linecap=\'round\'/></defs><g><use xlink:href=\'%23l\' opacity=\'.27\'/><use xlink:href=\'%23l\' opacity=\'.27\' transform=\'rotate(30 60,60)\'/><use xlink:href=\'%23l\' opacity=\'.27\' transform=\'rotate(60 60,60)\'/><use xlink:href=\'%23l\' opacity=\'.27\' transform=\'rotate(90 60,60)\'/><use xlink:href=\'%23l\' opacity=\'.27\' transform=\'rotate(120 60,60)\'/><use xlink:href=\'%23l\' opacity=\'.27\' transform=\'rotate(150 60,60)\'/><use xlink:href=\'%23l\' opacity=\'.37\' transform=\'rotate(180 60,60)\'/><use xlink:href=\'%23l\' opacity=\'.46\' transform=\'rotate(210 60,60)\'/><use xlink:href=\'%23l\' opacity=\'.56\' transform=\'rotate(240 60,60)\'/><use xlink:href=\'%23l\' opacity=\'.66\' transform=\'rotate(270 60,60)\'/><use xlink:href=\'%23l\' opacity=\'.75\' transform=\'rotate(300 60,60)\'/><use xlink:href=\'%23l\' opacity=\'.85\' transform=\'rotate(330 60,60)\'/></g></svg>');
}

这段代码是用来做带进度的按钮的,就是按钮上有一个小圈圈的,反正项目中不用,也一并删除掉,
总算解决了

6.vue跳转页面后到页面底部,而不是到顶部

解决方法:
1.再app.vue中,给app标签添加ref属性

<div id="app"  ref="app">

2.在watch中监听router改变完成之后,让页面滚动到最上方

watch:{
		$route(){
			this.$refs.app.scrollTo(0,0);
		}
	}

也用了其他办法,各种强制滚动到顶部的方法都试过了,就这个管用,引用自下方链接,非原创

https://blog.csdn.net/yuanqi3131/article/details/106856117?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromBaidu-1.not_use_machine_learn_pai&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromBaidu-1.not_use_machine_learn_pai

7.vue主页面禁止回退按钮

在App.vue中,监听$route的变化,当到达我们指定的’/home/home’ 页面时,写禁止回退的代码,而到达其他页面时移除这个监听事件

watch: {
		$route() {
			if (this.$route.path == '/home/home') {
			chage_sta();//需要调用一下这个方法,否则有时候不管用哦
			//指定页面监听popstate事件(回退事件)
				window.addEventListener('popstate', this.chage_sta);
			} else {//其他页面时记得移除监听事件,否则其他页面也不能回退
				window.removeEventListener('popstate', this.chage_sta);
			}
		}
},
methods: {
	chage_sta() {
	//监听到回退事件时,显示当前页面,并且不刷新
		history.pushState(null, null, document.URL);
	}
}

8.touch-action属性

如果设置成none,页面将不能响应触摸事件

9.mui主页返回键退出问题

比较好的实现方式为主页监听返回键,退出应用,代码如下

mui.back = function() {
				var btn = ["确定", "取消"];
				mui.confirm('确认关闭当前应用？', '提示', btn, function(e) {
					if (e.index == 0) {
						plus.runtime.quit();
					}
				});
			}

其他页面监听返回键,正常后退一步(如其他页面不重写mui.back,那么所有页面都会提示关闭应用),代码如下:

mui.back = function() {
				window.history.go(-1);
			}