资讯专栏INFORMATION COLUMN

利用vue-cli配合vue-router搭建一个完整的spa流程(一)

cgh1999520 / 2743人阅读

摘要:利用配合搭建一个完整的流程二前言所用的一些基本操作。全局安装创建一个基于的模板创建过程中,为必须,其他语法检测,单元测试等按需求安装。为入口文件,的实例在这里书写。挂载在中的标签上。定时器的作用是模拟数据请求延时。

2017/5/9 更新!
GitHubpages搞了下,PC可以浏览。↓

https://15901233752.github.io...


demo源码:https://github.com/1590123375...

demo未安装依赖,下载完成,npm install后再npm run dev运行。

利用vue-cli配合vue-router搭建一个完整的spa流程(二)

前言
Ⅰ. demo所用vue-router的一些基本操作。vue-router中文文档,快速浏览一遍即可 http://router.vuejs.org/zh-cn/
Ⅱ. 整个demo所用到的技术栈 vueJS(2.0) vue-cli vue-resource es6
Ⅲ. 所需构建工具 nodeJS Git

第一步:安装

OK,正题开始,首先保证nodeJS,Git,webpack已安装完毕。打开项目文件夹,安装vue-cli。

全局安装 vue-cli
$ npm install --global vue-cli

创建一个基于webpack的模板
vue init webpack my-project
创建过程中,vue-router为必须,其他语法检测,单元测试等按需求安装。

创建完成后进入项目文件夹,安装依赖
$ npm install

安装到此结束,运行如下代码,显示为图片所示,则安装成功。
$ npm run dev

第二步:项目文件及运行流程 Ⅰ: 项目文件

打开已经创建好的模板

如图所示,只会用到,src,static,index.html这三个文件。首先解释一下三个文件的作用:
Ⅰ: src 存放路由JS,模板.vue文件,入口JS,以及一个入口.vue文件
Ⅱ: static 存放静态文件
Ⅲ: index 入口html文件

这里解释一下xxx.vue文件是什么,官网叫其为单文件组件,通过webpack源码转换,会全部转换为对应的文件。
说白了就是一个包裹,里边含有三部分 一部分模板template,一部分样式style,一部分JSjavascript,他们封装在一起。
如下图所示:

Ⅱ: 运行流程

写起来比较麻烦,做了一张图,直截了当。

第三步:搭建基本路由框架

项目文件明了之后,我们开始搭建一个简单的SPA路由构架:
Ⅰ: 页面中有俩个及俩个以上的分类
Ⅱ: 每个分类中可以点击进入到详情页面
Ⅲ: URL输入错误后展示404页面
Ⅳ: 在页面中刷新,根据URL重新获取数据,渲染页面

根据基础框架创建对应的文件。

文件详解:
Ⅰ: src中components文件夹里新建三个xxx.vue文件,
①error.vue 此为404页面
②showone.vue 此为第一个分类页面
③showtwo.vue 此为第二个分类页面

Ⅱ: src中zjapp.vue这是路由入口文件

Ⅲ: static中img为详情页面大图,thumbnail为分类页面缩略图

Ⅳ: 俩个JSON文件,分别代表分类一和分类二的数据来源

Ⅴ: bootstrap.css 样式CSS

到此路由的基本框架搭建完成,后面开始代码的填充。

第四步:主页面代码编写 Ⅰ: index.html

作为页面入口文件,先引入Bootstrap.CSS,如果是本地文件放在static文件夹里。可以使用CDN或者npm安装。
为了方便后面阅读将id="app"更改为id="index"。当然,也可以不更改,main.js中有多个为app的名字,避免混淆。



  
    
    spa-vue-demo
    
  
  
    
Ⅱ: main.js

main.js为入口JS文件,Vue的实例在这里书写。el 挂载在 index.html 中 id="index" 的标签上。

import Vue from "vue"
import App from "./zjapp"
import router from "./router"

Vue.config.productionTip = false

new Vue({
  el: "#index",
  router,
  template: "",
  components: { App }
})

Vue 开始渲染时,加载 components: { App } 组件替换生成在 id="index" 内的 标签,那么{ App }来自哪里呢?

答案在 import App from "./zjapp" 这里是ES6语法,引入zjapp.vue模块中暴露出来的接口,后缀可以不写。

Vue 实例中的 router 属性也是ES6中对象的字面量写法,等于router:router。同理 import router from "./router" 这里引入router。

