vue项目开发基本目录结构

§ 目录结构

.
├── build/ # Webpack 配置目录
├── dist/ # build 生成的生产环境下的项目
├── src/ # 源码目录(开发都在这里进行)
│ ├── assets/ # 放置需要经由 Webpack 处理的静态文件
│ ├── components/ # 组件
│ ├── filters/ # 过滤器
│ ├── store/      # 状态管理
│ ├── routes/ # 路由
│ ├── services/ # 服务(统一管理 XHR 请求)
│ ├── utils/ # 工具类
│ ├── views/ # 路由页面组件
│ ├── app.js # 启动文件
│ ├── index.html # 静态基页
├── static/ # 放置无需经由 Webpack 处理的静态文件
├── .babelrc # Babel 转码配置
├── .eslintignore # (配置)ESLint 检查中需忽略的文件(夹)
├── .eslintrc # ESLint 配置
├── .gitignore # (配置)需被 Git 忽略的文件(夹)
├── package.json # (这个就不用多解释了吧)
├── package-lock.json    # (以记录当前状态下实际安装的各个npm package的具体来源和版本号)
 

您可以根据业务需求改动目录结构

上述目录结构中,需要注意的是 src/components/ 与 src/views/ 的区别

src/components/                    # 组件
├── App.vue # 根组件
├── Breadcrumb.vue # 面包屑
├── Navbar.vue # 顶部导航栏
├── Pagination.vue # 分页
├── Select/ # 下拉框选择框组件
│ ├── LimitSelect.vue # “每页显示多少条记录” 下拉选择框
│ └── Select2.vue # 对 Select2 的封装
└── Sidebar/ # 侧边栏组件
├── index.vue # 侧边栏
└── Link.vue # 导航链接封装 src/views/ # 路由页面组件
├── index.vue # 首页
├── auth/ # 用户认证模块
│ ├── login.vue # 登录页
│ └── logout.vue # 注销登录页
└── msg/ # 留言板模块
├── index.vue # 对应 /msg(留言板首页,alias => /msg/list)
├── list.vue # 对应 /msg/list(留言板列表)
├── add.vue # 对应 /msg/add(新增留言)
├── detail.vue # 对应 /msg/detail/:msgId(查看留言)
├── update.vue # 对应 /msg/update/:msgId(修改留言)
├── _components/ # 留言板模块共用组件
│ ├── AuthorSelect.vue # 留言发布者选择下拉框
│ ├── MsgForm.vue # 留言表单
│ └── OptBtnGroup.vue # 留言操作按钮组
└── _mixins/ # 留言板模块共用 mixins
└── autoLoadByParams.js # 根据 $route.params.msgId 自动加载

根据注释,我们大概知道了二者的差别:

src/components/

  • 主要是全局性的,或通用性很强的组件,具备良好的封装性
  • 一般不会涉及到具体的业务逻辑

src/views/

  • 主要是业务性的页面组件,基本不具备通用性
  • 基本与路由一一对应(例如 /src/views/auth/login.vue 对应着路由 /auth/login
  • 各功能模块(如 msg/)内部可分离出通用部分(如 _components/_mixins/

若多个功能模块通用的,则建议移到全局,即 src/components/src/mixins/ 等

上一篇:C#直接插入排序


下一篇:compass General 常用api学习[Sass和compass学习笔记]