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

约定不等于承诺〃 2022-06-07 08:27 195阅读 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：跳转——<router-link></router-link>或者this.$router.push(\{path:' '\})

5-5：渲染——<router-view></router-view>

（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
      })
    
    })