因为,router中index.js暴露接口时没有署名,这里也可以改一个名字,比如:

import Vue from "vue"
import App from "./zjapp"

//修改名字一样可以。
import changeES6 from "./router"

Vue.config.productionTip = false

new Vue({
  el: "#index",

  //修改在这里
  router:changeES6,

  template: "",
  components: { App }
})

最后,可能有人会问 Vue.config.productionTip = false 是做什么用的,其实这里是关闭了生产模式即部署到服务器后给出的提示。

Ⅲ: zjapp.vue

这个文件是 Vue 一开始渲染组件时的文件,首先贴出全部代码,很多,但是会全部讲解作用,含义。



Ⅰ: HTML部分(即template)

大体分为三部个分

第一部分:

 
      
 

第一部分为页面中内容路由入口,其中:
v-bind:router-data="allData" 是对模板中传输数据用的
v-bind:key="change" 是页面切换动画绑定的变值,用来使页面被复用时触发切换动画

第二部分:


    

第二部分为页面中上一页,下一页按钮部分,其中:
v-show="allData.mainShow" 是控制俩个按钮显示,隐藏(详情页隐藏)
v-show="back==0?false:true" 是控制单个按钮显示,隐藏(最后一页时,下一页按钮隐藏)
v-on:click="dosom("back")" 是绑定的点击事件

第三部分:

第三部分为页面中内容更新数据时loading画面,其中:
v-show="loading" 是用来显示,隐藏 loading 动画

好了,到此主要的HTML模块已经布局完毕,现在开始JS功能的开发

Ⅱ: javascript

JS这里的整体流程:watch router.path的变化,从URL中读取数据,从新获取数据。(因为本地JSON文件,获取JSON后对JSON进行剪切)

import router from "./router" ES6语法,引入router模块下暴露的接口,这里引入router实例为后续编写编程式导航铺垫。

data(){ 
    return{
        allData:{
            showData:null,
            detailedData:{},
            num:0,
            mainShow:true
        },
        loading:false,
        change:true,
        back:0,
        next:1,
    }
}

showData 为当前页面渲染数据,即router-view被替换为showone.vue模板中的数据来源,每次点击下一页等操作导致router.path变化时,此数据更新对应的子模板中(showone.vue)数据也更新。(后面讲到路由页面时会解释)

detailedData 为详情页面渲染数据,即router-view被替换为showtwo.vue模板中的数据来源,同上。

num 这个是用来每次打开或者刷新页面时读取当前为第几页的number,因为这个数值用了很多次,故将它放到了初始化函数里

mainShow 控制俩个按钮(下一页,上一页)总体显示,隐藏

loading 控制loading动画的显示,隐藏

change 页面复用时的Key值

back 返回按钮的number,因为按钮的判断为v-show="back==0?false:true"当为0是隐藏

next 同上

以上为这个demo中数据的含义,下面是方法的解释,从methods开始说起:

buttonToggle(){
    var nowNum=this.allData.num;
    this.back=nowNum;
    this.next=2-nowNum;
}

这是俩个按钮的控制函数,因为JSON数据不多,一个分类中只有2页数据,所以 this.next=2-nowNum; 最后一页时隐藏。

dosom(str){
    str=="next"?this.allData.num++:this.allData.num--;
    this.buttonToggle();

//  http://localhost:8080/#/user/0/1
//  http://localhost:8080/#/user/0/this.allData.num
    router.push(this.$route.path.slice(0,8)+this.allData.num);
}

这是按钮点击时触发的方法,点击后判断是上一页,还是下一页,因为会动态的隐藏按钮所以不用关注++或者--的上下界。随后进行url的更改(url更改后会触发watch,watch中执行的函数为 routePath() ,下一个说到)

