Vue详解知识概括

Vue CLI

什么是Vue CLI:

• 如果你只是简单写几个Vue的Demo程序, 那么你不需要Vue CLI.
• 如果你在开发大型项目, 那么你需要, 并且必然需要使用Vue CLI
  ①使用Vue.js开发大型应用时，我们需要考虑代码目录结构、项目结构和部署、热加载、代码单元测试等事情。
  ②如果每个项目都要手动完成这些工作，那无疑效率比较低效，所以通常我们会使用一些脚手架工具来帮助完成这些事情。
• CLI是什么意思?
  ①CLI是Command-Line Interface, 翻译为命令行界面, 但是俗称脚手架.
  ②Vue CLI是一个官方发布 vue.js 项目脚手架
  ③使用 vue-cli 可以快速搭建Vue开发环境以及对应的webpack配置.

Vue CLI使用前提：

• 安装NodeJS
  ①默认情况下自动安装Node和NPM
  ②NPM的全称是Node Package Manager
  ③是一个NodeJS包管理和分发工具，已经成为了非官方的发布Node模块（包）的标准。
• Vue.js官方脚手架工具就使用了webpack模板
  ①对所有的资源会压缩等优化操作
  ②它在开发过程中提供了一套完整的功能，能够使得我们开发过程中变得高效。

Vue CLI的使用：

• 安装Vue脚手架：npm install -g @vue/cli
  ①查看vue版本：vue --version
  ②注意：上面安装的是Vue CLI3的版本，如果需要想按照Vue CLI2的方式初始化项目时不可以的。
  ③拉取2.X模板(旧版本)：npm install -g @vue/cli-init
• Vue CLI2初始化项目：vue init webpack my-project
• Vue CLI3初始化项目：vue create my-project

Vue CLI2详解：

• 初始化命令使用：
  
• 目录简介：
  ①build.js：构建入口
  ②index.js：变量，配置信息
  ③webpack.base.conf.js：公共webpack配置信息
  ④webpack.dev.conf.js：部署配置信息
  ⑤webpack.prod.conf.js：构建配置信息
  

(运行时+编译器)Runtime-Compiler和(只含有运行时版本)Runtime-only的区别：

• 如果你需要在客户端编译模板(例如， 向template 选项传入一个字符串,或者需要将模 板中的非DOM的HTML挂载到一个元素)，你需要带有编译器的版本，因而需要完整构建版本。
• 在使用vue-loader或vueify 时，* . vue文件中的模板会在构建时(build time)预编译(pre-compile)为JavaScript.最终生成的bundle中你不再需要编译器(compiler)，因此可以直接使用只含有运行时的构建版本(runtime- only)。

