失眠网 > Vue项目supermall仿蘑菇街详解（一）首页开发详解

Vue项目supermall仿蘑菇街详解（一）首页开发详解

时间：2024-06-06 09:50:07

前言

本文章是对coderwhy vue项目仿蘑菇街做的一个步骤详解，此文章包含个人详解及主要步骤，由于代码较多较杂，就不放这了，代码大部分就用截图了

一、安装及创建

安装node,vue-cli，创建一个vue-cli3的项目
(我自己用的是Cli-4）

二、项目开发

1.目录结构

按下图创建好文件夹

2.设置CSS初始化和全局样式

normalize.css （自行去github下载）base.css

在App.vue引用base.css

3.vue.config和editorconfig

新建vue.config.js

module.exports = {configureWebpack: {resolve: {alias: {'assets': '@/assets','common': '@/common','components': '@/components','network': '@/network','views': '@/views',}}}}

报错及解决方法
按照上述配置成功后，应特别注意使用，若还是报错：These dependencies were not found:
则应该重启项目，再次运行之后就能成功。

editorconfig 对代码风格进行统一，直接复制，如果你是项目组长的话，最好是有这个文件

4.TabBar引入和项目模块划分

1）tabbar

把day7的tabbar文件夹复制到项目的compontents-> common文件夹把day7的mainTabBar文件夹复制到项目的compontents->content文件夹改一下MainTabBar里面的路径在App.vue使用MainTabBar组件

2）项目模块划分：tabbar->路由映射关系

复制day7的tabbar下，views文件夹里面的东西到项目的views文件夹下安装vue-router，复制 day7的router->index.js文件夹到项目里，在App.vue里面使用router-view

目前项目效果

5.小图标的修改以及路径问题

把favicon.ico图标替换掉

三、首页开发

1.首页导航栏的封装与使用

新建文件夹文件

// NavBar.vue<template><div class="nav-bar"><div class="left"><slot name="left"></slot></div><div class="center"><slot name="center"></slot></div><div class="right"><slot name="right"></slot></div></div></template><script>export default {name:'NavBar',}</script><style>.nav-bar{display: flex;height: 44px;background-color:red;}.left,.right{width: 60px;}.center{flex: 1;background-color: blue;}</style>

// Home.vue<template><div id="home"><NavBar></NavBar></div></template><script>import NavBar from "components/common/navbar/NavBar";export default {name: "Home",components: {NavBar,},};</script><style scoped></style>

效果

修改一下样式

2.请求首页的多个数据

复制day9的request.js文件到项目的network文件夹，删掉其中不必要的东西安装axios network文件夹下新建home.js文件，用来封装首页的所有网络请求在首页App.vue使用

2.轮播图的展示

从Day9的预习代码复制components->common->swiper文件夹引用这样写Swiper又是一坨在Home.vue，把它封装一下，在home文件夹下新建文件夹childComps，再创建文件HomeSwiper.vue

// HommSwiper.vue<template><Swiper><SwiperItem v-for="(item, index) in banners" :key="index"><a :href="item.link"><img :src="item.image" alt="" /></a></SwiperItem></Swiper></template><script>import { Swiper, SwiperItem } from "components/common/swiper";export default {name: "HomeSwiper",components: {Swiper,SwiperItem,},props:{banners:{type:Array,default(){return []}}}};</script><style></style>

3.推荐信息的展示

homeComps下新建文件 recommendView.vue

<template><div class="recommend"><div v-for="(item,index) in recommends" :key="index" class="recommend-item"><a :href="item.link"><img :src="item.image" alt=""><div>{{item.title}}</div></a></div></div></template><script>export default {name:'RecommendView',props:{recommends:{type:Array,default(){return []}}}}</script><style>.recommend{display: flex;text-align: center;font-size: 12px;padding: 10px 0 20px;border-bottom: 10px solid #eee;}.recommend-item{flex: 1;}.recommend-item img{width: 70px;height: 70px;margin-bottom: 10px;}</style>

目前首页效果

4.FeatureView的封装

childComps下新建文件FeatureView.vue文件添加以下样式，使home-nav固定

5.TabControl的封装

content新建文件TabControl，因为首页的tabcontrol与分类的只是文字不同，所以这里不用插槽，直接用props传值修改一下样式目前效果实现点击添加样式功能实现tabControl吸顶（停留效果）

6.保存商品的数据结构设计

goods:(流行/新款/精选)

goods: {'pop': {page: 5, list: [150]},'news': {page: 2, list: [60]},'sell': {page: 1, list: [30]}}

7.首页数据的请求和保存

默认请求三个的第一页数据，其他的等点击对应选项且下拉时再加载 goods里面的news要改为new 此时created里面的代码有点多，一般created里面只做调用，把这些函数封装到methods里面这样写的话，getHomeGoods也能动态传类型 page的1不能写死，不然每次调用都是请求第一页的数据，应该是goods里面的page+1 保存商品数据

8.首页商品数据的展示

content文件夹新建goods文件夹，新建GoodsList.vue和GoodsListItem.vue用props把对应type的goods传给GoodsList.vue用props把对应的goods里面的每一个商品item传给GoodsListItem.vue 把数据全部展示出来添加一下样式，直接从Day9预习代码里面复制goodsListItem.vue的css代码，目前效果如下让商品一行两个均等分显示小bug：tabControl被覆盖了，加个z-index就行