20201027王杉
学习内容：
一、插槽
-
插槽slot:是vue提出来的一个概念，插槽用于决定将所携带的内容，插入到指定的某个位置，从而使模板分块，具有模块化的特质和更大的重用性。插槽显示不显示、怎样显示，都是由父组件进行控制的，而插槽在哪里显示就由子组件来进行控制。
-
分类：
-
默认插槽：
<!-- 父组件 --> <!-- 父组件中的子组件my-header -->
<my-header>
<!-- 父组件中插入的值 -->
<p>123</p>
</my-header>
<!-- 子组件 -->
<!-- 插槽 -->
<p>hello world</p>
<slot>hello world!</slot>
<!-- 这里写内容父组件中没有写就会默认显示，如果父组件在里面写了内容则会替代这里的原内容 --> -
具名插槽：
<!-- 父组件 --> <!-- 具名插槽 -->
<my-header>
<!-- <p slot="wrap">foot</p>
<p solt="wraps"></p> -->
</my-header>
<!-- 子组件 -->
<!-- 具名插槽 -->
<!-- <slot name="wrap">
</slot>
<slot name="wraps">
<p>header</p>
</slot> --> -
作用域插槽：
<!-- 父组件 --> <my-header>
<!-- slot-scope -->
<template slot-scope="list">
{{list}}
</template>
</my-header>
<!-- 子组件 -->
<!-- 作用域插槽 -->
<slot :list="listname"></slot>
<script>
export default {
//正常写vue语法
data(){
return{
//页面需要的数据
listname:["haha","heihei"],
}
},
} -
v-slot:
<!-- 父组件 --> <my-header>
<!-- v-slot -->
<template v-slot:header>
我是头部
</template>
<template v-slot:footer>
我是尾部
</template>
</my-header>
<!-- 子组件 -->
<!-- 作用域插槽 -->
<!-- v-slot -->
<header>
<slot name="header"></slot>
</header>
<section>
<p>我是内容</p>
</section>
<footer>
<slot name="footer">我是尾部</slot>
</footer>
-
二、懒加载：
问题：单页面应用的致命问题：首屏加载极慢。因为单页面应用默认必须在首次请求的受，把所有的页面组件都下载到客户端本地
1.异步延迟加载(脚手架默认)
a. 暂时不要把除了首页之外的其他组件 import 引进程序中
b. 在路由字典中定义，只有当用户访问到某个组件的时候，才会动态的引入这个组件
c. router/index.js
Vue.use(VueRouter);
//添加路由(数据词典)
const routes = [
{
path: "/",
name: "Home",
component: Home
},
{
path: "/detail/:lid",
name:"Detail",
//实现懒加载,在使用时引入 虽然detail不会首屏加载但是会在后台异步下载，偷偷跑流量
component:()=>import( /*webpackChunkName:"detail"*/ "@/views/Detail.vue"),
// component: Detail,
props:true
},{
path:"*",
component:NoFound
}
];
如果不加webpack...这个东西，import打包出来的文件 ，默认是按照 0 1 2 ..排列，0.js
问题：虽然detail不会在首屏加载了，但是却会在后台异步的下detail.js，偷跑流量.
2.彻底的解决懒加载的问题：
vue.config.js(比较恶心，很多时候你写了都不知道写了什么)
a. 如果用户不访问其他组件的时候，则根本一点都不下载其他组件的内容
b. 在vue脚手架中添加一个配置信息
1.在vue脚手架项目的根目录下创建vue.config.js
2.在vue.config.js 中添加配置信息，禁止提前下载其他组件
// 一般情况下自己也不会主动动手，找资料
// outDir:输出目录
//实现懒加载，不访问其他组件不下载
module.exports ={
chainWebpack:config =>{
config.plugins.delete("prefetch")
//删除index.html页面中带有prefetch属性的插件，不要异步下载暂时不需要的页面组件
}
}
c. 除了首页之外的其他页面组件内容，一点都不提前下载，只有当用户点击连接的时候，访问到一个页面的时候，才临时下载这个页面组件的内容问题：因为当用户访问页面的时候，临时去下载页面的内容，加载速度稍慢。注意：如果你的vue.config.js不生效，需要手动重启脚手架。
三、跨域问题：
1.cors:
修改服务端，但是必须指定客户端的IP地址
安装: npm install cors --save
导入：app.js中
const cors=require("cors");
app.use(cors({
origin:[
// 允许跨域的客户端源头
"http:localhost:8080/","http:localhost:8081/","xxxx"
],
credentials:true // 要求允许携带cookie
}))
jsonp:
不需要知道客户端具体ip地址，但是需要客户端和服务器端一起调整。
前端实现跨域：
利用vue脚手架中自带的 http-proxy 代理程序进行跨域，在vue脚手架中配置文件(vue.config.js)，添加一个新的配置项
module.exports ={
devServer: {
proxy: {
//为所有服务器接口起一个别名前缀，为了和vue脚手架中的其它页面的路由地址区分
"/api":{
target:"http://localhost:4000/",
changeOrigin:true,//跨域
pathRewrite:{
"^/api":""
//因为真实的服务器端地址中不含/api,所以应该将程序中的/api删除
//使用""空字符串替换，再和target中的基础路径拼接起来作为发送到
//服务器端的最终请求地址
}
}
}
}
}
原理：
-
this.axios.get("/detail");
axios会将baseURL和"/detail"进行拼接
-
this.axios.get("/api/detail");
所有带有/api的前缀不的路径都交给devServer程序处理
-
devServer：不使用ajax，也能发送http的请求的程序
先将相对路径中的/api去掉，变为/detail，再和提前配置好的服务器地址target拼接：http:localhost:4000/detail
-
向真实的服务接口地址发送请求，devServer接到响应结果
-
返回给axios.then(res)继续处理
注意：只有访问没有启用跨域的服务器端时，才能使用http-proxy，不能和其他跨域方式并存的。
注意：只能再本地开发环境下使用，部署到服务器，就不再起作用。
注意：将来在公司中，http-proxy需要结合专门的服务器端软件配置，比如“ngix”，才能启用http-proxy。
心得：
加油！
评论留言