vue相关知识点二

一，vuecli-脚手架的介绍和安装：
1、什么是 Vue CLI?
— 使用Vue.js 开发大型应用时，我们需要考虑代码目录结构、项目结构和部署、热加载、代码单元测试等事情；
— 如果每个项目都要手动完成这些工作，那无疑效率比较低下，所以通常我们会使用一些脚手架工具来帮助完成这些事情；
— CLI 是Command-Line Interface,翻译为命令行界面，俗称脚手架；
— Vue CLI 是一个官方发布 vue.js 项目脚手架；
— 使用 vue-li 可以快速搭建 Vue 开发环境以及对应的 webpack 配置；
— Vue CLI 使用前提 - Node；
— 什么是NPM：NPM的全称是 Node Package Manager;是一个NodeJS包管理和分发工具，已经成为了非官方的发布Node模块（包）的标准；后续我们会经常使用NPM来安装一些开发过程中的依赖包。
— cnpm安装：由于国内直接使用npm的官方镜像是非常慢的，推荐使用淘宝NPM镜像；
cnpm install [name]
— Vue.js 官方脚手架工具就使用了webpack模版；对所有的资源会压缩等优化操作；
它在开发过程中提供了一套完整的功能，能够使我们开发过程变得高效；
2、Vue CLI 的使用：（具体卡参考Vue CLI官网）
— 安装Vue脚手架 npm install -g @vue/cli (脚手架3安装方法)
— 上面安装的是Vue CLI 3 的版本，如果想要在3的基础上使用脚手架2，需要拉取脚手架2模版：
npm install -g @vue/cli-init
— Vue CLI2初始化项目 vue init webpack my-project
— Vue CLI3初始化项目 vue create my-project
3、Vue CLI2 初始化项目过程：

4、Vue CLI2 的目录结构解析：
— node 为 js 提供了运行环境；

安装CLI错误和ESLint规范：
— 安装脚手架报错处理方法：删除 C:\Users\13099\AppData\Roaming 目录下的 npm-cache 文件夹；
— 配置了ESLint但是不想用，config 目录下的 index.js 文件中关闭ESLint，useESLint:false,
runtime-compiler 和 runtime-only 的区别：

— runtime-compiler
* template --> ast —>render —> vdom —> UI
— runtime-only
*render—>vdom —> UI
* 性能更高
* .vue文件中的 template 是由 vue-template-compiler 处理的；
* 代码量更少（6kb lighter）
总结： 如果在之后的开发中，依然使用 template ，就需要选择 runtime-compiler ；
如果在之后的开发中，使用的是 .vue 文件夹开发，可以选择 runtime-only ；
render 函数： el里面的内容最终会被 render 里的内容所替换掉；

5.VueCLI3创建项目和目录结构：
— VueCLI3 与 VueCLI2 版本的区别：
* VueCLI3 是基于 webpack4 打造；VueCLI2 是基于 webpack3；
* VueCLI3 的设计原则是“0配置”，移除的配置文件根目录下的 build 和 config 等目录；
* VueCLI3 提供了 vue ui 指令，提供了可视化配置，更加人性化；
* 移除了 static 文件夹，新增了 public 文件夹，并且将 index.html 移动到 public 中；

一大堆配置文件去哪了？ 方法一：启动配置服务器 vue ui ;
方法二：node_modules --> @vue --> cli-server --> webpack.config.js
方法三： 自己添加或修改配置文件： 创建 vue.config.js 文件添加一个配置文件；并执行命令 git commit -m 将其添加到本地仓库；

