Vue2 组件局部引用静态js、css文件

引言：我遇见的问题是vue2，需要在组件中引入外部的静态js、css，可指定加载顺序，其实网上有很多文章，很多方法解决引入静态文件方法，但是都没有解决我的问题，我也是东拼西凑，站在众人的肩膀上，解决了我的问题，特此记录下来，希望能帮助到大家！！！
一、首先我们将加载js、css的公共方法写入一个叫importJs的js文件中

/**
 * 动态加载js
 * @param url
 * @param callback
 * @returns {Promise<any>}
 */
export function loadingJs(url, callback) {
  return new Promise((resolve, reject) => {
    let fn = callback || function () {};
    let script = document.createElement('script');
    script.src = url;
    script.type = 'text/javascript';
    document.head.appendChild(script);
    if (script.addEventListener) {
      script.addEventListener('load', function () {
        console.log("加载完成",url);
        fn();
        resolve();
      }, false);
    } else if (script.attachEvent) {
      script.attachEvent('onreadystatechange', function () {
        let target = window.event.srcElement;
        if (target.readyState == 'loaded') {
          console.log("加载完成",url);
          fn();
          resolve();
        }
      });
    }
  })
}

/**
 * 动态加载css
 * @param href
 * @param callback
 * @returns {Promise<any>}
 */
export function loadingCss(href, callback) {
  return new Promise((resolve, reject) => {
    let fn = callback || function () {};
    let link = document.createElement('link');
    link.href = href;
    link.rel = 'stylesheet';
    document.head.appendChild(link);
    superviseCssLinkLoad(link, () => {  fn();resolve();console.log("加载完成",href); })
  })
}

/**
 * 通过轮询link标签的sheet. cssRules来判断是否加载好css资源
 * @param link
 * @param onload
 */
function superviseCssLinkLoad(link, onload) {
  requestIdleCallback(() => {
    if (link.sheet) {
      if (link.sheet.cssRules?.length) {
        typeof onload === 'function' && onload()
      } else {
        superviseCssLinkLoad(link, onload)
      }
    } else {
      superviseCssLinkLoad(link, onload)
    }
  })
}

二、接着我们将importJs文件引入到我们Vue组件中

import {loadingJs,loadingCss} from '../../utils/importJs.js';

三、加载静态js、css文件
注意：由于vue的版本不同，配置的根目录不同，引入路径也有所不同
我的是vue2，静态文件放在public下：/static/demo/assets/xx.js,/static/demo/css/xxx.css；就拿这两个文件举例：
我是写在mounted这个钩子函数下的

mounted() {
      loadingCss('/static/demo/css/xxx.css');
      function callback(){
          loadingJs('/static/assets/xx1.js');
          loadingJs('/static/assets/xx2.js');
      }
      loadingJs('/static/demo/assets/xx.js',callback).then(()=>{
        //你的初始化代码
      });
    },

难点在于加载js的先后顺序，一定要搞清楚先加载哪个再加载哪个，否则会出问题！！！