项目架构
.
├── build/ # webpack 配置文件
│ └── ...
├── config/
│ ├── index.js # 主要项目配置
│ └── ...
├── src/
│ ├── main.js # 应用入口文件
│ ├── App.vue # 根应用组件
│ ├── components/ # UI组件
│ │ └── ...
│ └── assets/ # 模型资源 (需要 webpack 处理的资源)
│ └── ...
├── static/ # 纯静态资源 (直接拷贝)
├── test/
│ └── unit/ # 单元测试
│ │ ├── specs/ # 测试指定文件
│ │ ├── index.js # 测试生成的入口文件
│ │ └── karma.conf.js # 测试运行的配置文件
│ └── e2e/ # e2e测试
│ │ ├── specs/ # 测试指定文件
│ │ ├── custom-assertions/ # 自定义e2e测试
│ │ ├── runner.js # 测试运行的脚本
│ │ └── nightwatch.conf.js # 测试运行的配置文件
├── .babelrc # babel 配置
├── .editorconfig.js # editor 配置
├── .eslintrc.js # eslint 配置
├── index.html # index.html 模板
└── package.json # 构建脚本和依赖项
build/
这个文件夹保存实际的配置项,包括服务端的开发版和 webpack 构建的生产版。通常你是不需要修改这些文件的,但如果你想自定义 Webpack 的加载器,你可能需要查看下 build/webpack.base.conf.js
文件。
config/index.js
这是主要的配置文件,提供一些最常见的配置项用于构建设置。查看 开发阶段的API请求代理 和 后端框架集成 获得更多细节。
src/
这里存放的是你的应用代码。这里面怎么架构就取决于你了,如果你要使用 Vuex 的话,请参考 Vuex 应用建议.
static/
这个文件夹的静态资源不需要经过 Webpack 处理。它们直接被拷贝进和 Webpack 构建过的静态资源相同的目录。
查看 静态资源的处理 获得更多介绍。
test/unit
包含单元测试相关的文件。查看 单元测试 获得更多介绍。
test/e2e
包含 e2e 测试相关的文件。查看 端到端测试 获得更多介绍。
index.html
index.html
是单页面应用的模板。在开发和构建阶段,Webpack 会生成资源,并把它们的网址添加进此模板内从而渲染成最终的 HTML。
package.json
NPM 的包的元文件,包含了所有的构建依赖项和 构建命令。