关于 VUE 项目基础结构的思考

• output 编译输出目录
• src 源码目录
• - api 接口目录（按后端controller组织接口对象）
• - assets 图片目录
• - components vue组件目录
• -- classroom/home/... pages目录
• --- index.js js代码
• --- index.less 样式
• --- index.vue html标签
• -- Button.vue/Dialog.vue... 共用组件目录
• - css 通用样式目录
• - app.js 程序基本信息文件
• - helper.js 帮助角色文件
• - init.js 程序初始化文件
• - main.js 主文件
• - util.js 工具类文件
• CHANGELOG.md 版本更新历史
• package.json webpack依赖库配置文件
• README.md 项目说明

Q/A

1，如何组织page？

在components目录下，每一个目录，即是一个独立的page，每个page目录至少包括三个文件：index.js、index.vue、index.less。

在程序中，一屏即为一个page。

2，如何组织组件？

所有项目共用的、成熟的组件，放在架构第二层中的共享组件库中。项目中共用的组件，可以直接放在components目录下。

单页面使用的组件，直接放在page目录下。

3，如何组织逻辑代码？

页面中所有逻辑代码均放在index.js文件中，组件中没有逻辑代码，只有传入的数据。

我有没有讲明白，有没有问题，欢迎讨论。