利用vuecli配合vuerouter搭建一个完整的spa流程sweeeper
demo未安装依赖,下载完成，npminstall后再npmrundev运行。
利用vue-cli配合vue-router搭建一个完整的spa流程（一）
OK,正题开始，首先保证nodeJS,Git,webpack已安装完毕。打开项目文件夹，安装vue-cli。
全局安装vue-cli$npminstall--globalvue-cli
创建完成后进入项目文件夹，安装依赖$npminstall
如图所示，只会用到，src,static,index.html这三个文件。首先解释一下三个文件的作用：Ⅰ：src存放路由JS，模板.vue文件，入口JS，以及一个入口.vue文件Ⅱ：static存放静态文件Ⅲ：index入口html文件
项目文件明了之后，我们开始搭建一个简单的SPA路由构架：Ⅰ：页面中有俩个及俩个以上的分类Ⅱ：每个分类中可以点击进入到详情页面Ⅲ：URL输入错误后展示404页面Ⅳ：在页面中刷新，根据URL重新获取数据，渲染页面
文件详解：Ⅰ：src中components文件夹里新建三个xxx.vue文件，①error.vue此为404页面②showone.vue此为第一个分类页面③showtwo.vue此为第二个分类页面
Ⅱ：src中zjapp.vue这是路由入口文件
Ⅲ：static中img为详情页面大图，thumbnail为分类页面缩略图
Ⅴ：bootstrap.css样式CSS
到此路由的基本框架搭建完成，后面开始代码的填充。
作为页面入口文件，先引入Bootstrap.CSS,如果是本地文件放在static文件夹里。可以使用CDN或者npm安装。为了方便后面阅读将id="app"更改为id="index"。当然，也可以不更改，main.js中有多个为app的名字，避免混淆。
importVuefrom'vue'importAppfrom'./zjapp'importrouterfrom'./router'Vue.config.productionTip=falsenewVue({el:'#index',router,template:'',components:{App}})Vue开始渲染时，加载components:{App}组件替换生成在id="index"内的标签，那么{App}来自哪里呢？
答案在importAppfrom'./zjapp'这里是ES6语法，引入zjapp.vue模块中暴露出来的接口，后缀可以不写。
Vue实例中的router属性也是ES6中对象的字面量写法，等于router:router。同理importrouterfrom'./router'这里引入router。
因为，router中index.js暴露接口时没有署名，这里也可以改一个名字，比如:
importVuefrom'vue'importAppfrom'./zjapp'//修改名字一样可以。importchangeES6from'./router'Vue.config.productionTip=falsenewVue({el:'#index',//修改在这里router:changeES6,template:'',components:{App}})最后，可能有人会问Vue.config.productionTip=false是做什么用的，其实这里是关闭了生产模式即部署到服务器后给出的提示。
这个文件是Vue一开始渲染组件时的文件，首先贴出全部代码，很多，但是会全部讲解作用，含义。
大体分为三部个分
第一部分：
第一部分为页面中内容路由入口，其中：v-bind:router-data="allData"是对模板中传输数据用的v-bind:key="change"是页面切换动画绑定的变值，用来使页面被复用时触发切换动画
第二部分：
上一页下一页
第二部分为页面中上一页，下一页按钮部分，其中：v-show="allData.mainShow"是控制俩个按钮显示，隐藏（详情页隐藏）v-show="back==0false:true"是控制单个按钮显示，隐藏（最后一页时，下一页按钮隐藏）v-on:click="dosom('back')"是绑定的点击事件
第三部分：
第三部分为页面中内容更新数据时loading画面，其中：v-show="loading"是用来显示，隐藏loading动画好了，到此主要的HTML模块已经布局完毕，现在开始JS功能的开发
Ⅱ：javascript
JS这里的整体流程：watchrouter.path的变化，从URL中读取数据，从新获取数据。(因为本地JSON文件，获取JSON后对JSON进行剪切)
importrouterfrom'./router'ES6语法，引入router模块下暴露的接口，这里引入router实例为后续编写编程式导航铺垫。
num这个是用来每次打开或者刷新页面时读取当前为第几页的number，因为这个数值用了很多次，故将它放到了初始化函数里
mainShow控制俩个按钮（下一页，上一页）总体显示，隐藏
loading控制loading动画的显示，隐藏
change页面复用时的Key值
back返回按钮的number，因为按钮的判断为v-show="back==0false:true"当为0是隐藏
next同上
以上为这个demo中数据的含义，下面是方法的解释，从methods开始说起：
buttonToggle(){varnowNum=this.allData.num;this.back=nowNum;this.next=2-nowNum;}这是俩个按钮的控制函数，因为JSON数据不多，一个分类中只有2页数据，所以this.next=2-nowNum;最后一页时隐藏。
routePath(){if(this.$route.fullPath=="/"){router.push("/user/0/0");this.load();}elseif(this.$route.fullPath.length==9||this.$route.fullPath.length==20){this.load();}else{router.push("/user/error");this.back=0;this.next=0;}}this.$route.fullPath返回的是全部url字符串，这是当前url判断函数：
当读取到this.$route.fullPath.length==9||this.$route.fullPath.length==20，其实就是this.$route.fullPath为/user/x/x的主页面中，或者为/user/x/x/contype=x的详情页面中，此时直接进行load()方法更新数据即可
以上就是methods方法里全部函数，下面解释一下Vue实例里其他的方法。
watch:{"$route"(to){this.routePath();}}说到watch了这是监控url变化时触发的函数，说白了就是执行router.path("/user/x/x")之后Vue会检测到变化，从而进行回调函数，这里执行routerPath()分析url是属于哪个页面从而进行数据更新。
好了，javascript的编写到此结束，主要部分还是在routerPath()这个函数，再通过url重新获取数据。
style部分就不说了，简单的css3动画
利用vue-cli配合vue-router搭建一个完整的spa流程（二）
在（一）中写到了主要页面的编写，现在开始三个路由页面的编写。
先贴出代码。
importVuefrom'vue'importRouterfrom'vue-router'importVueResourcefrom'vue-resource'importtemfrom'@/components/showone'importtem_contfrom'@/components/showtwo'importtem_errorfrom'@/components/error'//安装插件Vue.use(Router)Vue.use(VueResource)exportdefaultnewRouter({routes:[{path:"/user/:list/:listNum",component:tem,children:[{path:"con",component:tem_cont}]},{path:"/user/error",component:tem_error}]})代码很短，一一解释下。
importVuefrom'vue'importRouterfrom'vue-router'importVueResourcefrom'vue-resource'importtemfrom'@/components/showone'importtem_contfrom'@/components/showtwo'importtem_errorfrom'@/components/error'↑这里是引入所有使用的数据，参数。
//安装插件Vue.use(Router)Vue.use(VueResource)↑这里说下vue-resource这个一开始没有安装，打开项目右键打开Git键入npminstallvue-resource--save这是一个ajax插件，使用起来比较方便而且很简单。
routes:[{path:"/user/:list/:listNum",component:tem,children:[{path:"con",component:tem_cont}]},{path:"/user/error",component:tem_error}]↑路由配置，详情页面是主页面的子路由。
先贴出代码，有些复杂，慢慢解释。
首页页面一
