好文章备忘录：

转自：https://segmentfault.com/a/1190000009160934?_ea=1849098

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的名字，避免混淆。

<!DOCTYPE html>
<html><head> <meta charset="utf-8"> <title>spa-vue-demo</title> <link rel="stylesheet" href="static/bootstrap.min.css" /> </head> <body> <div id="index"></div> <!-- built files will be auto injected --> </body> </html>

Ⅱ： 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: '<App/>', components: { App } })

Vue 开始渲染时，加载 components: { App } 组件替换生成在 id="index" 内的 <App></App> 标签，那么{ 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: '<App/>', components: { App } })

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

Ⅲ： zjapp.vue

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

<template><div class="container"> <div class="row"> <div id="index" class="col-xs-12 col-lg-12 col-md-12" style="padding: 0;"> <transition name='animate' appear mode='out-in'> <router-view v-bind:router-data="allData" v-bind:key="change"></router-view> </transition> <transition name='btn' appear mode='out-in'> <div class="app-btn" v-show="allData.mainShow"> <button class="btn btn-success app-btn-back" v-show="back==0?false:true" v-bind:key="back" v-on:click="dosom('back')">上一页</button> <button class="btn btn-success app-btn-next" v-show="next==0?false:true" v-bind:key="next" v-on:click="dosom('next')">下一页</button> </div> </transition> <div class="app-loading" v-show="loading"> <img src="../static/loading/loading.gif" style="margin:0 auto;display: block;" alt="loading" /> </div> </div> </div> </div> </template> <script> import router from './router' export default{ data(){ return{ allData:{ showData:null, detailedData:{}, num:0, mainShow:true }, loading:false, change:true, back:0, next:1, } }, created(){ this.routePath(); }, watch:{ "$route"(to){ this.routePath(); } }, methods:{ buttonToggle(){ var nowNum=this.allData.num; this.back=nowNum; this.next=2-nowNum; }, dosom(str){ str=="next"?this.allData.num++:this.allData.num--; this.buttonToggle(); //当前user/当前页面/当前页面路由 router.push(this.$route.path.slice(0,8)+this.allData.num); }, 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; } }, load(){ var numData=null, listData=null; // /user/lisData/numData numData=this.$route.path.slice(8,9); listData=this.$route.path.slice(6,7); // 初始化 this.allData.num=numData; this.buttonToggle(); 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; } } } } </script> <style> /*切换中动画*/ .animate-enter-active,.animate-leave-active{ transition: all 0.5s ease; } .animate-enter{ transform:

转载于:https://www.cnblogs.com/sweeeper/p/8652624.html

利用vue-cli配合vue-router搭建一个完整的spa流程相关推荐

  1. vue脚手架搭建配置试调地址和端口号_全栈的自我修养: 002使用@vue/cli进行vue环境搭建 (使用Vue,SpringBoot,Flask完成前后端分离)...

    全栈的自我修养: 使用@vue/cli进行vue.js环境搭建 Success, real success, is being willing to do the things that other ...

  2. 根据vue的脚手架 简单的搭建一个单页面

    根据vue的脚手架 简单的搭建一个单页面 1.首先需要安装npm node.js 自带,所以去安装node.js 就可以了. node中文网址 这里是网址 或者自行百度,网上很好找.另外还需要手动安装 ...

  3. Vue CLI 官方文档（一）@vue/cli、@vue/cli-service、插件和 Preset

    Vue CLI 官方文档(一)@vue/cli.@vue/cli-service.插件和 Preset 文章目录 Vue CLI 官方文档(一)@vue/cli.@vue/cli-service.插件 ...

  4. 使用 Vue CLI 创建 Vue 2.x 项目

    使用 Vue CLI 创建 Vue 2.x 项目 什么是 Vue CLI 使用 Vue CLI 创建 Vue.js 项目 1. 准备 Node 和 npm 1.1 检查 Node 版本: 1.2 检查 ...

  5. 1-3.Win10系统利用Pycharm社区版安装Django搭建一个简单Python Web项目的步骤之三

    在1-1.Win10系统利用Pycharm社区版安装Django搭建一个简单Python Web项目的步骤之一 基础上进行如下操作: 所有路由不能全部都在myDjango下的urls.py路由文件中, ...

  6. 使用Vue cli创建Vue项目

    使用Vue cli创建Vue项目 第一步:安装node.js 安装node.js,从node.js官网下载并安装node,安装过程很简单,一路"下一步"就可以了(傻瓜式安装).安装 ...

  7. 如何搭建一个完整的Vue3.0 + ts 的项目

    如何搭建一个完整的Vue3.0 + ts 的项目 相信9月18日尤大大的关于Vue3.0的发表演讲大家一定有所关注,现在Vue3.0 也已经进入RC阶段(最终产品的候选版本,如果没有问题则可发布成为正 ...

  8. 【React进阶-1】从0搭建一个完整的React项目（入门篇）

    这篇文章带领大家从零开始手动撸一个React项目的基础框架,集成React全家桶.万字长文,请各位有足够的时间时再来阅读和学习. 概述 平时工作中一直在用React提供的脚手架工具搭建React项目, ...

  9. 如何快速搭建一个完整的移动直播系统？

    **如何快速搭建一个完整的移动直播系统?** 原文连接:http://toutiao.com/a6301796359717945601/ http://toutiao.com/a62784095597 ...

最新文章

  1. python取列表中最接近某值的元素及索引
  2. 华为手机有没有html,华为手机，到底有没有自己的核心技术？看内行人怎么说...
  3. Android Service 全解析
  4. 利用angular结合translate为项目实现国际化
  5. c语言调用oracle函数返回值吗,C语言通过值和引用函数
  6. lisp正负调换_坐标提取lisp程序
  7. pcb只开窗不镀锡_只因为把高速PCB旋转了一下，结果地覆天翻……
  8. python小程序代码_Python解题记录第19题
  9. C#两种创建快捷方式的方法
  10. 计算机第三课细心小编辑教案,教案-第6课小小编辑师
  11. 51单片机二维码识别
  12. 企业实战之部署Solarwinds Network八部众
  13. Leaflet渲染TopoJSON数据demo
  14. 风格迁移应用_浅谈风格迁移（一）固定风格迁移
  15. sshpass命令的安装使用
  16. 淘宝可以传照片搜索商品,verygood.雅客VC多味水果糖
  17. 与第三方iot平台IFTTTSmartthingsGoogle对接开发iot物联网云服务
  18. java物流配货流程的了解_物流案例：配送中心的作业流程及其管理
  19. Android Recovery 模式
  20. 用python画小黄人步骤图-怎么用python画小黄人

热门文章

  1. rest php,REST介绍与REST在PHP中的应用
  2. Java教程:Java continue语句详解
  3. php 数组重新打乱_PHP 将数组打乱 shuffle 函数
  4. 2345电脑管家_PS教程第一节：如何正确安装PScc？安装前做好这一步电脑才不会卡顿....
  5. 一个优雅的后端API接口样例和代码实现方案
  6. mysql相关知识点_mysql相关知识点整理
  7. Ubuntu18.04 LTS 安装nvidia驱动出现Ignoring CC version mismatch
  8. 基于phash和汉明距离找出相似图片
  9. Pytorch:损失函数
  10. 高薪诚聘项目经理，架构师，高级工程师，工程师，网页设计师