黑马小兔鲜Vue3电商平台技术总结

Vue3电商平台

1.使用相关技术栈

create-vue, Vue3+Setup, VueRouter, VueUse, pinia

创建项目：npm init vue@latest

引入elementPlus：npm i elementPlus 配置插件 npm install -D unplugin-vue-components unplugin-auto-import

定制主题，安装sass：npm i sass -D，在src/styles和vite.config.js中进行相关配置

图片静态资源：assets/images 样式资源：styles

安装axios：npm i axios。在src/utils/http.js中实例化 - baseURL + timeout，拦截器 - 携带token 401拦截等

路由设计：整体切换为一级路由，在一级路由下切换为二级路由，以此类推。

Pinia添加：create init vue@latest

npm install pinia

2.相关模块和组件实现

长页面吸顶交互,使用pinia(state,action)优化重复请求

vueuse中useScroll LayoutFixed.vue

准备吸顶导航组件——获取滚动距离——以滚动距离做判断条件来控制组件显示还是隐藏

pinia中的action由Layout共同组件触发（在index.vue中触发获取），state用pinia管理下发给Layout组件

stores中编写导航列表数据管理，统一在LayoutHeaderUI中创建实例化对象调用，再分别在Fixed和Header中引入LayoutHeaderUI并调用。

图片懒加载指令封装,以及重复监听造成内存浪费，使用stop在监听的图片第一次完成加载之后就停止监听

指令<img v-img-lazy="item.picture">