6.vue-router
— 路由是一个网络工程里面的术语；
— 路由(routing)就是通过互联的网络吧信息从源地址传输到目的地址的活动。
— 路由中有一个非常重要的概念叫路由表，路由表本质上就是一个映射表，决定了数据包的指向；
— 什么是前端渲染？什么是后端渲染？
后端渲染/服务端渲染： — 第一阶段
- 早期的网站开发整个HTML页面是由服务器来渲染的；
- 服务器直接生产渲染好对应的HTML页面，返回给客户端进行展示；
- 早期没有js，网页开发一般用 jsp – java server page php 等等 + HTML + CSS
- html + css + java java代码作用是从数据库中读取数据，并将它动态的放在页面中；（服务器通过特殊的技术直接将页面渲染好，收到请求后直接将页面渲染到浏览器）
- 但是，一个网站那么多页面，服务器如何处理呢？
* 一个页面有自己对应的网址，也就是URL；
* URL会发送到服务器，服务器会通过正则对该URL进行匹配，并且最后交给一个Controller 进行处理；
* Controller 进行各种处理，最终生成 HTML 或者数据，返回给前端；
* 这就完成了一个 IO 操作；
- 后端路由：*上面的这种操作，就是后端路由。（后端处理 URL 和页面之间的映射关系；）
* 当我们页面中需要请求不同的路径内容时，交给服务器来进行处理，服务器渲染好整个页面，并且将页面返回给客户端；
* 这种情况下渲染好的页面，不需要单独加载任何的 js 和 css ，可以直接交给浏览器展示，这样也有利于 SEO 优化；
- 后端路由的缺点： * 一种情况是整个页面的模块由后端人员来编写和维护的；
* 另一种情况是，前端开发人员如果要开发页面，需要通过 PHP 和 Java 等语言来编写页面代码；
* 而且通常情况下，HTML 代码和数据以及对应的逻辑会混在一起，编写和维护都是不太方便；
前后端分离阶段（前端渲染）–第二阶段： - 后端只负责提供数据，不负责任何界面的内容；
- 随着 Ajax 的出现，有了前后端分离的开发模式；
- 后端只提供 API 来返回数据，前端通过 Ajax 获取数据，并且可以通过JavaScript将数据渲染到页面上；
- 这样做最大的优点就是前后端责任的清晰，后端专注于数据上，前端专注于交互和可视化上；
- 并且，当移动端（iOS/Android）出现后，后端不需要进行任何处理，依然使用之前的一套API即可；
前端渲染： 浏览器中显示的网页中的大部分内容，都是由前端写的js代码在浏览器中执行，最终渲染出来的网页；
单页面富应用（SPA）阶段： —第三阶段
— SPA 页面：simple page web application 整个网页只有一个html页面
— 其实 SPA 最主要的特点就是在前后端分离的基础上加了一层前端路由 ；
— 也就是前端来维护一段路由规则；
— 前端路由的核心： -----> 改变URL，但是页面不进行整体的刷新；
改变URL，但是页面不进行整体的刷新—怎么做到：
– 01.URL的hash： URL的hash也就是锚点（#），本质上是改变 window.location 的 href 属性；
我们可以通过直接赋值 location.hash 来改变 href ，但是页面不发生刷新；
– 02.HTML5的history模式：pushState — 该方法类似于栈结构

history.pushState() 和 history.back() 相当于入栈和出栈操作；
— 03、HTML5的history模式：replaceState

— 04、HTML5的history模式：go
* history.back() 等价于 history.go(-1);
* history.forward() 等价于 history.go(1);
* 这三个接口等同于浏览器界面的前进后退 ；
vue-router 的配置和安装：
— 目前前端流行的三大框架，都有自己的路由实现：
* Angular 的 ngRouter;
* React 的 ReactRouter;
* Vue 的 vue-router;
— vue-router 是Vue.js 官方的路由插件，它和vue.js是深度集成的，适合构建单页面应用；
— 官网 https://router.vuejs.org/zh/；
— vue-router是基于路由和组件的：
* 路由用于设定访问路径，将路径和组件映射起来；
* 在vue-router的单页面应用中，页面的路径的改变就是组件的切换；
— 步骤一： 安装 vue-router : npm install vue-router --save
— 步骤二： 在模块化工程中使用它：（因为是一个插件，所以可以通过 Vue.use() 来安装路由功能）
第一步：导入路由对象，并且调用 Vue.use(VueRouter);
第二步：创建路由实例，并且传入路由映射配置；
第三步：在Vue实例中挂载创建的路由实例；
补充： 通过 Vue.use(插件)，安装需要使用的插件；


使用 VueRouter 的步骤：
第一步：创建路由组件；
第二步：配置路由映射—组件和路径映射关系；
第三步：使用路由：通过 和
补充： * 该标签是一个 vue-router 中已经内置的组件，它会被渲染成一个标签；
* 该标签会根据当前的路径，动态渲染出不同的组件；占位–渲染出来的组件所在的位置；
* 网页的其他内容，比如顶部的标题/导航，或者底部的一些版权信息等会和处于同一个等级；
* 在路由切换时，切换的是挂载的组件，其他内容不会发生改变；
路由的默认路径（重定向）：
* 默认情况下，进入网站的首页，我们希望渲染首页的内容；
* 但是我们的实现中，默认没有显示首页组件，必须让用户单击才可以；
* 如何可以让路径默认跳到首页，并且渲染首页组件呢？
* 很简单，多配置一个映射就可以了：

* 配置解析： - 我们在routes中又配置了一个映射；
- path 配置的是根路径；
- redirect 是重定向，也就是我们将根路径重定向到 /home 的路径下；

