项目结构:
├── build/ # webpack 编译任务配置文件: 开发环境与生产环境
│ └── ...
├── config/
│ ├── index.js # 项目核心配置
│ └── ...
├ ── node_module/ #项目中安装的依赖模块
── src/
│ ├── main.js # 程序入口文件
│ ├── App.vue # 程序入口vue组件
│ ├── components/ # 组件
│ │ └── ...
│ └── assets/ # 资源文件夹,一般放一些静态资源文件
│ └── ...
├── static/ # 纯静态资源 (直接拷贝到dist/static/里面)
├── test/
│ └── unit/ # 单元测试
│ │ ├── specs/ # 测试规范
│ │ ├── index.js # 测试入口文件
│ │ └── karma.conf.js # 测试运行配置文件
│ └── e2e/ # 端到端测试
│ │ ├── specs/ # 测试规范
│ │ ├── custom-assertions/ # 端到端测试自定义断言
│ │ ├── runner.js # 运行测试的脚本
│ │ └── nightwatch.conf.js # 运行测试的配置文件
├── .babelrc # babel 配置文件
├── .editorconfig # 编辑配置文件
├── .gitignore # 用来过滤一些版本控制的文件,比如node_modules文件夹
├── index.html # index.html 入口模板文件
└── package.json # 项目文件,记载着一些命令和依赖还有简要的项目描述信息
└── README.md #介绍自己这个项目的,可参照github上star多的项目。
build/
这个目录包含实际为开发环境与生产环境的webpack配置文件。通常你不需要关注这些文件,除非你想自定义webpack的loader,这样的话,应当先看看build/webpack.base.conf.js这个文件。
src/
这个是你放绝大部分程序代码的地方。如何管理这个目录内的所有内容随你决定;如果你使用Vuex,建议的结构一般是这样的:
├── index.html
├── main.js
├── api
│ └── ... # 抽取出API请求
├── components
│ ├── App.vue
│ └── ...
└── store
├── index.js # 我们组装模块并导出 store 的地方
├── actions.js # 根级别的 action
├── mutations.js # 根级别的 mutation
└── modules
├── cart.js # 购物车模块
└── products.js # 产品模块
static/
这个目录是你不想通过webpack处理的静态资源目录。这些目录中的资源会在webpack构建的时候,被直接复制到相同的目录中。
<blockquote>
你应该注意到了,在项目结构上我们有静态资源两个目录:src/assets和static/。他们之间有什么区别?
详细说明请点击Vue2.0项目入门—静态资源目录src/assets和static/区别
</blockquote>
test/unit
包含单元测试相关文件。
test/e2e
包含端到端测试相关文件。
index.html
这个是单界面应用中的模板Index.html。在开发环境中,webpack会生成相关资源,这些资源的url会自动插入到模板来渲染最终的HTML。
package.json
npm包元数据文件,包括所有的构建依赖与构建命令。
所有的构建命令,都会通过NPM脚本执行。
npm run dev
<blockquote>
启动一个Node.js本地开发服务器。
</blockquote>
- webpack+vue-loader来处理vue单文件组件
- 状态支持热更新
- 状态支持浮层显示编译错误
- 在保存的时候,通过ESLint做语法检测
- 可以开启Source maps
npm run build
<blockquote>
构建生成环境的资源。
</blockquote>
- 通过 UglifyJS压缩JS文件。
- 通过 html-minifier来压缩html文件。
- 通过 cssnano,提取出所有组件内的css文件,合并压缩到一个单独的文件。
- 所有的静态资源会编译成哈希值版本来保持长期缓存,生成环境的index.html会自动插入这些编译后资源文件的url。
npm run e2e
<blockquote>
端到端测试。
</blockquote>
- 在多个浏览器中并行运行测试
- 通过盒子里的一个命令工作。
自动处理 Selenium 和 chromedriver 依赖.
自动创建 Selenium 服务器.