routePath(){
    if(this.$route.fullPath=="/"){
        router.push("/user/0/0");
        this.load();
    }
    else if(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判断函数:

当读取到的url为“/”时,此为第一次打开页面,跳转到首页也就是 http://localhost:8080/#/user/0/0 然后 执行load()方法,load() 方法下一个说到。

当读取到this.$route.fullPath.length==9 || this.$route.fullPath.length==20,其实就是 this.$route.fullPath/user/x/x 的主页面中,或者为 /user/x/x/con?type=x 的详情页面中,此时直接进行 load() 方法更新数据即可

最后其他任何 url 都被认为是错误的 http 请求,返回404页面,当然俩个翻页按钮隐藏。

load(){
    var numData=null,
    listData=null;    
        
//  /user/lisData/numData
    listData=this.$route.path.slice(6,7);
    numData=this.$route.path.slice(8,9);    
        
//  初始化num值
    this.allData.num=numData;
    this.buttonToggle();
//  页面复用时Key值
    this.change=!this.change;
    if(this.$route.path.indexOf("con")>0){

//      获取list中第几个
        var typeData=this.$route.query.type;
        this.$nextTick(e=>{
            this.$http.get("static/data-"+listData+".json").then(rea=>{
                this.loading=true;
                setTimeout(e=>{
                                    
                    //vue-resource加载数据存在于data.body中
                    var listNum=rea.body.allData.slice(numData*6,numData*6+6);
                                
                    //详细显示页面数据来源
                    this.allData.detailedData=listNum.slice(typeData,typeData+1)[0];
                                
                    this.loading=false;
                },700);
            });                
        });
        this.allData.mainShow=false;
    }else{
        this.$nextTick(e=>{
            this.loading=true;
                setTimeout(e=>{
                    this.$http.get("static/data-"+listData+".json").then(rea=>{
                        this.allData.showData=rea.body.allData.slice(numData*6,numData*6+6);
                        this.loading=false;
                    });
                },700);
            });
        this.allData.mainShow=true;
    }
}

这个方法的作用是交互数据,demo 有俩个分类,首页,和第一页,所以对应的数据也是俩个JSON。定时器的作用是模拟数据请求延时。

以上就是 methods 方法里全部函数,下面解释一下Vue实例里其他的方法。

created(){
    this.routePath();
}

这是一个生命周期钩子代表Vue实例被创建好了,创建好之后进行url解析,这是初始化的步骤,第一次打开这个demo执行的函数。官方文档: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流程(二)上。顺便求一波关注吧(ˉ▽ˉ;)...

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/82659.html

相关文章

  • 利用vue-cli配合vue-router搭建完整spa流程(二)

    摘要:利用配合搭建一个完整的流程一在一中写到了主要页面的编写,现在开始三个路由页面的编写。每个列表绑定跳转到详情页的函数。整体思想通过监控的变化,变化后执行函数,随后重新获取数据。 上篇文章太长了,编写时拖动太麻烦,重开一篇。利用vue-cli配合vue-router搭建一个完整的spa流程(一) 在(一)中写到了主要页面的编写,现在开始三个路由页面的编写。 第一步: 路由实例inde...

    mcterry 评论0 收藏0
  • webpack配合vue.js实现完整单页面demo

    摘要:本篇文章主要是我在开发前研究了的单页面应用,因为需要用到的,所以确保安装了,建议官网安装最新的稳定版本。本文章只是和大家探讨怎么利用配合做一个单页面应用,具体关于里面的内容怎么写并不在本篇文章的介绍范围。 本篇文章主要是我在开发前研究了webpack+vue.js的单页面应用,因为需要用到node的npm,所以确保安装了node,建议官网安装最新的稳定版本。并且在项目中需要加载一些np...

    2450184176 评论0 收藏0
  • vue.js使用vue-cli搭建SPA项目

    摘要:之所以写这篇如何运用脚手架自动化构建出一个项目的大架构,主要是面向想入门的小伙伴。之前,我第一次接触,一直摸不着头脑,想在网上搜个接地气的教程都找不到。 WHY 之所以写这篇如何运用脚手架自动化构建出一个项目的大架构,主要是面向想入门vue的小伙伴。之前,我第一次接触vue,一直摸不着头脑,想在网上搜个接地气的教程都找不到。SO,我以如何搭建结构为开始,向想入门vue的童鞋们把我仅有的...

    CrazyCodes 评论0 收藏0
  • vue.js使用vue-cli搭建SPA项目

    摘要:之所以写这篇如何运用脚手架自动化构建出一个项目的大架构,主要是面向想入门的小伙伴。之前,我第一次接触,一直摸不着头脑,想在网上搜个接地气的教程都找不到。 WHY 之所以写这篇如何运用脚手架自动化构建出一个项目的大架构,主要是面向想入门vue的小伙伴。之前,我第一次接触vue,一直摸不着头脑,想在网上搜个接地气的教程都找不到。SO,我以如何搭建结构为开始,向想入门vue的童鞋们把我仅有的...

    B0B0 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<