vue单页模式需要注意的坑

1.class样式冲突问题

方法一： 由于是单页面应用。你在每个组件里面写入的样式最终都会作用到全局里面去，导致样式冲突问题。而每个组件都必须提供一个包裹性质的元素，建议这个元素设置一个单独的class用于包裹里面的其他class从而避免样式冲突

方法二： 在style标签里加入scoped属性，在修改公共组件的样式会变得异常麻烦。

<style>

2.静态资源俩种处理方式需要理解到位

这个在Vue官方文档上有详细的说明，但是我一开始没有理解到位。走了一些个弯路。这里对Vue官方的内容提炼一个重点:

1.public中的内容必须用绝对路径引入

<template>

<script>

export default {

data() {

return {

publicPath: process.env.BASE_URL

}

}

}

[图片上传中...(image.png-adcfe1-1556546279844-0)]

2.采用相对路径引入，方式多样，如:

 1. 

 2.
 3. 

第一种方式用到的@代表的是别名的值

第二种方式用到的~其后的任何内容都会作为模块请求被解析。官方说可以引用Node模块中的资源，这个我还没用过。等以后用过了有更深的见解会再来补充

第三种方式就是标准的相对路径引入方式

注意千万不要用下面这种相对路径引入方式，因为他不会被webpack处理。而是直接采用的相对路径寻找文件。而当下的目录是会被处理的。这种方式一用一个错

我的建议是尽可能采用相对路径引入。减少@的使用。

项目中对vue属性的巧妙运用

1.使用computed监听购物车内容的修改

购物车算是整个项目中比较复杂的地方之一了,删除，添加，选中，取消选中。这些个操作都会对总金额的计算产生影响，所以我用computed监听这些变化完成了总金额的计算以及全选按钮的变化

computed: {
 totalPrice() {
 var total = 0;
 this.shops.map(value => {
 if (value.check) total += value.num * value.price;
 });
 return total;
 },
 isAllCheck() {
 var newLength = this.shops.filter(value => {
 return value.check;
 }).length;
//在此我向大家推荐一个前端全栈开发交流圈：582735936 突破技术瓶颈，提升思维能力
 return newLength === this.shops.length ? true : false;
 }
 }

2.使用filter完成了对订单状态的显示

项目中订单的状态多大7种，刚开始在html里面使用了三目运算符做的判断显示，显示效果极差，而且维护困难。但是采用filter不仅漂亮的多,后期的维护以及扩展都一幕了然

filters: {
 statusToText(value) {
 let reValue;
 switch (value) {
 case 1:
 reValue = "代付款";
 break;
 case 2:
 reValue = "代发货";
 break;
 ... ...
 }
 return reValue;
 }
 }

针对这个功能掘金中有小伙伴给我留言了另外一个实现方式，我觉得也不错。在这里分享一下：

filters: {
 statusToText(value) {
 let reValue=new Map()
 reValue.set(1,'代付款')
 reValue.set(2,'代发货')
 ... ...
 return reValue.get(value);
 }
 }

结语

感谢您的观看，如有不足之处，欢迎批评指正。

对前端的技术，前端全栈技术感兴趣的同学关注我的头条号，并在后台私信发送关键字：“前端”即可获取免费的前端开发攻城师学习资料

知识体系已整理好，欢迎免费领取。还有视频分享可以免费获取。关注我，可以获得没有的经验哦！

閱讀更多 前端進階開發者 的文章

關鍵字: 样式 页模式 冲突