vue商城项目学习实战第一篇

 1、前端项目设计图

2.根据设计图做对应开发，开发分3大块，头部区域，中间区域，底部区域，根据上面3部分做对应开发。（前提条件是已经搭建完毕vue-cli脚手架，项目启动成功访问到vue默认首页，此项目是环境已经装备ok的基础上开发）

2.1前期准备工作

        在assets目录下创建目录css及样式文件mall.css；创建存贮图片目录image。

        在mall.css编写通用样式

/* 格式化样式 */
h1,
h2,
h3,
h4,
h5,
h6,
p,
body,
div,
form,
input,
button,
th,
td,
ol,
ul,
dl,
li,
dd,
dt {
  margin: 0;
  padding: 0;
}

/* 版心 */
.warp {
  width: 1200px;
  margin: 0 auto;
  background: blanchedalmond;
}

/* 去掉有序无序标记样式 */
ol,
ul {
  list-style: none;
}

/* 去掉a标签样式 */
a {
  text-decoration: none;
  color: #000;
}

a:hover {
  color: #ff3131;
}

/* 去掉img样式 */
img {
  vertical-align: middle;
  border: 0;
}

/* 超出隐藏 */
.dn {
  display: none;
}

.otw {
  overflow: hidden;
  /*超出的文本隐藏*/
  text-overflow: ellipsis;
  /*溢出用省略号显示*/
  white-space: nowrap;
  /*溢出不换行*/
}

2.2开发头部header区域

        在components目录下创建header组件

<template>
    <div class="header">
        <div class="title warp">
            <div class="logo">
                <img src="https://res.vmallres.com/portal/1.24.2.300.Re.20240204175745/h5/images/logo_app.png">
            </div>
            <div class="nav">
                <ul>
                    <li><a>全部分类</a></li>
                    <li><a>华为</a></li>
                    <li><a>鸿蒙智行</a></li>
                    <li><a>华为智选</a></li>
                    <li><a>生态周边</a></li>
                </ul>
            </div>
        </div>
    </div>
</template>


<script>
export default {
    name: 'Header',
}
</script>

<style></style>

        在mall.css编写对应样式

/* 头部区域样式 */
.header {
  height: 70px;
  background-color: rgb(255, 255, 255);
}

.header .title {
  height: 70px;
  display: flex;
}

.header .title .logo {
  height: 74px;
  width: 103px;
}

.header .title .logo img {
  height: 74px;
  width: 103px;
}

.header .title .nav {
  display: flex;
  width: calc(100% - 95px);
}

.header .title .nav ul {
  display: flex;
  justify-content: flex-start;
  width: calc(100% - 95px);
}

.header .title .nav ul li {
  width: 104px;
  height: 21px;
  line-height: 70px;
  font-size: 16px;
  margin-left: 48px;
}

        APP.vue导入头部组件与main.js引入样式

import { createApp } from 'vue'
import App from './App.vue'
import '../src/assets/css/mall.css'


createApp(App).mount('#app')

         APP.vue根组件导入Header.vue组件，并且使用组件，呈现对应的组件内容

<template>
  <div>
    <Header></Header>
  </div>
</template>

<script>
import Header from './components/Header.vue'

export default {
  name: 'App',
  components: {
    Header
  }
}
</script>

<style>
html body {
  margin: 0 auto;
  padding: 0;
  background-color: rgb(245, 241, 241);
}
</style>

        运行npm run serve 可看见头部效果