目录
购物车案例
1. 案例效果
2. 实现步骤
- ① 初始化项目基本结构
- ② 封装 EsHeader 组件
- ③ 基于 axios 请求商品列表数据
- ④ 封装 EsFooter 组件
- ⑤ 封装 EsGoods 组件
- ⑥ 封装 EsCounter 组件
1. 初始化项目结构
运行如下的命令,初始化 vite 项目:
npm init vite-app code-cart
cd code-cart
npm install
2. 清理项目结构:
- 把 bootstrap 相关的文件放入 src/assets 目录下
- 在 main.js 中导入 bootstrap.css
- 清空 App.vue 组件
- 删除 components 目录下的 HelloWorld.vue 组件
3. 为组件的样式启用 less 语法
npm i less -D
4.初始化 index.css 全局样式如下:
:root {
font-size: 12px;
}
2. 封装 es-header 组件
2.1 创建并注册 EsHeader 组件
1. 在 src/components/es-header/ 目录下新建 EsHeader.vue 组件:
<template>
<div>EsHeader 组件</div>
</template> <script>
export default {
name: 'EsHeader', }
</script> <style lang="less" scoped></style>
2. 在 App.vue 组件中导入并注册 EsHeader.vue 组件:
// 导入 header 组件
import EsHeader from './components/es-header/EsHeader.vue'
export default {
name: 'MyApp',
components: {
// 注册 header 组件
EsHeader,
},
}
3. 在 App.vue 的 template 模板结构中使用 EsHeader 组件:
<template>
<div>
<h1>App 根组件</h1>
<!-- 使用 es-header 组件 -->
<es-header></es-header>
</div>
</template>
2.2 封装 es-header 组件
0. 封装需求:
- 允许用户自定义 title 标题内容
- 允许用户自定义 color 文字颜色
- 允许用户自定义 bgcolor 背景颜色
- 允许用户自定义 fsize 字体大小
- es-header 组件必须固定定位到页面顶部的位置,高度为 45px,文本居中,z-index 为 999
1. 在 es-header 组件中封装以下的 props 属性:
export default {
name: 'EsHeader',
props: {
title: { // 标题内容
type: String,
default: 'es-header',
},
bgcolor: { // 背景颜色
type: String,
default: '#007BFF',
},
color: { // 文字颜色
type: String,
default: '#ffffff',
},
fsize: { // 文字大小
type: Number,
default: 12,
},
},
}
2. 渲染标题内容,并动态为 DOM 元素绑定行内的 style 样式对象:
<template>
<div :style="{ color: color, backgroundColor: bgcolor, fontSize:
fsize + 'px' }">{
{ title }}</div>
</template>
3. 为 DOM 节点添加 header-container 类名,进一步美化 es-header 组件的样式:
<template>
<div class="header-container" :style="{ color: color,
backgroundColor: bgcolor, fontSize: fsize + 'px' }">
{
{ title }}
</div>
</template> <style lang="less" scoped>
.header-container {
height: 45px;
line-height: 45px;
text-align: center;
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 999;
}
</style>
4. 在 App 根组件中使用 es-header 组件时,通过 title 属性 指定 标题内容
<template>
<div class="app-container">
<h1>App 根组件</h1>
<!-- 为 es-header 组件指定 title 属性的值 -->
<es-header title="购物车案例"></es-header>
</div>
</template>
3. 基于 axios 请求商品列表数据
1.运行如下的命令安装 axios
npm i axios -S
2.在 main.js 入口文件中导入并全局配置 axios :
import { createApp } from 'vue'
import App from './App.vue'
import './assets/css/bootstrap.css'
import './index.css'
// 导入 axios
import axios from 'axios'
const app = createApp(App)
// 配置请求的根路径
axios.defaults.baseURL = 'https://www.escook.cn'
// 将 axios 挂载为全局的 $http 自定义属性
app.config.globalProperties.$http = axios
app.mount('#app')
3.2 请求商品列表数据
1. 在 App.vue 根组件中声明如下的 data 数据:
data() {
return {
// 商品列表的数据
goodslist: [],
}
},
2. 在 App.vue 根组件的 created 生命周期函数中, 预调用 获取商品列表数据 的 methods 方法
/ 组件实例创建完毕之后的生命周期函数
created() {
// 调用 methods 中的 getGoodsList 方法,请求商品列表的数据
this.getGoodsList()
},
3. 在 Ap.vue 根组件的 methods 节点中,声明刚才预调用的 getGoodsList 方法:
methods: {
// 请求商品列表的数据
async getGoodsList() {
// 1. 通过组件实例 this 访问到全局挂载的 $http 属性,并发起
Ajax 数据请求
const { data: res } = await this.$http.get('/api/cart')
// 2. 判断请求是否成功
if (res.status !== 200) return alert('请求商品列表数据失败!')
// 3. 将请求到的数据存储到 data 中,供页面渲染期间使用
this.goodslist = res.list
},
},
4. 封装 es-footer 组件
4.1 创建并注册 EsFooter 组件
1.在 src/components/es-footer/ 目录下新建 EsFooter.vue 组件:
<template>
<div>EsFooter 组件</div>
</template> <script>
export default {
name: 'EsFooter', }
</script> <style lang="less" scoped></style>
2. 在 App.vue 组件中导入并注册 EsFooter.vue 组件:
// 导入 header 组件
import EsHeader from './comp