成为构架师必知的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学习第四章
欢迎来到我的博客!我是瑞雨溪,一名热爱JavaScript与Vue的大一学生。本文介绍了Vue中计算属性的基本与复杂使用、setter/getter、与methods的对比及与侦听器的总结。如果你觉得有用,请关注我,将持续更新更多优质内容!🎉🎉🎉
vue学习第四章
|
8天前
|
JavaScript 前端开发
vue学习第九章(v-model)
欢迎来到我的博客,我是瑞雨溪,一名热爱JavaScript与Vue的大一学生,自学前端2年半,正向全栈进发。此篇介绍v-model在不同表单元素中的应用及修饰符的使用,希望能对你有所帮助。关注我,持续更新中!🎉🎉🎉
vue学习第九章(v-model)
|
8天前
|
JavaScript 前端开发 开发者
vue学习第十章(组件开发)
欢迎来到瑞雨溪的博客,一名热爱JavaScript与Vue的大一学生。本文深入讲解Vue组件的基本使用、全局与局部组件、父子组件通信及数据传递等内容,适合前端开发者学习参考。持续更新中,期待您的关注!🎉🎉🎉
vue学习第十章(组件开发)
|
13天前
|
JavaScript 前端开发 UED
vue学习第二章
欢迎来到我的博客!我是一名自学了2年半前端的大一学生,熟悉JavaScript与Vue,目前正在向全栈方向发展。如果你从我的博客中有所收获,欢迎关注我,我将持续更新更多优质文章。你的支持是我最大的动力!🎉🎉🎉
|
13天前
|
JavaScript 前端开发 开发者
vue学习第一章
欢迎来到我的博客!我是瑞雨溪,一名热爱JavaScript和Vue的大一学生。自学前端2年半,熟悉JavaScript与Vue,正向全栈方向发展。博客内容涵盖Vue基础、列表展示及计数器案例等,希望能对你有所帮助。关注我,持续更新中!🎉🎉🎉
|
JavaScript Java 物联网
现有vue项目seo优化
现有vue项目seo优化
|
JavaScript 前端开发
重读vue电商网站45之项目优化上线
重读vue电商网站45之项目优化上线
134 0
重读vue电商网站45之项目优化上线
|
13天前
|
JavaScript 前端开发
如何在 Vue 项目中配置 Tree Shaking?
通过以上针对 Webpack 或 Rollup 的配置方法,就可以在 Vue 项目中有效地启用 Tree Shaking,从而优化项目的打包体积,提高项目的性能和加载速度。在实际配置过程中,需要根据项目的具体情况和需求,对配置进行适当的调整和优化。
|
14天前
|
存储 缓存 JavaScript
在 Vue 中使用 computed 和 watch 时,性能问题探讨
本文探讨了在 Vue.js 中使用 computed 计算属性和 watch 监听器时可能遇到的性能问题,并提供了优化建议,帮助开发者提高应用性能。
|
14天前
|
存储 缓存 JavaScript
如何在大型 Vue 应用中有效地管理计算属性和侦听器
在大型 Vue 应用中,合理管理计算属性和侦听器是优化性能和维护性的关键。本文介绍了如何通过模块化、状态管理和避免冗余计算等方法,有效提升应用的响应性和可维护性。
下一篇
无影云桌面