美文网首页
Vue------Vue-cli脚手架+前端路由

Vue------Vue-cli脚手架+前端路由

作者: 如是__ | 来源:发表于2018-01-10 16:43 被阅读0次

Vue-cli是Vue的脚手架工具

可以进行目录结构、本地调试、代码部署、热加载、单元测试

1、MVVM框架

View    ——    ViewModel    ——     Model

“DOM”“观察者vue实例”    “Javascript”

注意:交互为双向的

特点:

(1)针对具有复杂交互逻辑的前端应用;

(2)提供基础的架构抽象;

(3)通过Ajax数据持久化,保证前端用户体验。

2、什么是Vue.js

它是一个轻量级MVVM框架,

属于“数据驱动+组件化”的前端开发

Vuejs VS Angular+React

(1)Vue.js耿轻量,gzip后大小只有20k+

(2)Vue.js更易上手,学习曲线平稳

(3)吸取两家之长,借鉴了angular的指令(如v-show)和react的组件化

3、vue.js核心思想

(1)数据驱动

DOM是数据的一种自然映射

   扩展——数据响应原理

数据(model)改变驱动视图(view)自动更新

(2)组件化

扩展HTML元素,封装可重用的代码

   扩展——组件设计原则

a、页面上每个独立的可视/可交互区域视为一个组件

b、每个组件对应一个工程目录,组件所需要的各种资源在这个目录下就近维护

c、页面不过是组件的容器,组件可以嵌套自由组合形成完整的页面

4、vue-cli脚手架

https://github.com/vue.js/vue-cli

(1)vue-cli安装(Win10)

步骤1:“Ctrl+ R”打开命令行

node -v

npm install -g vue-cli

步骤2:运行vue命令尝试

vue

vue init

步骤3:创建项目sell

vue init webpack sell

cd sell

npm install

npm run dev

(2)vue-cli项目目录

(3)webpack打包

5、vue-router前端路由

路由是根据不同的url地址展示不同的内容或界面。

前端路由就是把 不同路由对应不同的内容或页面的任务交给前端来做,之前是通过服务端根据url的不同返回不同的页面来实现的,而现在前端路由即实现了“前后端分离”

5-1:什么时候使用前端路由?

在单页面应用中,保持大部分页面结构不变,只改变部分内容的使用

5-2:前端路由有什么优点和缺点?

优点:用户体验好,不需要每次都从服务器全部获取,快速展现给用户

缺点:

(1)不利于SEO搜索引擎

(2)使用浏览器的前进,后退键的时候会重新发送请求,没有合理的利用缓存

(3)单页面无法记住之前滚动的位置,无法再前进、后退的时候返回之前滚动位置

5-3:利用vue-router用来构建SPA

5-4:跳转——或者this.$router.push({path:' '})

5-5:

渲染——(5-4跳转至界面 与 5-5渲染至某个位置  二者是配合使用的)

5-6:动态路由匹配map

模式:/user/:username

5-7:嵌套路由

路由嵌套路由

export default new Router({  

  routes: [  

    {  

        path:'/goods',  

        name:'Goodslist',  

        component: Goodslist,  

        children :[  

                {  

                path:'title',  

                name:'title',  

                component: Title  

               },  

               {  

                  path:'img',  

                  name:'img',  

                  component: Image  

                }  

        ]  

     }  

  ]  

})  

5-8:编程式路由

什么是编程式路由?——通过js来实现页面的跳转

方式1:$router.push("name")

方式2:$router.push({path:"name"})

方式3:$router.push({path:"name?a=123"})或者$router.push({path:"name",query:{a:123})

方式4:$router.go(1)

5-9:命名路由和命名视图

(1)命名路由——给路由定义不同的名字,根据名字进行匹配

(2)命名视图——给不同的router-view定义名字,通过名字进行相应组件的渲染

6、vue-resource

在node环境下安装输入命令行:npm install vue-resource --save

其请求API是按照REST风格设计的,它提供了7种请求API:

(1)get:从服务器端获取数据——“得到”

(2)post:从客户端向服务器端提交数据——“提交”

(3)head

(4)delete

(5)jsonp

(6)put

(7)patch

全局拦截器interceptors

Vue.http.interceptors.push((request,next)=>{  

//..  

//请求发送的处理逻辑  

//..  

  next(response) => {  

//..  

//请求发送后的处理逻辑  

//..  

//根据请求的状态,response参数会返回给successCallback或errorCallback  

return response  

  })  

}) 

相关文章

  • Vue------Vue-cli脚手架+前端路由

    Vue-cli是Vue的脚手架工具 可以进行目录结构、本地调试、代码部署、热加载、单元测试 1、MVVM框架 Vi...

  • Spring boot后端,vue前端路由设置无法刷新

    在vue脚手架搭建的前端代码中,可以按照正常的路由信息进行路由的设置,完全没有问题,但是把打包好的前端代码放在sp...

  • 前端部署脚手架专网项目实践

    前端部署脚手架专网项目实践 前言 前端脚手架是前端工程化中一项重要的提升团队效率的工具,因而构建脚手架对于前端工程...

  • 第三十一节:Vue路由:前端路由vs后端路由的了解

    1. 认识前端路由和后端路由 前端路由相对于后端路由而言的, 在理解前端路由之前先对于路由有一个基本的了解 路由:...

  • 前端微服务化解决方案5 - 路由分发

    路由分发式微前端 从应用分发路由到路由分发应用 用这句话来解释,微前端的路由,再合适不过来. 路由分发式微前端,即...

  • vue - 路由模式

    1 路由的基本概念与原理 路由的本质就是对应关系; 在开发中, 路由分为前端路由和后端路由. 1.1 前端路由 概...

  • react-router-dom

    一、什么是前端路由 在我看来,前端路由和网络上的路由器功能很像。前端路由也是进行分发操作,只不过其分发的是页面跳转...

  • vue-router配置

    前言 这篇文章给大家讲解的是在vue-cli脚手架中如何配置vue-router前端路由的相关内容。 首先在mai...

  • vue基础-路由(重要)

    前端路由的概念与原理 什么是前端路由 Hash 地址与组件之间的映射关系,前端路由可以将hash地址和组件关联起来...

  • CreateReactApp+ReactRouter4的使用

    路由基础介绍1,什么是前端路由? 路由是根据不同的 url 地址展示不同的内容或页面 前端路由就是把不同路由对应不...

网友评论

      本文标题:Vue------Vue-cli脚手架+前端路由

      本文链接:https://www.haomeiwen.com/subject/ssmiixtx.html