20201027王杉

学习内容:

一、插槽

  1. 插槽slot:是vue提出来的一个概念,插槽用于决定将所携带的内容,插入到指定的某个位置,从而使模板分块,具有模块化的特质和更大的重用性。插槽显示不显示、怎样显示,都是由父组件进行控制的,而插槽在哪里显示就由子组件来进行控制。

  2. 分类:

    1. 默认插槽:

      <!-- 父组件 -->
      <!-- 父组件中的子组件my-header -->
      <my-header>
      <!-- 父组件中插入的值 -->
      <p>123</p>
      </my-header>
      <!-- 子组件 -->
      <!-- 插槽 -->
      <p>hello world</p>
      <slot>hello world!</slot>
      <!-- 这里写内容父组件中没有写就会默认显示,如果父组件在里面写了内容则会替代这里的原内容 -->
    2. 具名插槽:

      <!-- 父组件 -->
      <!-- 具名插槽 -->
      <my-header>
      <!-- <p slot="wrap">foot</p>
      <p solt="wraps"></p> -->
      </my-header>
      <!-- 子组件 -->
      <!-- 具名插槽 -->
      <!-- <slot name="wrap">
      </slot>
      <slot name="wraps">
      <p>header</p>
      </slot> -->
    3. 作用域插槽:

      <!-- 父组件 -->
      <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"],
      }
      },
      }
    4. 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中的基础路径拼接起来作为发送到
                    //服务器端的最终请求地址
                }
            }
        }
    }
}

原理:

  1. this.axios.get("/detail");

    axios会将baseURL和"/detail"进行拼接

  2. this.axios.get("/api/detail");

    所有带有/api的前缀不的路径都交给devServer程序处理

  3. devServer:不使用ajax,也能发送http的请求的程序

    先将相对路径中的/api去掉,变为/detail,再和提前配置好的服务器地址target拼接:http:localhost:4000/detail

  4. 向真实的服务接口地址发送请求,devServer接到响应结果

  5. 返回给axios.then(res)继续处理

注意:只有访问没有启用跨域的服务器端时,才能使用http-proxy,不能和其他跨域方式并存的。

注意:只能再本地开发环境下使用,部署到服务器,就不再起作用。

注意:将来在公司中,http-proxy需要结合专门的服务器端软件配置,比如“ngix”,才能启用http-proxy。

心得:

加油!

标签

评论

this is is footer