成为构架师必知的Vue目录结构和构建规范

成为构架师必知的Vue目录结构和构建规范

项目开发流程划分目录引用两个css文件项目模块划分:tabbar->路由映射关系目录风格文件夹字母小写,组件首字母大写比较清晰

代码组织格式一个项目里页面唯一的用id,多个用classmethods,方法里面写函数,生命周期只负责调用就行页面复杂的话就再分子组件$el:相当于根组件,可以拿到组件的js原生值比如浏览宽高目录结构 注意看每个文件的后缀名,没有后缀的就是文件夹。

代码语言:javascript复制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 配置

相关推荐