日常积累

1.promise的先后执行顺序

var promise = new Promise(function (resolve){
    console.log("inner promise"); // 1
    resolve(42);
});
promise.then(function(value){
    console.log(value); // 3
});
console.log("outer promise"); // 2

输出：
"inner promise"
"outer promise"
42
1,iframe基本使用
https://www.w3school.com.cn/tags/tag_iframe.asp

 需求实现 - 页面切换

> 结合我们刚刚学习的iframe和a标签的关联来实现页面切换效果

1. 左侧a标签 设置`href`,及`target`属性
2. 右侧嵌套`iframe`设置`name`属性
   1. 右侧的容器中
   2. 添加样式
3. a标签的target和`iframe`的name要一致即可
1,前台页面和后台页面
1,前后台联动,
1,局部刷新

1,兼容ie的处理

vue-cli 3.0 配置兼容 ie
npm install babel-polyfill 
npm install es6-promise
main.js中引入

import Es6Promise from 'es6-promise' 
require('es6-promise').polyfill() 
Es6Promise.polyfill()
vue.config.js中加入代码

module.exports = {
  chainWebpack: config => {
    config
        .entry('index')
        .add('babel-polyfill')
  }
 }
2,方案二
package.json中设置的兼容浏览器配置

"browserslist": [
    "> 1%",
    "last 2 versions"
  ]
3,将不支持删除
或者
1、安装依赖

cnpm i @babel/polyfill -S
1
2、入口文件 main.js 引入依赖

import '@babel/polyfill';
1
3、修改 babel.config.js

module.exports = {
  presets: [
    [
      '@vue/app',
      {
        useBuiltIns: 'entry'
      }
    ]
  ],
};

4、修改 vue.config.js

默认情况下 babel-loader 会忽略所有 node_modules 中的文件。如果你想要通过 Babel 显式转译一个依赖，可以在这个选项中列出来。

依赖较多，索性将所有的依赖都加上，不过会增加打包后的体积,比如我的项目从7.5M增加到了19.6M

module.exports = {
  transpileDependencies: process.env.NODE_ENV === "development" ? ["*"] : [],
}
4,方案
1、安装依赖

cnpm i @babel/polyfill -S
1
2、入口文件 main.js 引入依赖

import '@babel/polyfill';
1
3、修改 babel.config.js

module.exports = {
  presets: [
    [
      '@vue/app',
      {
        useBuiltIns: 'entry'
      }
    ]
  ],
};

4、修改 vue.config.js

默认情况下 babel-loader 会忽略所有 node_modules 中的文件。如果你想要通过 Babel 显式转译一个依赖，可以在这个选项中列出来。

依赖较多，索性将所有的依赖都加上，不过会增加打包后的体积,比如我的项目从7.5M增加到了19.6M

module.exports = {
  transpileDependencies: process.env.NODE_ENV === "development" ? ["*"] : [],
}