当前位置:首页 » 《资源分享》 » 正文

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

28 人参与  2021年10月02日 12:23  分类 : 《资源分享》  评论

点击全文阅读


目录

项目开发流程

目录风格

代码组织格式

目录结构 


项目开发流程

  1. 划分目录
  2. 引用两个css文件
  3. 项目模块划分:tabbar->路由映射关系

目录风格

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

代码组织格式

  1. 一个项目里页面唯一的用id,多个用class
  2. methods,方法里面写函数,生命周期只负责调用就行
  3. 页面复杂的话就再分子组件
  4. $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  配置 

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


点击全文阅读


本文链接:http://m.zhangshiyu.com/post/29192.html

组件  首页  购物车  
<< 上一篇 下一篇 >>

  • 评论(0)
  • 赞助本站

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

最新文章

  • (番外)+(结局)江晚烟陆聿我终于失去了你全书+后续(江晚烟陆聿)免费_(江晚烟陆聿我终于失去了你全书+后续)列表_笔趣阁(江晚烟陆聿)
  • 谢长乐肖风行兰因絮果,爱恨全如玉碎全书+结局+番外列表_笔趣阁(兰因絮果,爱恨全如玉碎谢长乐肖风行全书+结局+番外)
  • 「爱恨随风,六十五岁的我离婚了」大结局_「李明小孙女婆婆」小说章节试读
  • 长恨歌新鲜出炉(宋可卿谢景御)_长恨歌新鲜出炉
  • 宋可卿谢景御(长恨歌结局+番外)完结_(宋可卿谢景御)列表_笔趣阁(长恨歌结局+番外)
  • 雪覆长街情惘然,瑶光沈覆_雪覆长街情惘然,瑶光沈覆
  • 雪覆长街情惘然结局+番外爱恨纠葛(瑶光沈覆)_雪覆长街情惘然结局+番外爱恨纠葛
  • 我终于失去了你全书+后续(江晚烟陆聿)列表_我终于失去了你全书+后续(江晚烟陆聿)我终于失去了你全书+后续在线
  • (番外)+(全书)从此星辰远,归途似海深番外+全书+后续(璃月龙影)_从此星辰远,归途似海深番外+全书+后续免费_笔趣阁(璃月龙影)
  • 我的新婚妻子害我一无所有,归来后我全部拿回后续已完结_「林雪赵无极叶尘」隐藏结局
  • [他有两副面孔,而我选择离开]小说精彩章节分享_[秦墨陆薇雨桐]番外特辑限免解锁
  • 往梦难复温最后结局沈淮霆宋思予完本_往梦难复温最后结局(沈淮霆宋思予)

    关于我们 | 我要投稿 | 免责申明

    Copyright © 2020-2022 ZhangShiYu.com Rights Reserved.豫ICP备2022013469号-1