supermall实战项目 01

supermall实战项目

1.划分目录结构

2.css文件的引用

normalize.css- > 对css进行初始化，对标签的风格进行了统一

3.配置文件

在脚手架3中需要创建vue.config,js文件，他会与node_modules中的配置进行合并

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

在项目中需要规范代码风格，可以配置.editorconfig文件，在脚手架2会自动生成，但在脚手架3里面需要自己配置，可以从以前脚手架2的项目里拷贝过来

root = true

[*]
charset = utf-8
indent_style = space
indent_size = 2
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true

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

把tabbar文件夹引入组件下的common文件夹（与当前业务无关）
把mainTabBar文件夹引入组件下的content文件夹（与当前业务有关），其中要修改图片引入路径

记得在APP.vue引入并显示

配置路由,项目的模块划分：tabbar -> 路由映射关系

下载 npm install vue-router --save

配置index.js文件

import Vue from 'vue'
import VueRouter from 'vue-router'

const Home = () => import('../views/home/Home')
const Category = () => import('../views/category/Category')
const Cart = () => import('../views/cart/Cart')
const Profile = () => import('../views/profile/Profile')

// 1.安装插件
Vue.use(VueRouter)

// 2.创建router
const routes = [
  {
    path: '',
    redirect: '/home'
  },
  {
    path: '/home',
    component: Home
  },
  {
    path: '/category',
    component: Category
  },
  {
    path: '/cart',
    component: Cart
  },
  {
    path: '/profile',
    component: Profile
  }
]
const router = new VueRouter({
  routes,
  mode: 'history'
})

//3.导出路由
export default router

5. 修改小图标

只需要在public文件下的favicon.ico修改

6. 首页开发

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

在components的common下创建navbar文件夹，创建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 scoped>
  .nav-bar {
    display: flex;
    height: 44px;
    line-height: 44px;
    text-align: center;
    box-shadow: 0 1px 1px rgba(100,100,100,.1);
  }

  .left, .right {
    width: 60px;
  }

  .center {
    flex: 1;
  }
</style>

公共的css可以在封装的导航栏组件里配置，不同页面的导航栏不同的样式可以字该页面的组件中进行css配置，

比如home页面里导航栏的背景颜色是粉色

2. 请求页面的多个数据

在network下配置request.js文件

import axios from 'axios'

export function request(config) {
  // 1.创建axios的实例
  const instance = axios.create({
    baseURL: 'http://123.207.32.32:8000',
    timeout: 5000
  })

  // 2.axios的拦截器
  // 2.1.请求拦截的作用
  instance.interceptors.request.use(config => {
    return config
  }, err => {
    // console.log(err);
  })

  // 2.2.响应拦截
  instance.interceptors.response.use(res => {
    return res.data
  }, err => {
    console.log(err);
  })

  // 3.发送真正的网络请求
  return instance(config)
}

配置home.js文件

当首页想要请求数据时，不要在首页的组件里直接请求，可以在network再进行一层封装home.js对首页所有请求的url进行统一的管理

home.js里封装了所有对首页数据的请求，这样就可以防止首页请求的所有url，参数相关的东西与vue组件逻辑相关的其他代码耦合在一起

home.js代码如下：
```
import {request} from "./request";

export function getHomeMultidata() {
  return request({
    url: '/home/multidata'
  })
}
```

在Home.vue向home.js请求数据

<template>
  <div id="home">
    <nav-bar class="home-nav"><div slot="center">购物街</div></nav-bar>
  </div>
</template>

<script>
import NavBar from "components/common/navbar/NavBar";


import { getHomeMultidata } from "network/home";

export default {
  name: "Home",
  components: {
    NavBar,
  },
  data() {
    return {
      banners: [],
      recommends: [],
    };
  },
  created() {
    // 1.组件一旦创建，便请求多个数据
    getHomeMultidata().then((res) => {
      // this.result = res;
      this.banners = res.data.banner.list; //在执行完函数之前（数据销毁之前），把数据保存起来
      this.recommends = res.data.recommend.list;
    });
  },
};
</script>

<style scoped>
.home-nav {
  background-color: var(--color-tint);
  color: #fff;
}
</style>

3. 轮播图的展示

Home.vue首页这个大组件下可以封装小组件

在home下创建childComps文件夹，创建HomeSwiper.vue组件

HomeSwier.vue代码如下：

<template>
  <swiper>
    <swiper-item v-for="item in banners" :key="item.index">
      <a :href="item.link">
        <img :src="item.image" alt="" />
      </a>
    </swiper-item>
  </swiper>
</template>

<script>
import { Swiper, SwiperItem } from "components/common/swiper";

export default {
  name: "HomeSwiper",
  props: {
    banners: {
      type: Array,
      default() {
        return [];
      },
    },
  },
  components: {
    Swiper,
    SwiperItem,
  },
};
</script>

<style scoped>
</style>

Home.vue代码如下：

<template>
  <div id="home">
    <nav-bar class="home-nav"><div slot="center">购物街</div></nav-bar>
    <home-swiper :banners="banners" />
  </div>
</template>

<script>
import NavBar from "components/common/navbar/NavBar";
import HomeSwiper from "./childComps/HomeSwiper";

import { getHomeMultidata } from "network/home";

export default {
  name: "Home",
  components: {
    NavBar,
    HomeSwiper,
    RecommendView,
  },
  data() {
    return {
      banners: [],
      recommends: [],
    };
  },
  created() {
    // 1.组件一旦创建，便请求多个数据
    getHomeMultidata().then((res) => {
      // this.result = res;
      this.banners = res.data.banner.list; //在执行完函数之前（数据销毁之前），把数据保存起来
      this.recommends = res.data.recommend.list;
    });
  },
};
</script>

<style scoped>
.home-nav {
  background-color: var(--color-tint);
  color: #fff;
}
</style>

4. 推荐信息的展示

编程思想与轮播图一样，

在home下创建childComps文件夹，创建RecommendView.vue组件

RecommendView.vue代码如下：

<template>
  <div class="recommend">
    <div v-for="item in recommends" class="recommend-item" :key="item.index">
      <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 scoped>
  .recommend {
    display: flex;
    width: 100%;
    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>

最后在Home.vue引入即可

Home.vue代码如下：

<template>
  <div id="home">
    <nav-bar class="home-nav"><div slot="center">购物街</div></nav-bar>
    <home-swiper :banners="banners" />
    <recommend-view :recommends="recommends" />
  </div>
</template>

<script>
import NavBar from "components/common/navbar/NavBar";
import HomeSwiper from "./childComps/HomeSwiper";
import RecommendView from "./childComps/RecommendView";

import { getHomeMultidata } from "network/home";

export default {
  name: "Home",
  components: {
    NavBar,
    HomeSwiper,
    RecommendView,
  },
  data() {
    return {
      banners: [],
      recommends: [],
    };
  },
  created() {
    // 1.组件一旦创建，便请求多个数据
    getHomeMultidata().then((res) => {
      // this.result = res;
      this.banners = res.data.banner.list; //在执行完函数之前（数据销毁之前），把数据保存起来
      this.recommends = res.data.recommend.list;
    });
  },
};
</script>

<style scoped>
.home-nav {
  background-color: var(--color-tint);
  color: #fff;
}
</style>

posted @ 2021-05-31 00:27 107w 阅读(171) 评论(0) 收藏举报

刷新页面返回顶部

107w

supermall实战项目 01