vue-cli脚手架

vue-cli 脚手架

在实际开发的大型项目中，需要Vue Cli脚手架，使用Vue.js开发大型应用时候需要考虑代码目录结构，项目结构部署，热加载，代码单元测试等，为了提高效率，需要脚手架来帮助完成这些事情

CLI

Cli是command-Line Interface,翻译为命令行界面，俗称脚手架，Vue CLI 是一个官方发布的vue.js项目脚手架，使用vue-cli 可以快速搭建Vue开发环境以及对应的webpack配置
Vue CLI 使用的前提-Node因此使用Vue CLI 是需要安装Node

安装Vue的脚手架
全局安装，一般情况下使用全部安装

//安装的是脚手架的4.4.4版本
npm install -g @vue/cli
=>  @vue/cli@4.4.4
//脚手架2初始化项目的语法
vue init webpack <项目名称>
//脚手架3初化话项目
vue create <项目名称>

vue-cli3是基于webpack 4 打造的，它的设计原则是0配置，移除的配置文件根目录下的.build和config等目录，提供了vue ui命令，提供了可视化配置；移除了static文件夹，新增public文件，并且将index.html移动到public中

ES6箭头函数和this的指向

箭头函数：也是一种定义函数的方式

const myFun = (参数列表) =>{
	//当有一个参数的时候，小括号可以省略掉
}
//函数代码块只有一行代码,会自动return
const myFun = (参数列表)=> 一行代码块
//example
const myFun = (sum1,sum2) =>sum1+sum2

箭头函数的this
箭头函数中的this引用的是最近作用域中的this,向外层作用域中一层层查找，直到有this的定义

vue-router

Vue前后端分离，前端路由，前后端分离的一个增强功能， SPA（单页面应用）整个网页只有一个html (index.html) ，即使index.html +css +js只有一个 ，SPA最主要的特点就是在前后端分离的基础上加了一层前端路由，由前端来维护一套路由规则，改变url，不会向服务器重新请求资源。
两种方法使浏览器不刷新页面

Url的hash （默认方式）

