VUE3 电商项目浅浅总结一下

最新推荐文章于 2024-06-30 14:31:21 发布

原创

最新推荐文章于 2024-06-30 14:31:21 发布 · 834 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #vue.js

本文总结了使用Vue3开发电商项目的实践经验，包括亮点如组件封装、SKU业务处理和全局函数调用。在SKU业务中，通过算法处理商品规格数据。同时，介绍了批量获取路径并注册组件的方法，以及如何实现全局函数式组件调用。

背景：

vue3.0 / 自己封装组件 / 电商购物网站

亮点：

自己封装的一些基础组件（骨架屏、checkbox、下拉刷新、分页组件、消息提示、消息确认框）
SKU业务
自己封装的message提示消息全局函数式调用

学到了

购物车操作通常分两种：本地和后端，操作用promise封装兼容同步和异步操作
批量获取路径，注册组件require.context(文件夹路径,是否获取子目录,要匹配的文件正则regExp)
@change="handle()" --> @change=($event)=>handle($event,anyParams) 既拿到事件change传出来的$event又灵活传入自己想要的参数
懒加载：可视区加载数据，可视区加载图片
actions(ctx) ctx属性模块中的还包含rootState，可以跨模块拿到其他命名空间下的vuex数据

例如：现在为cart模块，去拿user模块下的list
actions(ctx){
 ctx.rootState.user.list
}

getters:{
A(){
    return 'aaa'
}
B(state, getters){
   getters.A  //拿到同getters下其他函数 
}

总结

批量获取路径，注册组件

// import XtxSkeleton from './xtx-skeleton.vue'
// import XtxCarousel from './xtx-carousel.vue'
const importFn = require.context('./', false, /\.vue$/)
// 【importFn 2个功能：
//（1）importFn.key()获取所有符合条件的路径数组，
//（2）导入单个文件】
import XtxMessageFn from './Message'

export default {
  install (app) {
    // app.component(XtxSkeleton.name, XtxSkeleton)
    // app.component(XtxCarousel.name, XtxCarousel)
    importFn.keys().forEach(key => {