vue(三)CLI脚手架以及路由vue-router

小知识点:给路径起别名:

配置webpack.base.conf.js

在引用图片、文件时,做修改路径的操作很方便。

脚手架2,在别名中不可以用别名,脚手架3可以。因此下面的写法是脚手架3的写法。自己注意

vue(三)CLI脚手架以及路由vue-router_第1张图片

比如

import TabBar from 'components/tabbar/TabBar'

但是在标签用引用路径的时候,前面要加个~

 

一、认识脚手架:

1.1 什么是脚手架

vue(三)CLI脚手架以及路由vue-router_第2张图片

1.2 CIL使用前提:

(1)node

vue(三)CLI脚手架以及路由vue-router_第3张图片

node环境,并且node已经为我们安装好npm

(2)webpack

vue(三)CLI脚手架以及路由vue-router_第4张图片

 (3)安装CLI

npm install -g @vue/clI

1.3 拉取CLI2的模板

npm install -g @vue/cli-init    安装好后,既可以用脚手架3也可以用脚手架2

1.4 创建项目

使用脚手架2创建项目:vue init webpack my-project

使用脚手架3创建项目:   vue create my-project

1.5 runtime-compiler与runtime-only区别:

1.5.1 vue程序运行过程

vue(三)CLI脚手架以及路由vue-router_第5张图片

vue(三)CLI脚手架以及路由vue-router_第6张图片

template->ast->render->v dom->UI 

因此使用runtime-only性能更高,代码量更少。

 

 1.5.2 render函数。

本质:createElement()

vue(三)CLI脚手架以及路由vue-router_第7张图片

在runtime-only中,拿到的app对象,已经由vue-template-compiler编译完成了,并且该对象中有render函数,没有template属性了。 

 vue(三)CLI脚手架以及路由vue-router_第8张图片

 vue(三)CLI脚手架以及路由vue-router_第9张图片

 1.6 运行图:

1.6.1 npm run build 

开发时所以来的环境

vue(三)CLI脚手架以及路由vue-router_第10张图片

 1.6. 2 npm run dev

生产时所以来的环境。

npm run service

vue(三)CLI脚手架以及路由vue-router_第11张图片

二、认识cli3

2.1 认识cli3

vue(三)CLI脚手架以及路由vue-router_第12张图片

2.2 配置去哪里了

修改配置的三种方案:

  • vue ui打开页面,进行页面配置。
  • node_modules/@vue/webpack.config.js     ./lib/Service
  • 在当前目录下,创建vue.config.js,通过module.exports{}引入相关配置,项目会自动将该配置与其他配置进行合并,作为项目的整体配置。

三、箭头函数和this指向

3.1 定义函数的方式:

  • const app = function(){}
  • 对象字面量中定义函数:aaa(){};  aaa: function(){}
  • 箭头函数:

3.2 this指向

复习:定时器函数调用了call方法,使得this指向定时器。因此,即使实在对象中的定时器函数,也指向window

vue(三)CLI脚手架以及路由vue-router_第13张图片

箭头函数的没有this,箭头函数的this要去找最近的作用域 :向外层作用域中,一层层查找,直到找到最近由this的作用域。

vue(三)CLI脚手架以及路由vue-router_第14张图片

vue(三)CLI脚手架以及路由vue-router_第15张图片

四、路由router

4.1 什么是路由

vue(三)CLI脚手架以及路由vue-router_第16张图片

 4.2 前端渲染和后端渲染:

4.2.1 后端渲染:

jsp:java server page

用户发送url,服务器在后端(服务器端)将网页渲染好,然后将渲染好的页面直接发送给浏览器。当前发送来的页面,只包括html+css

vue(三)CLI脚手架以及路由vue-router_第17张图片

 后端路由:后端处理url和页面之间的映射关系

vue(三)CLI脚手架以及路由vue-router_第18张图片

 4.2.2 阶段2: 前后端分离阶段

后端只负责提供数据,不负责任何阶段的内容。

前端渲染:浏览器中显示的网页中的大部分内容,都是由前端写的js代码,在浏览器中执行,最终渲染出的网页。

客户端发送url请求,从静态资源服务器中请求html+css+js,浏览器执行js代码,从提供API接口的服务器请求数据,然后执行其他代码,进行网页的渲染(创建结点,插入结点等。)

vue(三)CLI脚手架以及路由vue-router_第19张图片

 4.2.3 SPA(single page web application)单页面富应用

整个网页只有一个html页面。

只有一套html+css+js。

第一次访问时,从静态资源服务器中请求一套html+css+js(只请求一次).访问不同的url,执行不同的js代码,渲染不同的页面(组件)。因此在前端路由中,url和组件(页面)有映射关系

