实战演示VUE搭建手机商城

vue单页模式需要注意的坑

1.class样式冲突问题

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

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

<style scoped></style>

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

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

1.public中的内容必须用绝对路径引入也就是以’/'开头。否则将会被认为是一个模块引用会被webpack处理。注意:项目如果不是放在根域名下需要如下处理:

<template>
    <img src=`${publicPath}MrXu.jpg`>
</template>
<script>
export default {
    data() {
        return {
            publicPath: process.env.BASE_URL