Url的hash也就是锚点(#)，本质上是改变window.location的herf属性，可以直接铜鼓赋值location.hash来改变herf，但是页面不发生刷新location.hash=‘aaa’,发现浏览器的url确实请求，但是不会发出请求。

HTML5的history ，历史记录

//入栈，入栈后，页面可以回退
history.pushState({},'home')
//出栈，访问后一次记录
history.back()，等同于history.go(-1)
//访问前一次记录
history.forward() 等价于 history.go(1)
//替换
history.replaceState({},'',"home")

安装和使用vue-router

npm install vue-router --save

配置路由，注意这个routes的名称，一定不能写成其他名称

<!-- <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/> -->
    <!-- router-link 的属性补充
       replace 使用replace模式，默认是使用history.pushStates()模式
       active-class, 指定标签被点击后的类名
       tag='button' 渲染到页面上的组件名称,默认是a标签
     -->
    <router-link tag="button" to="/home"  >首页</router-link>
    <router-link to='/about' tag="button" >关于</router-link>
    <router-view></router-view>

动态路由

路由的懒加载lazy-load

当打包构建应用时npm run build，javascript会变得很大，影响页面的加载，如果把不同路由对应的组件分割成不同的代码块，当路由被访问的时候才加载对应的组件，这样就会更加高效，将不同的路由对应的组件分割成不同的代码块，然后当路由器被访问的时候才加载对应的组件，这样就会更加的高效
打包的js文件解析：

• app：当前应用开发的所有业务代码
• mainfest: 为打包的代码做底层支撑
• vendor:供应商，第三方开发包

如果使用懒加载，就会将app中的内容按照模块划分

const routes=[{
	path:'/home',
	component:()=>import('../components/Home')
},{
	path:'/about',
	component:()=>import('../components/About')
}]

懒加载的书写方式

• 方式一：结合Vue异步组件和Webpack的代码分析

const Home = resolve = >{require.ensure(['../componesnts/Home.vue'],()=>{
	resolve(require('../components/Home.vue'))
})}

• 方式二：AMD写法

const About = resolve=>require(['../components/About.vue'],resolve);

• 方式三，ES6代码写法，省略参数

const Home = ()=>import('../components/Home.vue')

vue-router路由的嵌套使用

路由的嵌套使用就是在组件中使用路由vue-router

vue-router的参数传递

从一个页面跳转到另一个页面，需要传递数据，传递参数主要有两种方式：params和query
params的类型

• 配置路由格式:/router/:id
• 传递的方式：在path后面跟上对应的值
• 传递后形成的路径：/router/123

query类型的

• 路由的格式：/router
• 传递的方式：对象中使用query的key作为传递的方式
• 传递后形成的路径：/router?id=123

** $router和$route的区别 **

• $route是指当前活跃的路由，用于取出参数的
• $router是指 new Router()创建的对象，可以用该对象的进行路由跳转，并存放query数据

生命周期函数

keep alive

router-view也是一个组件，如果直接被包在keep-alive里面，所有路径匹配到的视图组件都会被缓存，keep-alive是vue内置的一个组件，可以使被包含的组件保留状态，或者避免重新渲染

Promise

Promise是一个对象，用以解决非常优雅的方式来解决异步操作 ，解决回调地狱.

//Promise的参数是一个函数,函数本身也有两个参数，resolve,reject
//一般情况下，使用Promise对异步操作进行封装的
//resolve和reject本身又是函数
new Promise((resolve,reject)=>{
	//放置网络请求的代码
	//网络请求成功，调用resolve()函数
	resolve();
	//本意是解决，一旦调入resolve()函数，接下来就会调用then()函数，并将resolve(data)的参数传入的then()函数的参数中
	//网络调用失败的时候调用的函数,传入的参数是调用失败的信息，
	//reject调用完成后会直接调用catch()方法，并不会调用then()方法
	reject(error); 
}).then(()=>{
	//放置请求后业务逻辑处理的代码
}).catch((error)=>{
	//放置调用失败后的业务逻辑处理的代码
})

另一个Peomise的处理形式

new Promise((resolve,rejsct)=>{

//then()中传入两个函数，第一个函数是网络请求成功后调用的函数
//第二个参数是网络请求失败后调用的函数
}).then(()=>{
	//网络请求成功后调用的函数
},()=>{
	//网络请求失败后调用的函数
})

Promise的三种状态

• pending：等待状态，正在请求网络
• fulfill：解决状态，主动回调resolve()时候，并且会回调then()函数
• reject：拒绝状态，主动调用reject时，并会回调catch()函数

Promise的链式调用

new Promise((resolve,reject)=>{
	//网络请求调用
}).then(res=>{
	//第一次处理的业务代码
	return res;
}).then(res=>{
	//第二种处理的业务代码方式
	return Promise.resolve(res);
}).then(res=>{
	//第二次处理的业务逻辑代码
	return Promise.reject("error");
}).then(res=>{
	//第二次处理错误的业务逻辑代码
	 throw  "error message"
}).then(res=>{
	//第三次处理的业务逻辑代码
}).catch((err)=>{
	//初一异常的逻辑代码
})

Ppromise.all()的使用
该方法接收一个迭代器类型的参数,可以实现多个网络请求的调用，异步发送多个请求

Promise.all([
	new Promise((resolve,reject)=>{
		$.ajax({
			url:"url_1",
			success:(data)=>{
				resolve(data)
			}
		})
	}),
	new Promise((resolve,reject)=>{
		$.ajax({
			url:"url_2",
			success:data = >{
				resolve(data)
			}
		})
	})
	//此时的results是一个数组，数组中包含着第一个请求的结果喝第二个请求得结果 
]).then(results=>{
	result[0]//保存第一次请求的结果
	result[1]//保存第二次请求的结果 
	result[2]//保存第三次请求的结果
})