成为构架师必知的Vue目录结构和构建规范,恩师王红元的蘑菇街项目❤

简介: 成为构架师必知的Vue目录结构和构建规范,恩师王红元的蘑菇街项目❤

目录


项目开发流程


目录风格


代码组织格式


目录结构


项目开发流程

划分目录

引用两个css文件

项目模块划分:tabbar->路由映射关系

目录风格

文件夹字母小写,组件首字母大写比较清晰


代码组织格式

一个项目里页面唯一的用id,多个用class

methods,方法里面写函数,生命周期只负责调用就行

页面复杂的话就再分子组件

$el:相当于根组件,可以拿到组件的js原生值比如浏览宽高

目录结构

注意看每个文件的后缀名,没有后缀的就是文件夹。


src
  assets    静态资源
    css
      base  地基(公共样式,自己的)
      normalize  标准化(初始化样式,第三方的)
    images
      cart 购物车文件夹
      common 公共的文件夹
      detail 分支(详情页)
      home 主页
      profile 个人档案(个人页)
      tabbar 列表(标签栏)
  common  公共(放当前公共的js,混入和防抖,时间正则)
    mixin  混入
    utils  常用工具
  components    公共组件(下面组件的js都放到自己的文件夹内)
    common  公共(组件,在别的项目也可以复用的)
      navbar  导航条
      scroll  滚动
      swiper  插件(轮播图插件)
      tabbar  列表(tab栏)
      toast   吐丝(加入购物车的弹窗)
    content  内容(组件,在当前项目可以复用的)
      backTop  回到顶部
      checkButton  复选框
      goods  商品
      mainTabbar  最大的列表(我的,购物车,首页等)
      tabControl  选项卡控件(遍历流行新款精选)
  network  网络(网络请求相关js)
    detail  分支(把没有规律的数据封装成一个类)
    home  首页(首页面向首页js开发)
    request  请求(封装axios,让请求面向这个)
  router  路由
    index.js  索引 (创建路由对象和懒加载各页面,默认显示首页)
  store  仓库
    actions.js  行动(向到购物车添加商品数量)
    getters.js  吸气
    index.js    索引(这个目录里都是vuex的东西,官方推荐这样分开封装)
    mutation-types.js 变化型
    mutation.js 变化
  views  视图
    cart  购物车
      childComps (包含购物车的小组件)
      Cart.vue
    category  分类
    detail  分支(详情页)
      childComps (详情页的小组件)
      Detail.vue
    home  首页
      childComps (首页的小组件)
      Home.vue
    profile  个人档案
  App.vue  平台
  main.js  最重要的(渲染主页面)
.editorconfig  设置编程风格的统一
vue.config.js  配置 

最后,喜欢学习的小伙伴可以关注下面公_号前端老实人,可以一起交流学习!!❤

相关文章
|
8月前
|
JavaScript
Vue中如何实现兄弟组件之间的通信
在Vue中,兄弟组件可通过父组件中转、事件总线、Vuex/Pinia或provide/inject实现通信。小型项目推荐父组件中转或事件总线,大型项目建议使用Pinia等状态管理工具,确保数据流清晰可控,避免内存泄漏。
675 2
|
7月前
|
缓存 JavaScript
vue中的keep-alive问题(2)
vue中的keep-alive问题(2)
574 137
|
11月前
|
人工智能 JavaScript 算法
Vue 中 key 属性的深入解析:改变 key 导致组件销毁与重建
Vue 中 key 属性的深入解析:改变 key 导致组件销毁与重建
1098 0
|
11月前
|
JavaScript UED
用组件懒加载优化Vue应用性能
用组件懒加载优化Vue应用性能
|
12月前
|
JavaScript 数据可视化 前端开发
基于 Vue 与 D3 的可拖拽拓扑图技术方案及应用案例解析
本文介绍了基于Vue和D3实现可拖拽拓扑图的技术方案与应用实例。通过Vue构建用户界面和交互逻辑,结合D3强大的数据可视化能力,实现了力导向布局、节点拖拽、交互事件等功能。文章详细讲解了数据模型设计、拖拽功能实现、组件封装及高级扩展(如节点类型定制、连接样式优化等),并提供了性能优化方案以应对大数据量场景。最终,展示了基础网络拓扑、实时更新拓扑等应用实例,为开发者提供了一套完整的实现思路和实践经验。
1563 78
|
10月前
|
人工智能 JSON JavaScript
VTJ.PRO 首发 MasterGo 设计智能识别引擎,秒级生成 Vue 代码
VTJ.PRO发布「AI MasterGo设计稿识别引擎」,成为全球首个支持解析MasterGo原生JSON文件并自动生成Vue组件的AI工具。通过双引擎架构,实现设计到代码全流程自动化,效率提升300%,助力企业降本增效,引领“设计即生产”新时代。
681 1
|
11月前
|
JavaScript 前端开发 开发者
Vue 自定义进度条组件封装及使用方法详解
这是一篇关于自定义进度条组件的使用指南和开发文档。文章详细介绍了如何在Vue项目中引入、注册并使用该组件,包括基础与高级示例。组件支持分段配置(如颜色、文本)、动画效果及超出进度提示等功能。同时提供了完整的代码实现,支持全局注册,并提出了优化建议,如主题支持、响应式设计等,帮助开发者更灵活地集成和定制进度条组件。资源链接已提供,适合前端开发者参考学习。
688 17
|
10月前
|
JavaScript 安全
在 Vue 中,如何在回调函数中正确使用 this?
在 Vue 中,如何在回调函数中正确使用 this?
489 0
|
11月前
|
JavaScript 前端开发 UED
Vue 手风琴实现的三种常用方式及长尾关键词解析
手风琴效果是Vue开发中常见的交互组件,可节省页面空间、提升用户体验。本文介绍三种实现方式:1) 原生Vue结合数据绑定与CSS动画;2) 使用Element UI等组件库快速构建;3) 自定义指令操作DOM实现独特效果。每种方式适用于不同场景,可根据项目需求选择。示例包括产品特性页、后台菜单及FAQ展示,灵活满足多样需求。附代码示例与资源链接,助你高效实现手风琴功能。
568 10

热门文章

最新文章