小米商城总结

最新推荐文章于 2022-06-21 00:25:47 发布

Aurora_Nil

最新推荐文章于 2022-06-21 00:25:47 发布

阅读量489

点赞数

本文链接：https://blog.csdn.net/Aurora_Nil/article/details/116432767

版权

本文介绍了使用Vue.js和ElementUI进行前端项目架构搭建的方法，包括设置vue.config.js解决跨域问题，API接口的封装，路由鉴权在router.js中的实现，以及如何注册和应用全局组件。在组件化开发中，详细展示了商品列表组件的模板、脚本和样式，实现了数据传递和页面跳转功能。

摘要由CSDN通过智能技术生成

项目架构

使用到vue框架
ElementUI

技术栈

vue组件化开发
proxy跨域
API封装
路由鉴权
VUEX

首先处理跨域问题
创建一个vue.config.js文件，配置一下proxy开发环境
在这里插入图片描述
配置main.js文件

API封装

路由鉴权
在router.js中完成拦截

全局组件
1.注册全局组件

2.全局组件内布局+渲染

<template>
    <!-- 商品列表组件 -->
    <div>
        <ul>
            <li
                class="card"
                v-for="item in listData"
                :key="item.product_id"
                @click="xiangq(item.product_id)"
            >
                <img :src="$target + item.product_picture" alt />
                <h2>{{ item.product_name }}</h2>
                <h3>{{ item.product_title }}</h3>
                <span>{{ item.product_selling_price }}元</span>
                <span
                    class="del"
                    v-if="item.product_selling_price != item.product_price"
                >{{ item.product_price }}元</span>
            </li>
            <li class="more" v-if="!isMore">
                <router-link
                    :to="{ path: '/goodList', query: { categoryID: this.arrayId, switch: true } }"
                    class="to"
                >
                    <span>浏览更多》</span>
                </router-link>
            </li>
        </ul>
    </div>
</template>

<script>
export default {
    name: 'MyList',
    props: [
        'listData',
        "isMore"
    ],
    data() { return { } },
    created() {
    },
    methods: {
        xiangq(id) {
            this.$router.push({ path: '/details', query: { productID: id } })
        },
    },
    computed: {
        arrayId() {
            let arr = []
            this.listData.forEach((item) => {
                if (!arr.includes(item.category_id)) {
                    arr.push(item.category_id)
                }
            })
            return arr
        },
    }
}
</script>