图解Vue.js项目及其目录结构

  项目包含：

• 基础库: vue.js、vue-router、vuex、whatwg-fetch
• 编译/打包工具：webpack、babel、node-sass
• 单元测试工具：karma、mocha、sinon-chai
• 本地服务器：express

build：最终发布的代码的存放位置。
  config：配置路径、端口号等一些信息，我们刚开始学习的时候选择默认配置。
  node_modules：npm 加载的项目依赖模块。
  src：这里是我们开发的主要目录，基本上要做的事情都在这个目录里面，里面包含了几个目录及文件：
  assets:放置一些图片，如logo等
  components:目录里放的是一个组件文件，可以不用。
   App.vue：项目入口文件，我们也可以将组件写这里，而不使用components目录。
   main.js ：项目的核心文件
   static：静态资源目录，如图片、字体等。
   test：初始测试目录，可删除
   .XXXX文件：配置文件。
   index.html：首页入口文件，可以添加一些meta信息或者同统计代码啥的。
   package.json：项目配置文件。
   README.md：项目的说明文件。

 

目录结构

1. ├── README.md 项目介绍

2. ├── index.html 入口页面

3. ├── build 构建脚本目录

4. │   ├── build-server.js 运行本地构建服务器，可以访问构建后的页面

5. │   ├── build.js 生产环境构建脚本

6. │   ├── dev-client.js 开发服务器热重载脚本，主要用来实现开发阶段的页面自动刷新

7. │   ├── dev-server.js 运行本地开发服务器

8. │   ├── utils.js 构建相关工具方法

9. │   ├── webpack.base.conf.js wabpack基础配置

10. │   ├── webpack.dev.conf.js wabpack开发环境配置

11. │   └── webpack.prod.conf.js wabpack生产环境配置