关于vue项目中的坑

1、关于路由的懒加载问题：

//例子1：
const Foo = () => import('./Foo.vue')
//例子2：
const home = (resolve) => import('../components/home.vue').then(module =>resolve(module))

//例子3(直接写在路由里面)：
routes:[
  {
    path: '/', // component: resolve =>  require(['../components/home.vue'],resolve)
    redirect: '/music'
  },

1.1、关于dom的懒加载问题：（mint-ui里面有或者直接 npm i lazyload）

mint-ui中的lazyload :一定要注意是 `use`
第一步：
import { Lazyload } from 'mint-ui';
Vue.use(Lazyload);
第二步：
<ul>
  <li v-for="item in list">
    <img v-lazy="item">
  </li>
</ul>
第三步：
  image[lazy=loading] {
    width: 40px;
    height: 300px;
    margin: auto;
  }
注意：若列表不在 window 上滚动，则需要将被滚动元素的 id 属性以修饰符的形式传递给 v-lazy 指令
例如：
  <div id="container">
    <ul>
      <li v-for="item in list">
        <img v-lazy.container="item">
      </li>
    </ul>
  </div>

2、关于Axios跨域配置：（跨域还能用jsonp，差不多）

第一步(main.js)：
  Vue.prototype.HOST = '/baidu_music_api'
第二步(改config中index.js)：
/* config下index.js中  */
  proxyTable: {
    "/baidu_music_api": {
          target: "http://tingapi.ting.baidu.com",
          changeOrigin: true,
          pathRewrite: {
              '^/baidu_music_api': ''
          }
      }
  },
第三步(使用)：
  let url = this.HOST + '/...';
  axios.get(url).then().catch()...

3、关于JSONP跨域：

/*  简单方便*/
import VueJsonp from 'vue-jsonp'
Vue.use(VueJsonp)
this.jsonp('url'),then().catch()...

4、关于反向代理proxyTable：

跨域是浏览器禁止的，服务端并不禁止跨域；
所以浏览器可以发给自己的服务端然后，由自己的服务端再转发给要
跨域的服务端，做一层代理vue-cli的proxyTable用的是http-proxy- middleware中间件create-react-app用的是webpack-dev-server内部也是用的http-proxy-middleware ；

一大波待更新…