//这种情况需要编译器(compiler)
new Vue({
	template: '<div>({ hi }}div>'
)

//这种情况不需要
new Vue({
	render (h) {
		return h('div', this.h1)
	}
})

• 由于只含有运行时构建版本(runtime-only)比完整构建版本(ull-build)轻量大约30%，你应该尽可能使用只含有运行时的构建版本。如果你还是希望使用完整构建版本，则需要在打包器中配置别名。
• 简单总结：
  ①如果在之后的开发中，你依然使用template，就需要选择Runtime-Compiler。
  ②如果你之后的开发中，使用的是.vue文件夹开发，那么可以选择Runtime-only。

render和template区别：

//Runtime-Compiler
new Vue({
	el :'#app',
	components: { App },
	template: '<App/>'
})

//Runtime-only
new Vue({
	el : '#app',
	render: h => h(App)
})

• 为什么存在这样的差异呢？
  ①我们需要先理解Vue应用程序是如何运行起来的。
  ②Vue中的模板如何最终渲染成真实DOM。
  ③我们来看下面的一幅图。
  

npm run build与npm run dev详解：

• npm run build：
  
• npm run dev：
  

webpack.base.conf.js起别名：

resolve: {
	extensions: ['.js', '.vue', '.json'],
	alias: {
		'@':resolve('src'),
		'pages': resolve('src/pages'),
		'common': resolve('src/common'),
		'components':resolve('src/components'),
		'network': resolve('src/network')
	}
},

Vue CLI3详解：

• vue-cli 3 与 2 版本有很大区别：
  ①vue-cli 3 是基于 webpack 4 打造，vue-cli 2 还是 webapck 3
  ②vue-cli 3 的设计原则是“0配置”，移除的配置文件根目录下的，build和config等目录
  ③vue-cli 3 提供了 vue ui 命令，提供了可视化配置，更加人性化
  ④移除了static文件夹，新增了public文件夹，并且index.html移动到public中
• 初始化使用：
  
• 目录结构详解：
  
• 配置去哪里了：
  ①UI方面的配置：启动配置服务器：vue ui
  
  ②一大堆配置文件去哪里了？
  

Vue-router

什么是路由？

• 路由（routing）就是通过互联的网络把信息从源地址传输到目的地址的活动
• 路由器提供了两种机制: 路由和转送.
  ①路由是决定数据包从来源到目的地的路径.
  ②转送将输入端的数据转移到合适的输出端.
• 路由中有一个非常重要的概念叫路由表。路由表本质上就是一个映射表, 决定了数据包的指向。

后端路由阶段:

• 早期的网站开发整个HTML页面是由服务器来渲染的:
  ①服务器直接生产渲染好对应的HTML页面, 返回给客户端进行展示.
• 但是一个网站, 这么多页面服务器如何处理呢?
  ①一个页面有自己对应的网址, 也就是URL.
  ②URL会发送到服务器, 服务器会通过正则对该URL进行匹配, 并且最后交给一个Controller进行处理.
  ③Controller进行各种处理, 最终生成HTML或者数据, 返回给前端.
  ④这就完成了一个IO操作.
• 上面的这种操作, 就是后端路由。
  ①当我们页面中需要请求不同的路径内容时, 交给服务器来进行处理, 服务器渲染好整个页面, 并且将页面返回给客户顿.
  ②这种情况下渲染好的页面, 不需要单独加载任何的js和css, 可以直接交给浏览器展示, 这样也有利于SEO的优化.
• 后端路由的缺点:
  ①一种情况是整个页面的模块由后端人员来编写和维护的.
  ②另一种情况是前端开发人员如果要开发页面, 需要通过PHP和Java等语言来编写页面代码.
  ③而且通常情况下HTML代码和数据以及对应的逻辑会混在一起, 编写和维护都是非常糟糕的事情.

前端路由阶段：

• 前后端分离阶段：
  ①随着Ajax的出现, 有了前后端分离的开发模式.
  ②后端只提供API来返回数据, 前端通过Ajax获取数据, 并且可以通过JavaScript将数据渲染到页面中.
  ③这样做最大的优点就是前后端责任的清晰, 后端专注于数据上, 前端专注于交互和可视化上.
  ④并且当移动端(iOS/Android)出现后, 后端不需要进行任何处理, 依然使用之前的一套API即可.
  ⑤目前很多的网站依然采用这种模式开发.
• 单页面富应用阶段:
  ①其实SPA最主要的特点就是在前后端分离的基础上加了一层前端路由.
  ②也就是前端来维护一套路由规则.
• 前端路由的核心是什么呢？
  ①改变URL，但是页面不进行整体的刷新。

URL的hash：

• URL的hash也就是锚点(#), 本质上是改变window.location的href属性.
• 我们可以通过直接赋值location.hash来改变href, 但是页面不发生刷新

执行：location.hash = '/foo'
返回："/foo"

执行：location. href
返回："http: //192.168.1.101: 8000/examples/urlChange/#/foo"

HTML5的history模式：

• history接口是HTML5新增的, 它有五种模式改变URL而不刷新页面。
• history接口底层的数据结构是栈。
• 函数：
  ①history.pushState()：插入锚点，改变url，支持前进后退。
  ②history.replaceState()：插入锚点，改变url，不支持前进后退。
  ③history.go()
• 补充说明：
  ①上面只演示了三个方法
  ②因为 history.back() 等价于 history.go(-1)
  ③history.forward() 则等价于 history.go(1)
  ④这三个接口等同于浏览器界面的前进后退
• 与URL的hash相比，没有了#符号。

vue-router认识：

• 目前前端流行的三大框架, 都有自己的路由实现:
  ①Angular的ngRouter
  ②React的ReactRouter
  ③Vue的vue-router
• 当然, 我们的重点是vue-router，vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，适合用于构建单页面应用。
• vue-router是基于路由和组件的：
  ①路由用于设定访问路径, 将路径和组件映射起来.
  ②在vue-router的单页面应用中, 页面的路径的改变就是组件的切换.

安装和使用vue-router：

• 安装vue-router：npm install vue-router --save
• 在模块化工程中使用它(因为是一个插件, 所以可以通过Vue.use()来安装路由功能)
  ①导入路由对象，并且调用 Vue.use(VueRouter)
  ②创建路由实例，并且传入路由映射配置
  ③在Vue实例中挂载创建的路由实例
• 使用vue-router的步骤:
  ①创建路由组件
  ②配置路由映射: 组件和路径映射关系
  ③使用路由: 通过和
• 路由标签详解：
  ①: 该标签是一个vue-router中已经内置的组件, 它会被渲染成一个标签.
  ②: 该标签会根据当前的路径, 动态渲染出不同的组件。
  ③网页的其他内容, 比如顶部的标题/导航,或者底部的一些版权信息等会和处于同一个等级。
  ④在路由切换时, 切换的是挂载的组件,其他内容不会发生改变。

----创建router文件夹,然后创建index.js文件,创建router实例,配置组件和路径的映射关系：----
import Vue from 'vue'
import VueRouter from 'vue-router'
// 1.注入插件
Vue.use(VueRouter)
// 2.定义路由
const routes = [
	{
		path: '/home',
		component: Home
	}
	{	
		path: '/about', 
		component: About
	}
]

// 3.创建router实例
const router = new VueRouter({
	routes
})
// 4.导出router实例
export default router


----main.js文件中挂载到Vue实例中：----
import Vue  from 'vue'
import App from './App'
import router from './router'
new Vue({
	el: '#app',
	router,
	render: h => h(App)
})


----创建About和Home路由组件----

----使用路由：----
<template>
	<div id="app">
		<h1>我是网站的标题< /h1>
		<router-link to="/home">首页router-link>
		<router-link to="/about">关于router-link>
		<router-view>router-view>
		<h2>我是APP中一些底部版权信息h2>
	div>
template>

----最终效果如下：----
一、当路径是根路径时,router-view没有渲染试图
二、点击首页，路径切换，router-view渲染home组件
伞、点击关于，路径切换，router-view渲染about组件

vue-router细节处理：

• 路由的默认路径：
  ①默认情况下, 进入网站的首页, 我们希望渲染首页的内容，但是我们的实现中, 默认没有显示首页组件, 必须让用户点击才可以。
  ②如何可以让路径默认跳到到首页, 并且渲染首页组件呢，非常简单, 我们只需要配置多配置一个映射就可以了。
  ③我们在routes中又配置了一个映射，path配置的是根路径: /，redirect是重定向, 也就是我们将根路径重定向到/home的路径下, 这样就可以得到我们想要的结果了。

const routes =[
	{
		path: '/'
		redirect: '/home'
	}
]

• HTML5的History模式：
  ①我们前面说过改变路径的方式有两种:URL的hash，HTML5的history。默认情况下, 路径的改变使用的URL的hash，如果希望使用HTML5的history模式, 非常简单, 进行如下配置即可:

const router =	new VueRouter({
	routes,
	mode: 'history'
})

• router-link补充：
  ①在前面的中, 我们只是使用了一个属性: to, 用于指定跳转的路径。
  ②还有一些其他属性:
  <1>tag: tag可以指定之后渲染成什么组件, 比如上面的代码会被渲染成一个
• 元素, 而不是。
  <2>replace: replace不会留下history记录, 所以指定replace的情况下, 后退键返回不能返回到上一个页面中。
  <3>active-class: 当对应的路由匹配成功时, 会自动给当前元素设置一个router-link-active的class, 设置active-class可以修改默认的名称。在进行高亮显示的导航菜单或者底部tabbar时, 会使用到该类。但是通常不会修改类的属性, 会直接使用默认的router-link-active即可。
• 修改linkActiveClass：
  ①该class具体的名称也可以通过router实例的属性进行修改。

const router = new VueRouter({
	routes,
	mode: 'history',
	linkActiveClass:'active'
})

• 路由代码跳转：
  ①有时候, 页面的跳转可能需要执行对应的JavaScript代码, 这个时候, 就可以使用第二种跳转方式了。

<template>
	<div id="app">
		<h1>我是网站的标题< /h1>
		<button @click="li nkToHomel">首页button>
		<button @click="l inkToAbout">关于button>
		<router-view>router-view>
		<h2>我是APP中一些底部版权信息h2>
	div>
<template>
<script>
	export default{
		name:'App',
		methods: {
			linkToHome() {
				this.$router.push('/home')
			}
			linkToAbout() {
				this.$router.push('/about')
			}
		}
script>

• 动态路由：
  ①在某些情况下，一个页面的path路径可能是不确定的，比如我们进入用户界面时，希望是如下的路径：/user/aaaa或/user/bbbb。除了有前面的/user之外，后面还跟上了用户的ID。这种path和Component的匹配关系，我们称之为动态路由(也是路由传递数据的一种方式)。

-----路由配置页面---
{
	path: '/user/:id',
	component: User
}

----使用页面----
<div> 
	<h2>{{$route.params.id}}h2> 
div>

----组件页面----
<router-link to="/user/123">用户router-link>

路由懒加载：

• 官方给出了解释:当打包构建应用时，Javascript 包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了
• 官方在说什么呢?首先, 我们知道路由中通常会定义很多不同的页面.这个页面最后被打包在哪里呢? 一般情况下, 是放在一个js文件中.但是, 页面这么多放在一个js文件中, 必然会造成这个页面非常的大.如果我们一次性从服务器请求下来这个页面, 可能需要花费一定的时间, 甚至用户的电脑上还出现了短暂空白的情况.
• 如何避免这种情况呢? 使用路由懒加载就可以了.路由懒加载做了什么?路由懒加载的主要作用就是将路由对应的组件打包成一个个的js代码块.只有在这个路由被访问到的时候, 才加载对应的组件。
• 懒加载的方式：

方式一: 结合Vue的异步组件和Webpack的代码分析.
const Home = resolve => { require.ensure(['../components/Home.vue'], () => { resolve(require('../components/Home.vue')) })};

方式二: AMD写法
const About = resolve => require(['../components/About.vue'], resolve);

方式三: 在ES6中, 我们可以有更加简单的写法来组织Vue异步组件和Webpack的代码分割.
const Home = () => import('../components/Home.vue')

//使用懒加载
const routes =[
	{
		path: '/home', component: () => import(' ../components/Home')
	},
		path: '/about', component: () => import('../components/About')
	},
];

路由嵌套：

• 嵌套路由是一个很常见的功能。比如在home页面中, 我们希望通过/home/news和/home/message访问一些内容。一个路径映射一个组件, 访问这两个路径也会分别渲染两个组件。路径和组件的关系如下:

/home --------> Home
/home/news --------> News
/home/message --------> Message
/about --------> About

• 实现嵌套路由有两个步骤:
  ①创建对应的子组件, 并且在路由映射中配置对应的子路由。
  ②在组件内部使用标签。

-----一、定义两个组件-----

-----二、配置嵌套路由映射-----
import Vue from 'vue'
import VueRouter from 'vue-router'
const Home = () => import('../components /Home')
const Message = () => import('../components/message')
const News = () => import('../components/news')
const About = ( ) => import('../components/About')
// 1.注入插件
Vue.use (VueRouter)
// 2.定义路由
const routes = [
	{
		path: '/home',
		component: Home,
		children: [
			{
				path: 'message'
				component: Message
			},
			{
				path: 'news',
				component: News
			}
		]
	}
]

-----三、在父组件模板中使用-----
<template>
	<div id="home">
		<h2>我是首页标题h2>
		<router-link to="/home/message">消息router-link>
		<router-link to="/home/news">新闻
		<router-view>router-view>
	div>
template>

• 嵌套路由也可以配置默认的路径, 配置方式如下:

{
	path: '',
	redirect:'message'
}

路由传递参数：

• 传递参数主要有两种类型: params和query
• params的类型:
  ①配置路由格式: /router/:id
  ②传递的方式: 在path后面跟上对应的值
  ③传递后形成的路径: /router/123, /router/abc
• query的类型:
  ①配置路由格式: /router, 也就是普通配置
  ②传递的方式: 对象中使用query的key作为传递方式
  ③传递后形成的路径: /router?id=123, /router?id=abc
• 如何使用它们呢? 也有两种方式: 的方式和JavaScript代码方式

----传递参数方式一: <router-link>：----
<router-link 
	:to="{
		path: '/profile/' + 123,
		query: { name:'why',age: 18}
	}"
>档案router-link>

----传递参数方式二: JavaScript代码：----
export default {
	name:'App',
	methods: {
		toProfile() {
			this.$router.push({
				path: '/profile/' + 123,
				query: {name: 'why',age: 18}
			})
		}
	}
}

• 获取参数:
  ①获取参数通过$route对象获取的，在使用了vue-router 的应用中，路由对象会被注入每个组件中，赋值为 this.$route，并且当路由切换时，路由对象会被更新。
  ②通过$route获取传递的信息如下:

<p>params: {{ $route.params}}p>
<p>query: {{$route.query}}p>

• $route和$router是有区别的：
  ①$router为VueRouter实例，想要导航到不同URL，则使用$router.push方法
  ②$route为当前router跳转对象里面可以获取name、path、query、params等

路由导航守卫：

• 我们来考虑一个需求: 在一个SPA应用中, 如何改变网页的标题呢?
  ①网页标题是通过