vue2.0下的spa整体方案（一）-整体的结构与框架的应用

吐槽时间：

首先这是一个年底了.劳累了一年下来，收货颇多。整体的开发有了结构，得到了认可了。18年预计也引入了新的技术到生产环境中了。工作除了等价交换之外，还获得了无价的技术实践经验。

切入正题：

一、整体的单页面应用涉及到的依赖与框架

前端： vue2.0+axios(由于vue-resource停更)+vuex+vue-router+巴拉巴拉其他小依赖比如babel-polyfill为了解决ie下异步的支持

后端：lumen5.5(提倡的依赖注入，门面，资源化处理，中间件)

测试：phpunit->使用它比较简单，只用了冰山一角的功能，只是用了对输出断言而已。暂时能满足UI测试的底线吧

为什么使用此方案：

1. vue够简单

2.lumen:laravel执行效率都被吐槽太慢了。但是lumen执行效率是不低于ci的。而且作为接口框架是没有整体的mvc的结构，更多的是需要热插拔和设计模式来规范开发（考虑到以后的维护问题）

3.本身个人就是个phper，只不过现在已经不知道自己到底是个什么职业了。。。

二、vue前端构建

1.概念： vue的spa结构下的应用，强调的是树状结构，也是官方提倡使用的一种结构方式。所以一定要明白

“树状结构”“树状结构”“树状结构”！！！

2.环境的搭建： 请点击链接：http://blog.csdn.net/bh451326803/article/details/79047790

3.目录结构：

- app --前端项目的根目录
 |- bulid  --系统下的启动文件等等，不做过多介绍
           |- webpack.base.conf.js  --主要介绍下这个文件，由于用到了polyfill，需要吧这个文件中的第13行，修改成app: ["babel-polyfill", "./src/main.js"]
 |- config  --系统的默认配置项，比如默认的首页，静态资源，打包的目录等等，不做过多介绍
 |- src --源文件
    |- helper --帮助类目录
          |- router --路由类目录
          |- store  --管道目录
          |- validate --验证目录
          |- view  --模板模块
          |- App.vue --挂载的跟组件
          |- main.js  -- 我们的入口文件，主要作用是初始化vue实例并使用需要的插件
 |- static --静态资源目录
 |- test  --测试的目录（这里没用上，测试单独拿出来做了）
 |- .babelrc 
 |- editorconfig
 |- .gitignore
 |- .postcssrc.js
 |- index.html

 |- package.json  --依赖的配置文件

这里着重说下package.json，以下是核心的几个依赖版本。

 "axios": "^0.17.1",    "babel-polyfill": "^6.26.0",    "iview": "^2.6.0",    "vue": "^2.5.2",    "vue-router": "^3.0.1",    "vuex": "^3.0.1"