vue(三)CLI脚手架以及路由vue-router_第20张图片

vue(三)CLI脚手架以及路由vue-router_第21张图片

 4.3 前端路由的核心

4.3.1 改变url,但是页面不进行整体的刷新

法1:修改location.hash='home'

vue(三)CLI脚手架以及路由vue-router_第22张图片

法2:通过history对象的方法

(1)通过history.pushState({},'','home')来修改  同时这还是一个入栈操作

histor.back()  执行出栈操作

vue(三)CLI脚手架以及路由vue-router_第23张图片

 (2):history.replaceState({},'','home')  不是入栈操作,而是替换操作。不能返回。

(3):history.go(-1)等同于history.back()  

               go(-num) 弹出num个元素。go(num)  :压进num个元素。

vue(三)CLI脚手架以及路由vue-router_第24张图片

 五:vue-router(vue路由)

5.1 认识vue-router

vue(三)CLI脚手架以及路由vue-router_第25张图片

 vue(三)CLI脚手架以及路由vue-router_第26张图片

 手动搭建路由框架:在src中创建router文件夹,在该文件夹下创建index.js文件。手动配置路由信息。(实际开发中不需要手动写该文件,已经写好,直接在其中配置路由信息即可。)

// 配置相关的路由信息
import VueRouter from 'vue-router'
import Vue from 'vue'

// 1.使用Vue.use(插件)方法安装插件(路由)
Vue.use(VueRouter);

// 2.创建VueRouter对象
const routes = []
const router = new VueRouter({
    // 配置路由和组件之间的映射关系
    routes
})

// 3. 将router对象传入到Vue实例
export default router

 小tips:

// 当传入的是一个目录时,会自动寻找index.js文件
import router from './router'

5.2 简单练习vue-router

vue(三)CLI脚手架以及路由vue-router_第27张图片

(1)在components文件夹中创建两个vue文件.编写对应的组件。

(2)在router/index.js中配置页面和组件的映射信息:

const routes = [
    {
        path: '/home',
        component: Home
    },
    {
        path: '/about',
        component: About
    }
]
const router = new VueRouter({
    // 配置路由和组件之间的映射关系
    routes
})

 (3)使用路由:在App.vue中编写使用进行页面跳转,使用占位,显示相应组件的内容。

vue(三)CLI脚手架以及路由vue-router_第28张图片

 5.3 路由的默认路径:

vue(三)CLI脚手架以及路由vue-router_第29张图片

 5.4 修改路径时使用history模式

使用哈希模式,会出现一些#号。有点乱,可以改成哈希模式

vue(三)CLI脚手架以及路由vue-router_第30张图片

 5.5 router-link属性的补充

vue(三)CLI脚手架以及路由vue-router_第31张图片

属性:(1) to="/home"

          (2) tag="button"  //将该标签渲染成其他标签,默认是a标签

          (3) replace  //默认该标签使用的是htistory.pushState,因此可以进行返回操作。但是加了replace属性后,使用的是htistory.replaceState(),就不可以进行返回了。

        (4) active-class:  ①:在style中为.root.link.activate{}设置相关样式。②:可以设置,然后在style中为.activate{}设置相关样式。③:当有多个跳转时,修改多个行内样式很麻烦,可以在src/router/index.js中为router添加一个属性linkActiveClass:"activate", 然后在相应的style中为.activate{}设置相关样式

5.6 通过代码跳转路由。

vue-router为所有的组件添加了一个router属性

 5.7 动态路由

比如:在路径后添加userId

(1)配置路由

    {
        path: '/user/:aaa',
        component: User
    }

(2)在App.vue中设置跳转路由。在当前组件中设置了一个属性userId,通过v-bind:获取userId

用户


 data(){
    return {
      userId: 'zx'
    }
  },

(3)额外添加一个功能,在user页面中,显示userId(显示的不是数据userId,而是路由处的userId。)

可以添加一个计算属性,返回userId

route要与router区分开。route是获取所有路由中当前活跃的路由。而router获取的是vue-router



5.8 打包的文件分析:

使用npm run build进行打包。打包后,在dist文件夹中有一个index.html作为入门。还有一个static文件夹。static文件夹中有一个css文件夹中有一个css文件,将所有的css抽离出来。static中第二个文件夹是js文件夹,有三个js文件:

app.xxxx.js: 当前应用程序开发的所有代码(业务代码,自己写的)

manifest.xxxx.js:  为打包的代码做底层支撑:比如为导入导出写一些代码支撑。

