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

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

相关文章
|
10天前
|
前端开发 JavaScript Java
【03】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架搭建-服务端-后台管理-整体搭建-优雅草卓伊凡商业项目实战
【03】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架搭建-服务端-后台管理-整体搭建-优雅草卓伊凡商业项目实战
57 13
【03】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架搭建-服务端-后台管理-整体搭建-优雅草卓伊凡商业项目实战
|
9天前
|
SQL JavaScript 安全
【04】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架二次开发准备工作-以及建立初步后端目录菜单列-优雅草卓伊凡商业项目实战
【04】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架二次开发准备工作-以及建立初步后端目录菜单列-优雅草卓伊凡商业项目实战
47 11
【04】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架二次开发准备工作-以及建立初步后端目录菜单列-优雅草卓伊凡商业项目实战
|
8天前
|
移动开发 JavaScript API
Vue Router 核心原理
Vue Router 是 Vue.js 的官方路由管理器,用于实现单页面应用(SPA)的路由功能。其核心原理包括路由配置、监听浏览器事件和组件渲染等。通过定义路径与组件的映射关系,Vue Router 将用户访问的路径与对应的组件关联,支持哈希和历史模式监听 URL 变化,确保页面导航时正确渲染组件。
|
8天前
|
JavaScript 前端开发 开发者
Vue中的class和style绑定
在 Vue 中,class 和 style 绑定是基于数据驱动视图的强大功能。通过 class 绑定,可以动态更新元素的 class 属性,支持对象和数组语法,适用于普通元素和组件。style 绑定则允许以对象或数组形式动态设置内联样式,Vue 会根据数据变化自动更新 DOM。
|
8天前
|
JavaScript 前端开发 数据安全/隐私保护
Vue Router 简介
Vue Router 是 Vue.js 官方的路由管理库,用于构建单页面应用(SPA)。它将不同页面映射到对应组件,支持嵌套路由、路由参数和导航守卫等功能,简化复杂前端应用的开发。主要特性包括路由映射、嵌套路由、路由参数、导航守卫和路由懒加载,提升性能和开发效率。安装命令:`npm install vue-router`。
|
2月前
|
JavaScript
vue使用iconfont图标
vue使用iconfont图标
151 1
|
12天前
|
监控 JavaScript 前端开发
ry-vue-flowable-xg:震撼来袭!这款基于 Vue 和 Flowable 的企业级工程项目管理项目,你绝不能错过
基于 Vue 和 Flowable 的企业级工程项目管理平台,免费开源且高度定制化。它覆盖投标管理、进度控制、财务核算等全流程需求,提供流程设计、部署、监控和任务管理等功能,适用于企业办公、生产制造、金融服务等多个场景,助力企业提升效率与竞争力。
66 12
|
29天前
|
JavaScript 安全 API
iframe嵌入页面实现免登录思路(以vue为例)
通过上述步骤,可以在Vue.js项目中通过 `iframe`实现不同应用间的免登录功能。利用Token传递和消息传递机制,可以确保安全、高效地在主应用和子应用间共享登录状态。这种方法在实际项目中具有广泛的应用前景,能够显著提升用户体验。
61 8
|
30天前
|
存储 设计模式 JavaScript
Vue 组件化开发:构建高质量应用的核心
本文深入探讨了 Vue.js 组件化开发的核心概念与最佳实践。
77 1
|
3月前
|
JavaScript 前端开发 开发者
vue 数据驱动视图
总之,Vue 数据驱动视图是一种先进的理念和技术,它为前端开发带来了巨大的便利和优势。通过理解和应用这一特性,开发者能够构建出更加动态、高效、用户体验良好的前端应用。在不断发展的前端领域中,数据驱动视图将继续发挥重要作用,推动着应用界面的不断创新和进化。
111 58

热门文章

最新文章