项目结构

  1. .
  2. ├── build/ # webpack 配置文件
  3. └── ...
  4. ├── config/
  5. ├── index.js # 项目核心配置
  6. └── ...
  7. ├── src/
  8. ├── main.js # 程序入口文件
  9. ├── App.vue # 程序入口vue组件
  10. ├── components/ # 组件
  11. └── ...
  12. └── assets/ # 模块资源 (会被webpack处理)
  13. └── ...
  14. ├── static/ # 纯静态资源 (直接拷贝到dist/static/里面)
  15. ├── test/
  16. └── unit/ # 单元测试
  17. ├── specs/ # 测试规范
  18. ├── index.js # 测试入口文件
  19. └── karma.conf.js # 测试运行配置文件
  20. └── e2e/ # 端到端测试
  21. ├── specs/ # 测试规范
  22. ├── custom-assertions/ # 端到端测试自定义断言
  23. ├── runner.js # 运行测试的脚本
  24. └── nightwatch.conf.js # 运行测试的配置文件
  25. ├── .babelrc # babel 配置文件
  26. ├── .editorconfig # 编辑配置文件
  27. ├── .eslintrc.js # eslint 配置文件
  28. ├── index.html # index.html 入口模板文件
  29. └── package.json # 运行的脚本与相关依赖

build/

这个目录包含实际为开发环境与生产环境的webpack配置文件。通常你不需要关注这些文件,除非你想自定义webpack的loader,这样的话,你应当先看看build/webpack.base.conf.js这个文件。

config/index.js

这个是主要的配置文件,会展示大部分在构建步骤中的通用配置。在 开发环境代理api集成后端框架 查看更多细节。

src/

这个是你放大部分程序代码的地方。如何管理这个目录内的所有内容结构在绝大部分程度上取决于你;如果你使用Vuex,你可以瞅瞅Vuex应用建议

static/

这个目录是你不想通过webpack处理的静态资源目录。这些目录中的资源会在webpack构建的时候,被直接复制到相同的目录中。

静态资源处理 中查看更多细节。

test/unit

包含单元测试相关文件,在单元测试 中查看更多细节。

test/e2e

包含端到端测试相关文件,在端到端测试 中查看更多细节。

index.html

这个是咱们单界面应用中的 模板 index.html。在开发环境中,webpack会生成相关资源,这些资源的url会自动插入到模板来渲染最终的HTML。

package.json

NPM包元数据文件,包括所有的构建依赖与构建命令