Vue2+VueRouter2+Webpack+Axios 构建项目实战（三）认识项目全部文件
这一篇介绍vue框架的全部文件，让你对vue框架有一个大概的认知，公众号已经准备了vue实战教程，若是您有须要，能够在公众号回复“vue”获取。php
《Vue2+VueRouter2+Webpack+Axios 构建项目实战（二）配置环境及构建初始项目》中，咱们经过安装 nodejs 系统环境，以及 vue-cli 脚手架工具，在执行完命令后，咱们就已经将一个初始项目跑起来了。css
可是，咱们的项目代码，还一个都没有看到。所以，这个章节，咱们来认识一下全部的文件。html
初始文件解析vue
├── README.md // 项目说明文档 ├── node_modules // 项目依赖包文件夹 ├── build // 编译配置文件，通常不用管 │ ├── build.js │ ├── check-versions.js │ ├── dev-client.js │ ├── dev-server.js │ ├── utils.js │ ├── vue-loader.conf.js │ ├── webpack.base.conf.js │ ├── webpack.dev.conf.js │ └── webpack.prod.conf.js ├── config // 项目基本设置文件夹 │ ├── dev.env.js // 开发配置文件 │ ├── index.js // 配置主文件 │ └── prod.env.js // 编译配置文件 ├── index.html // 项目入口文件 ├── package-lock.json // npm5 新增文件，优化性能 ├── package.json // 项目依赖包配置文件 ├── src // 咱们的项目的源码编写文件 │ ├── App.vue // APP入口文件 │ ├── assets // 初始项目资源目录，回头删掉 │ │ └── logo.png │ ├── components // 组件目录 │ │ └── Hello.vue // 测试组件，回头删除 │ ├── main.js // 主配置文件 │ └── router // 路由配置文件夹 │ └── index.js // 路由配置文件 └── static // 资源放置目录
好，如上，就是咱们的 vue 初始化后获得的一个项目的完整结构。其余大多数文件咱们是不用管的。若是要管的话，我在后面的章节也会去详细说明。node
咱们绝大多数的操做，就是在 src 这个目录下面。默认的 src 结构比较简单，咱们须要从新整理。jquery
另外 static 资源目录，咱们也须要根据放置不一样的资源，在这边构建不一样的子文件夹。webpack
咱们来配置 src 目录ios
先不要管这些文件的内容，咱们先创建这些空的文件在这边。而后咱们后面去完善它。web
咱们的这个项目是要作两个页面，一个是 cnodejs 的列表页面，一个是详情页面。vue-cli
因此，我把项目文件夹整理成以下的结构
├── App.vue // APP入口文件
├── api // 接口调用工具文件夹
│ └── index.js // 接口调用工具
├── components // 组件文件夹，目前为空
├── config // 项目配置文件夹
│ └── index.js // 项目配置文件
├── frame // 子路由文件夹
│ └── frame.vue // 默认子路由文件
├── main.js // 项目配置文件
├── page // 咱们的页面组件文件夹
│ ├── content.vue // 准备些 cnodejs 的内容页面
│ └── index.vue // 准备些 cnodejs 的列表页面
├── router // 路由配置文件夹
│ └── index.js // 路由配置文件
├── style // scss 样式存放目录
│ ├── base // 基础样式存放目录
│ │ ├── _base.scss // 基础样式文件
│ │ ├── _color.scss // 项目颜色配置变量文件
│ │ ├── _mixin.scss // scss 混入文件
│ │ └── _reset.scss // 浏览器初始化文件
│ ├── scss // 页面样式文件夹
│ │ ├── _content.scss // 内容页面样式文件
│ │ └── _index.scss // 列表样式文件
│ └── style.scss // 主样式文件
└── utils // 经常使用工具文件夹
└── index.js // 经常使用工具文件
由于咱们删除了一些默认的文件，因此这个时候项目必定是报错的，先无论他，咱们根据咱们的需求，新建如上的项目结构。这些都是在 src 目录里面的结构。
咱们来配置 static 目录
这个目录比较简单，由于这个项目咱们的资源很少，可是，为了个人这系列博文可以适合大多数的项目的开发，通常，我搞成下面这个样子：
├── css // 放一些第三方的样式文件 ├── font // 放字体图标文件 ├── image // 放图片文件，若是是复杂项目，能够在这里面再分门别类 └── js // 放一些第三方的JS文件，如 jquery
你可能很奇怪，咱们不是把样式和 JS 都写到里面去么，为何还要在这边放呢？
由于，若是是放在 src 目录里面，则每次打包的时候，都须要打包的。这回增长咱们的打包项目的时间长度。并且，一些地方放的文件，咱们通常是不会去修改的，也不必 npm 安装，直接引用就行了。你能够根据本身的状况，对这些能够不进行打包而直接引用的文件提炼出来，放在资源目录里面直接调用，这样会大大的提升咱们的项目的打包效率。
好，就这么搞，咱们的文件架构就搞好了，下一张，咱们来开始写代码了。
做者：FungLeo
