看了很多的Vue相关的demo了，各个demo的项目组织方式也有所不同，现在总结下，搭建下以后能复用的项目组织方式，作为以后vue-cli的模板。

首先使用vue-cli借助webpack来生成基础模板，在此来改造升级。但是从总的来说，所有的目录组织方式核心在于清晰明了，这也是为什么要模块化，所以理解好ES6的模块语法，知道变量怎么导出引入，可以随意组织处我们觉得清晰的任何目录方式吧。

vue-router组织

通常我们使用vue-router时，大致步骤如下

1. 引入import VueRouter from vue-router
2. 注册使用：vue.use(VueRouter);
3. 实例化VueRouter 并传入相关配置，其中最重要的就是路由规则。const router = new VueRouter({选项,...})；
4. 在vue实例化时将VueRouter实例传入Vue的实例化选项中：new Vue({router,...}

通常上面四个步骤都是在main.js 中直接编写的，这里参考慕课上饿了么那个课程的组织方式做下改变。

1. 在根目录下新建router 目录，然后新建index.js route.js 实际就是将整个路由作为一个模块，所以按照模块的写法来，这样在main.js 中只需要引入router模块即可

2. 编写index.js ，其中route.js文件作为路由规则出口，在其中引入组件和编写路由规则，同时在大项目中，可以再建立和组件对应的路由规则目录和文件，而route.js只需要将所有路由整合导出即可。同时如果有相关的路由配置，如路由模式，是否严格等配置，可以新建config.js文件，也可以在根目录的config目录下新建引入。不过从thinkjs的组织中发现，可以两者都建，根目录下作为通用/全局路由配置，而通过对象继承/覆盖等方式，达到自己想要的配置。

   import Vue from 'vue'
   import VueRouter from 'vue-router'
   import routes from './routes' // 路由规则
   
   Vue.use(VueRouter)
   
   export default new VueRouter({
     routes,
   })
   

3. 在main.js引入并使用

   import router from './router'
   new Vue({
     router,
     ...
   });
   

上面我觉得好处是，将router与整个项目解耦了，在以后做其它项目时，直接复制过来，重新编写业务逻辑即可。后面也会不断实践，参考其它实现。