Vue3小兔仙电商项目实战

 Vue3小兔仙电商项目实战

项目技术栈

• create-vue
• Pinia
• ElementPlus
• Vue3-Setup
• Vue-Router
• VueUse

项目规模

项目亮点：

• 基于业务逻辑的组件拆分思想
•  长页面吸顶交互实现
• SKU电商组件封装
• 图片懒加载指令封装
• 通用逻辑函数封装
• 面板插槽组件等业务通用组件封装
• 路由缓存问题处理
• 支付宝第三方支付

项目初始化

src目录调整

 

配置别名路径联想提示

什么是别名路径联想提示？
在编写代码的过程中，一旦输入 @/ ，webstorm就会立即 联想出src下的所有子目录和文件，统一文件路径访问不容易出错。

如何进行配置？

1、在项目的根目录下新增 jsconfig.json 文件

2、添加json格式的配置项，如下：

jsconfig.json

{"compilerOptions":{"baseUrl":"./","paths": {"@/*": ["src/*"]}}
}

注意：该配置只做联想提示，不能进行实际路径转换。

实际路径转换在vite.config.js文件中

emelentPlus 组件库按需引入

element-plus官网 ：快速开始 | Element Plus

1、安装element-plus 

npm install element-plus --save

2、安装自动导入插件

npm install -D unplugin-vue-components unplugin-auto-import

-D 表示安装到开发环境 

3、然后对项目根目录下的 vite.config.js 进行配置

import { fileURLToPath, URL } from 'node:url'import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'// https://vitejs.dev/config/
export default defineConfig({plugins: [vue(),AutoImport({resolvers: [ElementPlusResolver()],}),Components({resolvers: [ElementPlusResolver()],}),],resolve: {alias: {'@': fileURLToPath(new URL('./src', import.meta.url))}}
})

4、使用element-plus 组件

<script setup>
defineProps({msg: {type: String,required: true}
})
</script><template><div ><el-button>Default</el-button></div>
</template><style scoped></style>

5、运行结果：

​

emelentPlus 主题定制

为什么需要主题定制？

因为小兔仙的主题色和elementPlus 默认的主题色存在冲突，通过定制主题让elementPlus 的主题色和小兔仙项目保持一致。

​

如何定制？

通过scss变量替换方案。

因为elementPlus 采用的是SCSS语言，为了方便变量替换，本项目也需要安装SCSS。

​

1、安装sass

npm i sass -D

​

 2、准备定制化的样式文件

styles/element/index.scss

