Vuejs+elementUI框架开发的项目结构及文件关系

项目结构
|----- build #webpack编译相关文件目录，一般不用动
|----- config #配置目录
|         |------ dev.env.js #开发环境变量
| 　　 |------ index.js #主配置文件,配置主访问路径端口
|　　  |------ prod.env.js #生产环境变量
|----- dist #生产环境下build后的文件存放目录（发布目录）
|----- src #前端项目源码目录
| 　　 |------api #封装的接口文件目录
| 　　 |　　 |------api.js #接口脚本配置，请求后台路径接口配置（ajax请求路径）
|　　  |　　 |------websocket.js #前端与服务器建立连接
|　　  |------assets #资源目录（图片资源等）
|　　  |------common/js #公共文件目录
|　　  |------components / views #组件及页面文件目录，调用api.js中的方法
| 　     |  　　|------例如login/index.vue #登录模块
|　　  |　　  |------Home.vue #主页面模板template
|　　  |------router #路由目录,配置页面路径、组件名称
|　　  | 　　 |------index.js #import进主要页面，并一一配置路径
|　　  |------App.vue #项目入口文件 |
|　　  |------main.js #项目的核心文件 |这两个文件是关联的
|----- static #开发模式下的静态资源目录
|----- index.html #首页入口文件，你可以添加一些 meta 信息或同统计代码啥的
|----- package.json #项目配置文件，依赖等的版本信息
|----- README.md #项目的说明文档，markdown 格式

 

以登录模块为例，文件关系如下：
登录页面login/index.vue --> 调用接口脚本api.js的方法确认登录信息，成功后通过路由配置文件router/index.js跳转到后台主页面Home.vue，Home.vue页面可以直
接使用路由配置中的属性（$router.options.routes访问路由配置文件的属性）

 

项目参考github地址:http://blog.csdn.net/wwaenig521314/article/details/74977813