vendor.xxxx.js: 引用的第三方的东西: vue、vue-router、axios等

5.9 路由懒加载:用到时再加载

5.9.1 认识路由懒加载

vue(三)CLI脚手架以及路由vue-router_第32张图片

 5.9.2 路由懒加载效果vue(三)CLI脚手架以及路由vue-router_第33张图片

5.9.3 路由懒加载的方式

vue(三)CLI脚手架以及路由vue-router_第34张图片

 5.10 嵌套路由

5.10.1 认识嵌套路由

vue(三)CLI脚手架以及路由vue-router_第35张图片

(1) 首先创建两个组件(vue文件),编写各自模板。

(2)注册组件

{
        path: '/home',
        component: Home,
        children: [
            {
                path: '',
                redirect: 'news'
            },
            {
                path: 'news',
                component: HomeNews

            },
            {
                path: 'message',
                component: HomeMessage
            }
        ]
    },

(3)使用组件:

5.11 vue-router参数传递

vue(三)CLI脚手架以及路由vue-router_第36张图片

5.11.1 利用动态路由传递参数 

    {
        path: '/user/:userId',
        component: User
    },

5.11.2 使用query

 (1)创建组件

(2)注册组件

(3)使用组件 采用对象的方式,传递参数 path query

档案

(4)取出参数

使用代码传递参数:

vue(三)CLI脚手架以及路由vue-router_第37张图片

 5.12 route和router的区别 

所有的组件都继承自Vue类的原型

Vue.prototype.$router = router

Vue.prototype.$route = 当前活跃的route

vue(三)CLI脚手架以及路由vue-router_第38张图片

5.13 源码阅读:

 (1)Vue.use(插件);实际执行的时vue.install方法

(2)router-link ,router-view是vue-router内部注册的全局组件。注册时写成RouterLink和RouterView.这里涉及到命名规则,了解即可。

5.14 导航守卫

监听跳转的过程,从哪里跳到哪里

vue(三)CLI脚手架以及路由vue-router_第39张图片

vue(三)CLI脚手架以及路由vue-router_第40张图片

vue(三)CLI脚手架以及路由vue-router_第41张图片

 实现效果:每当跳转一个页面,需要更改对应的title

(1)首先在每个组件中添加元数据(描述数据的数据),并且设置title属性

 {
        path: '/about',
        component: About,
        meta: {
            title: '关于'
        }
    }

(2)在main.js中编写函数router.beforeEach

本来可以写成document.title = to.meta.title,但是对于嵌套路由不起作用,因此使用下面的写法,matched是对路由进行一层层解析。

router.beforeEach((to, from, next)=>{
  document.title = to.matched[0].meta.title;
  console.log(to);
  next();
})

跳转页面没有问题了,但是一开始刷新页面不会显示title,可以在App组件中写created生命周期函数设置title。

扩充知识点:

vue(三)CLI脚手架以及路由vue-router_第42张图片

后置钩子已经跳转完了,因此不需要使用next()函数

 vue(三)CLI脚手架以及路由vue-router_第43张图片

 后面自己去官网了解路由独享守卫组件内的守卫

5.15 keep-alive 保持状态

5.15.1 认识keep-alive

小案例:主页面有home和user两个页面跳转,home中又又news和message两个小组件点击news和message显示不同的ul。实现效果:home默认显示news,点击home的message,然后点击user,再点击home时,使home显示message(因为离开home之前显示的是message)

 
      
 

原本如果不加keep-alive,组件会不断地创建和销毁(可以在组件中添加created和destroyed函数观察其创建和销毁过程)。加了keep-alive后,即使跳转其他页面,组件也不会销毁。

因此keep-alive的作用就是不让组件频繁地进行创建和销毁。

为了实现上述案例所要实现的效果,将home子组件中的默认路由取消,在home组件中的data中设置一个path属性,默认是/home/news.使用activated的函数进行路由的跳转(activated:  当该页面(组件)进入活跃状态时,就会进入该函数).  用组件导航守卫函数beforeRouteLeave,跳转页面之前,保存当前页面的路由,实现上述的功能。

5.15.2  keep-alive与activated和deactivated函数的关系

注意:如果不加keep-alive,activated和deactivated 函数是不能够执行的。

同时,只有,keep-alive时,才能实现activated和deactivated函数

5.15.3 keep-alive的属性

//exclude中使用组件的name属性即可。注意逗号后面不要有空格(正则表达式中也不要随便加空格)。当前Profile和User组件会被频繁地创建和销毁

      
 

vue(三)CLI脚手架以及路由vue-router_第44张图片

你可能感兴趣的:(前端,vue)