{"id":19848616,"url":"https://github.com/incaves/erabbit-client-pc","last_synced_at":"2026-05-14T17:02:09.097Z","repository":{"id":185288955,"uuid":"531484913","full_name":"incaves/erabbit-client-pc","owner":"incaves","description":"小兔鲜商城","archived":false,"fork":false,"pushed_at":"2022-09-30T05:48:09.000Z","size":1811,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-28T23:02:06.796Z","etag":null,"topics":["axios","less","vue","vue-router","vue3-composition-api","vuex"],"latest_commit_sha":null,"homepage":"","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/incaves.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2022-09-01T11:17:37.000Z","updated_at":"2022-09-14T04:44:23.000Z","dependencies_parsed_at":"2023-08-01T11:46:29.173Z","dependency_job_id":null,"html_url":"https://github.com/incaves/erabbit-client-pc","commit_stats":null,"previous_names":["incaves/erabbit-client-pc"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/incaves/erabbit-client-pc","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/incaves%2Ferabbit-client-pc","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/incaves%2Ferabbit-client-pc/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/incaves%2Ferabbit-client-pc/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/incaves%2Ferabbit-client-pc/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/incaves","download_url":"https://codeload.github.com/incaves/erabbit-client-pc/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/incaves%2Ferabbit-client-pc/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":33034788,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-13T13:14:54.681Z","status":"online","status_checked_at":"2026-05-14T02:00:06.663Z","response_time":57,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["axios","less","vue","vue-router","vue3-composition-api","vuex"],"created_at":"2024-11-12T13:17:48.847Z","updated_at":"2026-05-14T17:02:09.081Z","avatar_url":"https://github.com/incaves.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"# erabbit-client-pc-124\n\n## Project setup\n\n```\nyarn install\n```\n\n### Compiles and hot-reloads for development\n\n```\nyarn serve\n```\n\n### Compiles and minifies for production\n\n```\nyarn build\n```\n\n### Lints and fixes files\n\n```\nyarn lint\n```\n\n### Customize configuration\n\nSee [Configuration Reference](https://cli.vuejs.org/config/).\n\n### 项目目录介绍\n\n```javascript\nnode_modules       -- 所有的项目依赖包都放在这个目录下\npublic             -- 公共文件夹\n    favicon.ico      -- 网站的显示图标\n    index.html       -- 入口的html文件\nsrc                -- 源文件目录,编写的代码基本都在这个目录下\n    api            -- 请求\n        constants.js -- 定义一个常量数据和后台保持一致,这样不请求后台就能展示一级分类,不至于白屏\n        category.js  -- 分类相关api请求\n        home.js      -- 首页相关api请求\n        product.js   -- 商品详情相关api请求\n        user.js      -- 用户相关的api请求\n    assets           -- 放置静态文件的目录\n        images     -- 图片\n        style      -- less预处理器脚本\n            common.less -- 重置样式\n            minxins.less -- 混入(函数式),vue.config.js已配置,使用后每个元素有动画效果\n            variables.less -- 全局less变量\n    components       -- 全局组件,公共组件\n        app-topnav.vue -- 顶部通栏(固定)\n        app-header.vue -- 头部(存在二级分类)\n        app-footer.vue -- 底部\n        app-header-nav.vue -- 头部和滑动吸顶效果用的是同一种方式,封装成一个组件\n        app-header-sticky.vue -- 吸顶头部\n        app-member-aside.vue  -- 个人中心左侧菜单\n        Message.js -- 消息提示(将XtxMessage组件,设置为函数式调用)\n        library    -- 全局组件插件\n                xtx-skeleton.vue  -- 骨架屏组件 (未加载成功时显示,类似于Vant中的骨架屏,可以对其设置宽高背景等样式),\n                xtx-carousel.vue  -- 轮播图组件\n                xtx-more.vue      -- 面板组件(右上角存在:\"查看更多\"的标题,公用一个组件,注意唯一不同的是跳转的页面不同)\n                xtx-bread.vue     -- 面包屑(函数式组件使用render函数渲染模版)\n                xtx-bread-item.vue -- 单个面包屑组件(参考ElementUi)\n                xtx-infinite-loading.vue -- 无限加载组件(有数据加载时展示 加载中..)(没有数据时 展示: 没有更多了..)\n                xtx-city.vue      -- 城市组件(选择地址)\n                xtx-message.vue   -- 消息提示组件(添加成功,登录成功时,登录失败,警告等提示),注意:没有挂载到原型\n                index.js          -- 注册全局插件(图片懒加载,批量注册组件)\n    hooks          -- 全局方法(全局复用方法)\n    mock           -- 模拟数据\n    router         -- 路由\n    store          -- Vuex\n        modules    -- 模块化\n            user.js -- 用户模块\n            cate.js -- 购物车模块\n            category.js -- 分类模块\n        index.js   -- Vuex\n    utils          -- 工具\n        request.js -- 封装请求方法\n        vee-validate-schema.js -- 表单校验规则\n    vender         -- 第三方Js\n    views          -- 路由页面\n            Layout.vue -- 布局容器\n            brand  -- 品牌\n            category  -- 分类\n                index.vue -- 一级分类(首页点击一级类目根据id来到此组件)\n                sub.vue -- 二级分类(首页点击二级类目图片根据id来到此组件)\n                components \n                    goods-item.vue -- 单个商品组件\n                    sub-bread.vue  -- 二级分类页面的面包屑组件\n                    sub-filter.vue -- 二级分类筛选区域\n                    sub-sort.vue   -- 二级分类排序区域\n            goods  -- 商品\n              index.vue -- 商品布局页面\n              components \n                    goods-image.vue    -- 商品图片预览区域(左侧大图和右侧五个小图)\n                    goods-relevant.vue -- 商品推荐\n                    goods-sales.vue    -- 商品信息(放大镜图片预览下的信息,静态页面)\n                    goods-name.vue     -- 商品逆袭(右侧商品信息)\n                    goods-sku.vue      -- 规格选择组件(颜色,尺寸..)\n            home   -- 首页\n                components\n                    home-category.vue -- 首页左侧侧边栏\n                    home-banner.vue   -- 装载首页轮播图的容器(轮播图组件数据不是固定的,不能固定宽高,可能其他地方要使用,所以重新定义一个容器)\n                    home-panel.vue --  面板组件(负责每个楼层的标题和右侧内容)\n                    home-skeleton.vue -- 骨架屏组件(用于人气推荐和新鲜好物使用,防止数据为加载完成时的白屏效果)\n                    home-new.vue  --  新鲜好物\n                    home-hot.vue  --  人气推荐\n                    home-brand.vue -- 热门品牌\n                    home-goods.vue -- 单个商品(每个商品)\n                    home-product.vue -- 承载单个商品的容器\n                    home-special.vue -- 最新专题\n                    商品区域和最新专题没有做骨架屏效果,只做了数据懒加载和图片懒加载\n            member -- 会员中心\n                pay -- 结算支付\n                home -- 个人中心首页\n                order -- 订单管理\n            search -- 搜索\n            login  -- 登录\n                components\n                     login-form.vue   -- 登录框的表单组件\n                     login-header.vue     -- 登录页头部\n                     login-footer.vue     -- 登录页底部\n    App.vue          -- 根组件\n    main.js          -- 入口文件\n.browserslistrc    -- 在不同前端工具之间公用目标浏览器和node版本的配置文件,作用是设置兼容性\n.editorconfig      -- 编辑器使用的文件,使用习惯等\n.eslintignore      -- eslist校验忽略文件\n.eslintrc.js       -- Eslint的配置文件\njsconfig.json      -- @代表src,提示路径\n.gitignore         -- 用来配置那些文件不归git管理\nREADME.md          -- 项目的说明文件,使用markdown语法进行编写\nyarn.lock          -- 使用yarn后自动生成的文件,由Yarn管理,安装yarn包时的重要信息存储到yarn.lock文件中\nvue.config.js      -- webpack\n```\n## 楼层区域\n```javascript\nxtx-more.vue 查看更多和负责跳转\nhome-panel.vue 容器 标题 内容\n组成一个楼层面板\n\u003cHomePanel title=\"标题\" subTitle=\"副标题\"\u003e\n    // 右侧插槽\n    \u003ctemplate #right\u003e\n      \u003c!-- 查看更多 --\u003e\n      \u003cXtxMore path=\"/\"\u003e\u003c/XtxMore\u003e\n    \u003c/template\u003e\n    // 插槽\n    \u003cdiv\u003e数据内容区域\u003c/div\u003e\n\u003c/HomePanel\u003e\n```\n## 复习Vue动画\n```javascript\n一个元素显示或隐藏时,才可以触发动画\n使用tranistion组件实现动画,一个元素或者组件的(显示/隐藏,创建/移除)\n进入\n进入前 v-enter (v-enter-from-Vue3)\n进入中 v-enter-active\n进入后 v-enter-to\n离开\n离开前 v-leave (v-leave-from-Vue3)\n离开中 v-leave-active\n离开后 v-leave-to\n\u003ctransition\u003e\n    \u003cdiv class=\"box\" v-if=\"show\"\u003e\u003c/div\u003e\n\u003c/transition\u003e\n.v-enter-from {\n  opacity: 0;\n}\n.v-enter-active {\n  transition: all 2s;\n}\n.v-enter-to {\n  opacity: 1;\n}\n// 可以给动画赋予名字用来生成多个\n\u003ctransition name=\"fade\"\u003e\n    \u003cdiv class=\"box\" v-if=\"show\"\u003e\u003c/div\u003e\n\u003c/transition\u003e\n.fade-enter-from {\n  opacity: 0;\n}\n.fade-enter-active {\n  transition: all 2s;\n}\n.fade-enter-to {\n  opacity: 1;\n}\n```\n### 面包屑\n```javascript\nXtxBread 是承载面包屑的容器  \nXtxBreadItem 是单个面包屑  \n参考elementui的做法  \n可以多次复用,也可以运用多级分类,而且第一个分类的值是首页时固定的\n面包屑的动画效果,如果加上mode属性,会使数据丢失,还未解决  \n```\n### vueuse\n```javascript\nuseWindowScroll   \u003c吸顶效果 没有使用\u003e\nuseVModel         \u003c父子组件双向绑定\u003e\nuseMouseInElement \u003c用于放大镜效果\u003e\nuseIntersectionObserver \u003c监听元素是否进入可视区\u003e\nonClickOutside \u003c监听元素外部的点击,城市选择框点击其他位置关闭\u003e \nuseIntervalFn  \u003c用于发送验证码的60秒倒计时\u003e\n```\n### 组件实例\n```javascript\n如果想在组合式API中使用实例\n注意:此时已挂载到原型的基础上 app.config.globalProperties.$messgae = Message\nconst { proxy } = getCurrentInstance()\nproxy.$message()\n------ \nproxy = this  相同的意思\n```","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fincaves%2Ferabbit-client-pc","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fincaves%2Ferabbit-client-pc","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fincaves%2Ferabbit-client-pc/lists"}