This is the fifth day of my participation in Gwen Challenge

Hi, I’m Daotin, front end team leader. If you want to get more front end highlights, follow me and unlock new front end growth poses.

The following text:

background

In Vue, we usually import a JS plug-in by downloading it using NPM and then importing it. But NOW I have a local JS file or a link to a remote JS file. I don’t want to use NPM install XXX. Is there any way?

Methods a

Simple and crude, directly in the Vue project index. HTML using the global way, such as:

<! DOCTYPEhtml>
<html>

<head>
    <! -... Omit -- -- >

    <title>Help BOSS | assessment</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>// Violence is introduced</html>
Copy the code

Cons: Components that don’t use this JS plug-in will also load, and I only want to use this JS plug-in in a Vue component.

Way 2

If a static file is downloaded to the local PC, you can import it using import.

import { xxx } from '.. /js/xxx.js' // Pay attention to the path
Copy the code

Disadvantages: static files can only be downloaded

Methods three

After the Vue component is loaded, manually manipulate the DOM to insert the JS plug-in.

export default {
    mounted() {
        let script = document.createElement('script');
        script.type = 'text/javascript';
        script.src = 'Your JS file address';
        document.body.appendChild(script); }},Copy the code

This approach manipulates the DOM directly and only inserts JS plug-ins into the current component.

Methods four

Using the Render method

export default {
    components: {
        'xxx-js': {
            render(createElement) {
                return createElement(
                    'script',
                    {
                        attrs: {
                            type: 'text/javascript'.src: 'Your JS file address',}}); }},}},// use 
       to call in the page
Copy the code

Methods five

Advanced play. Wrap method 3 as a JS plug-in, use Promise, js load succeeds, call resolve, JS load fails, call 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
Copy the code

When used:

import loadJs from '.. /.. /utils/base/loadJs'
   
export default {
    mounted(){
        loadJs('http://api.map.baidu.com/xxx.js').then(() = >{
            // If the file is successfully loaded, go to subsequent operations}}})Copy the code

Methods six

Higher order. You can replace js files to load dynamically.

Wrap an importjs.js plug-in.

// Import external 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}}});Copy the code

Usage:

/ / introduction
import 'common/importJs.js'

// where the HTML is used
<remote-script src="https://pv.sohu.com/cityjson?ie=utf-8"></remote-script>
Copy the code

(after)

Recent hot articles:

  • Waterfall flow, it’s so easy
  • Four common ajax cross-domain solutions (easy to understand)
  • Vue. Js Naming Style Guide (Easy to remember Version)

Daotin, Daotin, Daotin, Daotin, Daotin, Daotin, Daotin, Daotin, Daotin, Daotin, Daotin, Daotin