背景

在Vue中，通常我们引入一个js插件都是使用npm 方式下载然后import使用的。但是我现在本地有了js文件或者是一个远程js文件链接，我不想使用npm install xxx 的方式，有什么办法吗？

方式一

简单粗暴，直接在Vue项目的index.html 中使用全局的方式引入，比如：

<!DOCTYPE html>
<html>
<head>
    <!-- ... 省略-->
    <title>帮BOSS | 测评</title>
    <link type="text/css" href="//at.alicdn.com/t/font_43459_d124thd3lgu.css" rel="stylesheet">
    {{ie9 /resources/js/history.min.js}}
</head>
<body>
    <div id="cp-app" v-cloak></div>
</body>
<script src="../xxx.js"></script> // 暴力引入
</html>

缺点：不使用该js插件的组件也会加载，而我只想在某个Vue组件中使用该js插件。

方式二

如果是下载到本地的静态文件，可以使用import 的方式导入。

import { xxx } from '../js/xxx.js' //注意路径

缺点：下载的静态文件才可以

方式三

在Vue组件加载完后，手动操作DOM插入js插件。

export default {
    mounted() {
        let script = document.createElement('script');
        script.type = 'text/javascript';
        script.src = '你的js文件地址';
        document.body.appendChild(script);
    },
}

该方式直接操作DOM，只在当前组件插入js插件。

方式四

使用render方法

export default {
    components: {
        'xxx-js': {
            render(createElement) {
                return createElement(
                    'script',
                    {
                        attrs: {
                            type: 'text/javascript',
                            src: '你的js文件地址',
                        },
                    },
                );
            },
        },
    },
}
// 使用 <xxx-js></xxx-js> 在页面中调用

方式五

高阶玩法。将方式三包装成一个js插件，使用 Promise，js加载成功，调用resolve，js加载失败，调用reject。

function loadJs(src) {
  return new Promise((resolve,reject)=>{
    let script = document.createElement('script');
    script.type = "text/javascript";
    script.src= src;
    document.body.appendChild(script);
      
    script.onload = ()=>{
      resolve();
    }
    script.onerror = ()=>{
      reject();
    }
  })
}
 
export default loadJs

使用的时候：

import loadJs from '../../utils/base/loadJs'
   
export default {
    mounted(){
        loadJs('http://api.map.baidu.com/xxx.js').then(()=>{
            // 加载成功，进行后续操作
        })
    }
}

方式六

更高阶方式。可以动态替换要加载的js文件。

包装一个importJs.js 插件。

// 导入外部js
import Vue from 'vue'
 
Vue.component('remote-script', {
  render: function (createElement) {
    var self = this;
    return createElement('script', {
      attrs: {
        type: 'text/javascript',
        src: this.src
      },
      on: {
        load: function (event) {
          self.$emit('load', event);
        },
        error: function (event) {
          self.$emit('error', event);
        },
        readystatechange: function (event) {
          if (this.readyState == 'complete') {
            self.$emit('load', event);
          }
        }
      }
    });
  },
  props: {
    src: {
      type: String,
      required: true
    }
  }
});

使用方式：

// 引入
import 'common/importJs.js'
// html使用的地方
<remote-script src="https://pv.sohu.com/cityjson?ie=utf-8"></remote-script>

（完）

# css # html # less # javascript
Logo
View Design

基于 Vue 的企业级 UI 组件库和中后台系统解决方案，为数万开发者服务。

更多推荐

cover

vue+element ui实现好看的登录界面

avatar ViewDesign

vue3.0中使用elementUi(element-plus的使用)

element-plus的使用小朋友，你是不是有很多问号❓❓❓甲：为什么在vue3.0中不能使用Element UI了？乙：由于vue3.0在插件install函数的入参从Vue原型（类）改成了app（vue实例），导致element-ui中Vue.prototype.* 这样的代码已经全都失效了。所以element-ui铁定是不兼容了。甲：那有什么方法能解决吗？乙：使用Element UI的升级

avatar ViewDesign

ElementUI 整体页面布局

一、概述一般后台页面的顶部导航栏和左侧导航栏一般是固定的，我们可以布局成下面的样式二、整体项目布局因为我们的首页是个公共的组件，点击首页，会员管理，都不会变，所以我们可以放在一个单独文件夹里面。需要分别对头部，左侧区域，主区域拆分成不同的文件。创建项目创建一个全新的ElementUI 项目，请参考链接：https://www.cnblogs.com/xiao987334176/p...

avatar ViewDesign