Vue project directory structure combing
by: award-off QQ : 1033553122
- 1. Structure combing
.
├── build / # webpack profile;
│ └── ...
├── config / # associated with the project to build a common configuration options;
│ ├── index.js # master configuration file
│ ├── dev.env.js # development environment variables
│ ├── prod.env.js # production environment variable
│ └── test.env.js # test environment variable
│
├── src/
│ ├── entry file main.js # webpack of;
│ ├── mock / # mockjs store data files, it is recommended to add modules to store different data modules mock .js file;
│ ├── store / # warehouse store to store files;
│ ├── common / # items stored in shared resources, such as: common images, icons, shared components, modules, style, constant files and so on;
├── │ │ assets / # shared storage resources outside the project code, such as: pictures, icons, videos, etc.;
│ │ ├── components / # items common containment assembly, such as: a package of navigation, tabs and the like; Note: Here containment assembly should all display assembly;
│ │ ├── network / # items stored in the network modules, such as: an interface;
│ │ ├── compatible / # items stored compatible modules, such as: module for various interfaces and App micro-channel;
│ │ ├── extension / # existing expansion modules stored class, such as: Array types of expansion modules;
│ │ ├── libraries / # to store their own package or a reference library;
│ │ ├── utils / # own some tools package
│ │ ├── constant.js # js storage of constants;
│ │ ├── constant.scss # scss of stored constant;
│ │ └── ...
│ └── app / # of items stored service code;
│ ├── App.vue # app root component;
│ └── ...
├── views # our page components folder
│ ├── content.vue # prepare some cnodejs content pages
│ └── index.vue # prepare some cnodejs page list
├── style # style store directory
│ └── index.css # main style file
│
├── static / # purely static resource files in that directory will not be webpack processing, will only be copied to the output directory;
├── test / # test
│ ├── unit / # test unit
│ │ ├── specs/ # test spec files
│ │ ├── eslintrc # 专为单元测试配置的eslint配置文件
│ │ ├── index.js # 测试编译的入口文件
│ │ ├── jest.conf.js # Jest的配置文件
│ │ └── karma.conf.js # Karma的配置文件
│ │ └── setup.js # 在Jest之前运行的启动文件；
│ └── e2e/ # e2e 测试
│ ├── specs/ # test spec files
│ ├── custom-assertions/ # 自定义的断言
│ ├── runner.js # test runner 脚本
│ └── nightwatch.conf.js # test runner 的配置文件
├── .babelrc # babel 的配置文件
├── .editorconfig # 编辑器的配置文件；可配置如缩进、空格、制表类似的参数；
├── .eslintrc.js # eslint 的配置文件
├── .eslintignore # eslint 的忽略规则
├── .gitignore # git的忽略配置文件
├── .postcssrc.js # postcss 的配置文件
├── index.html # HTML模板,入口页面
├── package.json # npm包配置文件，里面定义了项目的npm脚本，依赖包等信息
└── README.md
- 2. 文件修改
调整目录后需要对相关文件进行修改
src/App.vue存放路径更改，需要修改默认src/main.js
修改
import App from './App'
为
import App from './app/App';
- 3. 参考链接
https://www.jianshu.com/p/75cf57e53451
https://www.cnblogs.com/zhaowy/p/8513070.html