这次花了大半个月的空闲时间（加上十一），终于完成一次个人项目的完整重构。仅以此文，来记录一下我写这个项目的感想以及总结。
1.技术杂
我用的技术杂是vue^2.4.2 + vuex^2.4.1 + vue-router^2.7.0 。开发脚手架是vue-cli。
2.项目介绍
这是一个SPA的海购商城，此项目大大小小共 16 个主体页面，涉及注册、登录、商品详情、购物车、下单、订单、订单详情等等，是一个完整的流程。一般公司即便是官网的单页面项目都没这么复杂，如果这个项目能驾驭的了，相信大部分公司的其他单页面应用也就不在话下，即便更复杂，也不会比这个高到哪里去。（做了控制，不能在该项目付款）
3.资源划分
因为之前都是做多页面的，所以转做单页面，遇到的第一个问题就是如何划分资源。比如之前我是在一个项目里面有js文件夹，css文件夹，html文件夹，每个主文件夹下面还会有子文件夹。做SPA，我感觉也是按照页面来分，不过要细入拆分成组件，比如首页下面有一个固定的页脚，分类页面下面也有一个相同固定的页脚，那么就可以提出来作为一个comFooter组件（我写组件的原则就是现在或者将来有可能用到2次或者以上）。那么就会有一个components文件夹，用来专门放置组件的。其次每个页面还是要放在一个pages文件夹下面（也是以组件形式的）。然后做SPA离不开的就是路由以及状态管理器（这个简单的可以不用的），那么又多出来了一个router文件夹以及vuex文件夹。根据上面的分析，我在src文件夹下面的资源配置如下图所示：
4.个人体会
这一段注定很杂乱但是却是本次开发的精华所在。
很多新手和本胖一样不知道如何做第一步，感觉有很多东西都要做，那么就慢慢来。比如本胖这次就是先写好store的骨架以及router的骨架以及main.js和App.vue，这样你的项目以及可以跑起来了。然后根据页面一个一个来，每次写一个页面组件都往router添加一个路由以及看这个页面组件是否有可以提取的组件，有的话就往components文件夹里面添加一个对应的组件，然后在相应的页面组件引用就可以了。慢慢地你的router以及store就会丰满起来。
本胖感受大的还有一个就是vue的路由钩子，真的是太牛逼了，只有你想不到，没有他做不到。这里仅仅举一个本胖开发中遇到的例子。一个商城系统里面有些组件的访问时不用登陆权限的，有些是需要的，那么就需要做路由跳转控制，让没有登录权限的用户跳转到登录组件。一开始本胖是在每一个需要登录权限的组件里面通过store里面的isLogin字段来判断路由控制，那么每个组件就不可避免的需要应用store里面的数据，这。。。多麻烦，后面本胖就像在进入组件之前判断当前组件是否需要登录权限，需要的话判断当前用户是否登录，没有登录的用户让他去login组件，以上这段代码只用写在main.js里面就行了，借助router.beforeEach这个路由钩子，注意的是必须要在首次获取登录权限的回调里面配置这个全局路由以及初始化vue，否则你会发现有2个问题：1.用户直接输入需要登录权限的组件地址时候，在没有登录的情况下没有跳转到登录组件。2.强制刷新状态下用户已经登录但是却跳转到了登录组件。
下面是项目源码地址哈。喜欢的话欢迎star。