// styles/element/index.scss
/* 修改elementPlus 的主题色 */
@forward 'element-plus/theme-chalk/src/common/var.scss' with ($colors: ('primary': (// 主色'base': #27ba9b,),'success': (// 成功颜色'base': #1dc779,),'warning': (// 警告颜色'base': #ffb302,),'danger': (// 危险颜色'base': #e26237,),'error': (// 错误颜色'base': #cf4444,),),
);

3、自定导入配置

import { fileURLToPath, URL } from 'node:url'import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'// element-plus 按需引入
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'// https://vitejs.dev/config/
export default defineConfig({plugins: [vue(),AutoImport({resolvers: [ElementPlusResolver()],}),Components({// 1、配置elementplus 采用sass 样式配色系统resolvers: [ElementPlusResolver({importStyle:'sass'})],}),],resolve: {alias: {'@': fileURLToPath(new URL('./src', import.meta.url))}},css: {preprocessorOptions: {scss: {// 2、自动导入定制化样式文件进行样式覆盖additionalData: `@use "@/styles/element/index.scss" as *;`,},},},
})

如何验证主题是否替换成功？

​

执行结果：

​

axios 基础配置

1、安装axios

npm i axios

2、对axios进行配置

​

https.js

import axios from 'axios';// 网络请求基础封装
const http = axios.create({baseURL:'http://pcapi-xiaotuxian-front-devtest.itheima.net',timeout:5000
})// 请求拦截器
http.interceptors.request.use(config => {return config
},error => Promise.reject(error))// 响应拦截器
http.interceptors.response.use(res => {console.log("response",res)return res.data;
},error => {console.log("response",error)return  Promise.reject(error)
})export default http

apis/index.js

import http from "@/utils/http";/*** 获取分类* @returns {*}*/
export function getCategory() {return http({url:"home/category/head"})}

测试接口请求

// 测试接口是否可以获取到数据
import { getCategory } from '@/apis/index'getCategory().then(res => {console.log("getCategory-res",res)
}).catch(err => {console.log("getCategory-err",err)
})

执行结果：

​

如果项目里面不同的业务模块需要的接口基地址不同，该如何操作？
axios.create()方法可以执行多次，每次执行就会生成一个新的实例，比如：

// 网络请求基础封装
const http = axios.create({baseURL:'http://pcapi-xiaotuxian-front-devtest.itheima.net',timeout:5000
})// 基础地址2
const http2 = axios.create({baseURL:'http//xxx.xxx.com',timeout:5000
})

项目路由设计

设置首页和登录页的路由（一级路由）

路由设计原则：找内容切换的区域，如果是页面整体切换，则为一级路由。

​

创建Login.vue登录页面和Layout.vue 首页面 

​

 配置路由

​

设置一级路由出口

​

执行结果：

​

设置分类页和默认Home页路由（二级路由）

路由设计原则：找内容切换的区域，如果是在 一级路由页的内部切换 ，则为二级路由。

​

创建Home.vue和Category.vue页面

​

配置二级路由

​

设置二级路由出口

​

执行结果如下：

​

总结：

1、路由设计的依据是什么？

内容切换的方式

2、默认二级路由如何进行设置？

将path属性值设置为空

path:''

项目静态资源初始化

静态资源分为图片资源和样式资源。

• 图片资源。把 images 文件夹放到 assets 目录下
• 样式资源。把common.scss 文件夹放到 styles 目录下

​

SCSS文件自动导入

为什么要自动导入？
在项目中一些组件共享的色值会以scss变量的方式统一放到一个名为var.scss的文件中，正常组件中使用时需要先导入 scss 文件，然后再使用变量，比较繁琐，自动导入 可以免去手动导入的步骤，直接使用内部变量，如下图所示：

​

如何才能自动导入？

1、新建一个var.scss文件，存入色值变量。

2、然后通过 vite.config.js 配置自动导入文件。

var.scss文件

​

配置自动导入

@use "@/styles/var.scss" as *;

​

测试是否生效

​

​

Layout组件

静态模版结构搭建

​

编写Nav.vue、Header.vue、Fooler.vue组件

​

导入上述组件 ​

执行结果：

​

字体图标引入

项目中使用的字体图标来自阿里图库，采用的是 font-class  引用的方式

font-class 引入步骤参见：iconfont-阿里巴巴矢量图标库 

​

在线css文件如何获取？
1、首先搜索需要的图标

​

2、然后将指定的图标加入到购物车

​

3、然后点击购物车，添加到项目

​

​

4、然后选择font class， 然后点击生成代码

​

然后就得到在线css文件地址 

​

在线css如何引用？

只需要在根目录下的index.html中引入即可

​

然后挑选相应图标并获取类名，应用于页面，如下代码：

<i class="iconfont icon-kefu"></i>

iconfont 为基础类名

icon-kefu  为选择的图标类名

执行结果：

​

一级导航渲染 

使用后端接口渲染一级路由导航，如下截图：

​

​

 执行结果：

​

吸顶导航交互实现

要求：当浏览器在上下滚动的过程中，如果距离顶部的滚动距离大于78px时，吸顶导航显示，小于78px隐藏，如下截图：

​

实现步骤：

1. 准备吸顶导航组件  Fixed.vue
2. 获取滚动距离 （通过VueUse 中的 useScroll 函数实现）
3. 以滚动距离做判断条件控制组件盒子展示隐藏

Fixed.vue 

<script setup>
import { ref,onMounted } from "vue"
import { getCategoryAPI } from '@/apis/layout'import { useScroll } from "@vueuse/core"const categoryData = ref([])const requestGetCategory = async () => {const res = await getCategoryAPI()console.log("requestGetCategory",res)categoryData.value = res.result;
}onMounted(() => {requestGetCategory()
})// 因为是基于window 滚动，所以传入的是window对象
const { y } = useScroll(window)</script><template><div class="app-header-sticky" :class="{ show: y > 78 }"><div class="container"><RouterLink class="logo" to="/" /><!-- 导航区域 --><ul class="app-header-nav"><li class="home"><RouterLink to="/">首页</RouterLink></li><liclass="home"v-for="item in categoryData":key="item.id"><RouterLink active-class="active" :to="`/category/${item.id}`">{{item.name}}</RouterLink></li></ul><div class="right"><RouterLink to="/">品牌</RouterLink><RouterLink to="/">专题</RouterLink></div></div></div>
</template><style scoped lang="scss">
.app-header-sticky {width: 100%;height: 80px;position: fixed;left: 0;top: 0;z-index: 999;background-color: #fff;border-bottom: 1px solid #e4e4e4;// 此处为关键样式!!!// 状态一：往上平移自身高度 + 完全透明transform: translateY(-100%);opacity: 0;// 状态二：移除平移 + 完全不透明&.show {transition: all 0.3s linear;transform: none;opacity: 1;}.container {display: flex;align-items: center;}.logo {width: 200px;height: 80px;background: url("@/assets/images/logo.png") no-repeat right 2px;background-size: 160px auto;}.right {width: 220px;display: flex;text-align: center;padding-left: 40px;border-left: 2px solid $xtxColor;a {width: 38px;margin-right: 40px;font-size: 16px;line-height: 1;&:hover {color: $xtxColor;}}}
}.app-header-nav {width: 820px;display: flex;padding-left: 40px;position: relative;z-index: 998;li {margin-right: 40px;width: 38px;text-align: center;a {font-size: 16px;line-height: 32px;height: 32px;display: inline-block;&:hover {color: $xtxColor;border-bottom: 1px solid $xtxColor;}}.active {color: $xtxColor;border-bottom: 1px solid $xtxColor;}}
}
</style>

Pinia 优化重复请求

为什么要优化？

因为Fixed.vue组件和Header.vue组件中，当DOM加载完成以后都会调用分类接口获取数据，发送了两次网络请求，比较浪费资源，可以通过Pinia 集中管理数据，再把数据给组件使用。

Fixed.vue

​

  

Header.vue

​

​ 

如何优化？

​

1、通过pinia 对导航分类数据进行管理

import { defineStore } from "pinia"
import { getCategoryAPI } from "@/apis/layout"
import { ref } from "vue"/*** 导航分类的数据管理* @type*/
export const useCategoryStore = defineStore("category", () => {// 导航列表的逻辑const categoryList = ref()const getCategory = async () => {const res = await getCategoryAPI()categoryList.value = res.result}return {categoryList,getCategory,}
})

2、然后在吸顶导航组件和常规导航组件的父容器Layout组件中触发请求

<script setup>
import { onMounted } from 'vue';
import Nav from "./components/Nav.vue"
import Header from "./components/Header.vue"
import Footer from "./components/Footer.vue"
import Fixed from "./components/Fixed.vue"
import { useCategoryStore } from '@/stores/category.js'const categoryStore = useCategoryStore()onMounted(() => {// 触发获取导航列表的actioncategoryStore.getCategory()
})</script><template><Fixed /><Nav /><Header /><RouterView /><Footer />
</template>

3、在吸顶导航组件化和常规导航组件中使用pinia 中的分类数据

<script setup>
import { useCategoryStore } from "@/stores/category";
import { useScroll } from "@vueuse/core"// 因为是基于window 滚动，所以传入的是window对象
const { y } = useScroll(window)// 使用pinia获取分类数据
const categoryStore = useCategoryStore()</script><template><div class="app-header-sticky" :class="{ show: y > 78 }"><div class="container"><RouterLink class="logo" to="/" /><!-- 导航区域 --><ul class="app-header-nav"><li class="home"><RouterLink to="/">首页</RouterLink></li><liclass="home"v-for="item in categoryStore.categoryList":key="item.id"><RouterLink active-class="active" :to="`/category/${item.id}`">{{item.name}}</RouterLink></li></ul><div class="right"><RouterLink to="/">品牌</RouterLink><RouterLink to="/">专题</RouterLink></div></div></div>
</template><style scoped lang="scss">
.app-header-sticky {width: 100%;height: 80px;position: fixed;left: 0;top: 0;z-index: 999;background-color: #fff;border-bottom: 1px solid #e4e4e4;// 此处为关键样式!!!// 状态一：往上平移自身高度 + 完全透明transform: translateY(-100%);opacity: 0;// 状态二：移除平移 + 完全不透明&.show {transition: all 0.3s linear;transform: none;opacity: 1;}.container {display: flex;align-items: center;}.logo {width: 200px;height: 80px;background: url("@/assets/images/logo.png") no-repeat right 2px;background-size: 160px auto;}.right {width: 220px;display: flex;text-align: center;padding-left: 40px;border-left: 2px solid $xtxColor;a {width: 38px;margin-right: 40px;font-size: 16px;line-height: 1;&:hover {color: $xtxColor;}}}
}.app-header-nav {width: 820px;display: flex;padding-left: 40px;position: relative;z-index: 998;li {margin-right: 40px;width: 38px;text-align: center;a {font-size: 16px;line-height: 32px;height: 32px;display: inline-block;&:hover {color: $xtxColor;border-bottom: 1px solid $xtxColor;}}.active {color: $xtxColor;border-bottom: 1px solid $xtxColor;}}
}
</style>

Home组件

整体结构搭建和分类实现