成为构架师必知的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  配置 

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

相关文章
|
2月前
|
数据采集 监控 JavaScript
在 Vue 项目中使用预渲染技术
【10月更文挑战第23天】在 Vue 项目中使用预渲染技术是提升 SEO 效果的有效途径之一。通过选择合适的预渲染工具,正确配置和运行预渲染操作,结合其他 SEO 策略,可以实现更好的搜索引擎优化效果。同时,需要不断地监控和优化预渲染效果,以适应不断变化的搜索引擎环境和用户需求。
|
2月前
|
JavaScript 前端开发
如何在 Vue 项目中配置 Tree Shaking?
通过以上针对 Webpack 或 Rollup 的配置方法,就可以在 Vue 项目中有效地启用 Tree Shaking,从而优化项目的打包体积,提高项目的性能和加载速度。在实际配置过程中,需要根据项目的具体情况和需求,对配置进行适当的调整和优化。
|
2月前
Vue3 项目的 setup 函数
【10月更文挑战第23天】setup` 函数是 Vue3 中非常重要的一个概念,掌握它的使用方法对于开发高效、灵活的 Vue3 组件至关重要。通过不断的实践和探索,你将能够更好地利用 `setup` 函数来构建优秀的 Vue3 项目。
|
2月前
|
JavaScript 前端开发 持续交付
构建现代Web应用:Vue.js与Node.js的完美结合
【10月更文挑战第22天】随着互联网技术的快速发展,Web应用已经成为了人们日常生活和工作的重要组成部分。前端技术和后端技术的不断创新,为Web应用的构建提供了更多可能。在本篇文章中,我们将探讨Vue.js和Node.js这两大热门技术如何完美结合,构建现代Web应用。
45 4
|
3月前
|
JavaScript 前端开发 编译器
在 Vue 项目中使用 ES 模块格式的优点
【10月更文挑战第20天】在 Vue 项目中使用 ES 模块格式具有众多优点,这些优点共同作用,使得项目能够更高效、更可靠地开发和运行。当然,在实际应用中,还需要根据项目的具体情况和需求进行合理的选择和配置。
48 6
|
2月前
|
JavaScript 测试技术 UED
解决 Vue 项目中 Tree shaking 无法去除某些模块
【10月更文挑战第23天】解决 Vue 项目中 Tree shaking 无法去除某些模块的问题需要综合考虑多种因素,通过仔细分析、排查和优化,逐步提高 Tree shaking 的效果,为项目带来更好的性能和用户体验。同时,持续关注和学习相关技术的发展,不断探索新的解决方案,以适应不断变化的项目需求。
|
8天前
|
JavaScript
vue使用iconfont图标
vue使用iconfont图标
56 1
|
18天前
|
JavaScript 关系型数据库 MySQL
基于VUE的校园二手交易平台系统设计与实现毕业设计论文模板
基于Vue的校园二手交易平台是一款专为校园用户设计的在线交易系统,提供简洁高效、安全可靠的二手商品买卖环境。平台利用Vue框架的响应式数据绑定和组件化特性,实现用户友好的界面,方便商品浏览、发布与管理。该系统采用Node.js、MySQL及B/S架构,确保稳定性和多功能模块设计,涵盖管理员和用户功能模块,促进物品循环使用,降低开销,提升环保意识,助力绿色校园文化建设。
|
2月前
|
JavaScript 前端开发 开发者
vue学习第一章
欢迎来到我的博客!我是瑞雨溪,一名热爱前端的大一学生,专注于JavaScript与Vue,正向全栈进发。博客分享Vue学习心得、命令式与声明式编程对比、列表展示及计数器案例等。关注我,持续更新中!🎉🎉🎉
49 1
vue学习第一章
|
2月前
|
JavaScript 前端开发 索引
vue学习第三章
欢迎来到瑞雨溪的博客,一名热爱JavaScript与Vue的大一学生。本文介绍了Vue中的v-bind指令,包括基本使用、动态绑定class及style等,希望能为你的前端学习之路提供帮助。持续关注,更多精彩内容即将呈现!🎉🎉🎉
34 1