**HTML5 的 history 模式：**		
         - 我们前面说过改变路径的方式有两种：
                * URL 的 hash ;   	     
                * HTML5 的 history  ;
         - 默认情况下，路径的改变使用的是 URL 的 hash ;
         - 如果希望使用 HTML5 的 history ，进行如下配置：
         ![在这里插入图片描述](https://img-blog.csdnimg.cn/1f548fb438f64bb6b3a018ea1fc8267b.jpg?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBAbTBfNTY3NTIwMTA=,size_9,color_FFFFFF,t_70,g_se,x_16#pic_center)
         ![在这里插入图片描述](https://img-blog.csdnimg.cn/c3e7eee63f744d0fa31d098cd40034a7.jpg#pic_center)

router-link 的其他属性补充：
- 在前面的 中，我们使用了 to=“” 属性，用于指定跳转的路径；

- tag: tag 可以指定 之后渲染成什么组件，比如上面的的代码会被渲染成一个

• ，而不是;
  
  - replace: replace不会留下 history 记录，所以指定 replace 的情况下，后键返回不能返回到上一个页面中；
  
  - active-class: 当 对应的路由匹配成功时，会自动给当前元素设置一个 router-link-active 的class，设置active-class可以修改默认的名称； * 在进行高亮显示的导航菜单或者底部 tabbar时，会使用到该类；
  * 但是，通常不会修改类的属性，会直接使用默认的 router-link-active 即可；
  
  
  通过代码跳转路由： 有时候，页面的跳转可能需要执行对应的JavaScript代码，这个时候，就可以使用第二种跳转方式了；
  
  动态路由的使用：
  - 在某些情况下，一个页面的 path 路径可能不是确定的，比如，我们进入用户界面时，希望是如下的路径：
  * /user/aaa 或 /user/bbb
  * 除了有前面的 /user 之外，后面还跟上了用户的 ID;
  * 这种 path 和 Component 的匹配关系，我们称之为动态路由（也是路由传递参数的一种方式）；
  动态获取拼接在路径后面的参数：
  * 步骤一：index.js 页面
  
  步骤二：App.vue页面中
  
  步骤三：User.vue 页面
  
  
  $route 和 $router:
  
  vue-router 打包文件的解析：
  - 路由的懒加载： 官方解释： * 当打包构建应用时，javascript 包会变得非常大，影响页面加载；
  * 如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应的组件，这样就更加高效了；
  * 懒加载：用到时再加载；
  
  官方在说什么呢？ - 首先，我们知道路由中会定义很多不同的页面；
  - 这个页面最后被打包在哪里呢？一般情况下，是放在一个js文件中；
  - 但是，页面这么多放在一个js文件中，必然会造成这个页面非常的大；
  - 如果我们一次性从服务器请求下来这个页面，可能需要花费一定时间，甚至用户的电脑上还出现了短暂空白的情况；
  - 如何避免这种情况呢？使用路由懒加载就可以了；
  路由懒加载做了什么？ * 路由懒加载的主要作用就是将路由对应的组件打包成一个个的js代码块；
  * 只有在这个路由被访问到的时候，才加载对应的组件；
  
  
  

• vue-router-路由的嵌套使用：
  
  步骤：
  
  传参数的方式： – params – query（参数较多时选用 query方式）
  -params 的类型:
  * 配置路由格式：/router/:id ;
  * 传递的方式：在 path 后面跟上对应的值 ；
  * 传递后形成的路径：/router/123, /router/abc
  - query 类型：
  * 配置路由格式 ：/router，也就是普通配置；
  * 传递的方式：对象中使用 query 的 key 作为传递方式；
  * 传递后形成的路径：/router?id=123, /router?id=abc
  $route 和 $router 的区别：
  - $router 为 VueRouter 实例，想要导航到不同URL,则使用 $router.push 方法；
  - $route 为当前 router 跳转对象里面可以获取name、path、query、params等；
  vue-router-全局导航守卫：
  - 先来考虑一个需求：在一个SPA应用中，如何改变网页的标题？
  * 网页标题是通过

  
  * 上面我们使用的导航守卫，被称之为全局守卫： 路由独享的守卫 组件内的守卫
  * 具体可查看官网 https://router.vuejs.org
  vue-router-keep-alive 及其他问题：
  - keep-alive 是 Vue 内置的一个组件，可以使被包含的组件保持状态，或避免重新渲染；
  keep-alive 属性：
  * include 字符串或正则表达式，只有匹配的组件会被缓存；
  * exclude 字符串或正则表达式，任何匹配的组件都不会被缓存；
  - router-view 也是一个组件，如果直接被包在 keep-aive 里面，所有路径匹配到的视图组件都会被缓存；
  - 案例：离开和再回到一个组件时，不要让它频繁的被销毁和创建，而是让它保持一个活跃状态，
  
  说明：在首页中使用 path 属性记录离开时的路径，在 beforeRouteLeave 中记录。
  
  
  文件路径的引用问题—起别名：
  
  
  网络请求模块的选择- axios: (axios ----> ajax i/o system)
  - 传统的 Ajax 是基于XMLHttpRequest（XHR），不好用，所以在真实开发中使用 jQuery-Ajax;
  - 相当于传统的Ajax， jQuery-Ajax 非常好用，为什么不选择它呢？
  * 首先，我们先明确一点：在Vue的整个开发中都是不需要使用 jQuery 了；
  - 在前端开发中，我们一种常见的网络请求方式就是 JSONP;
  * 使用JSONP最主要的原因往往是为了解决跨域访问的问题；
  * JSONP 的原理是什么呢？
  * JSONP的核心在于通过