Use JS file variables in Vue2

0

I acquired a theme designed in Bootstrap 3 and I want to use it in a project that has Vue2 as frontend. I have no problems loading the .css files, my problem is when I load the .js files that the theme needs. The structure of the project is as follows:

proyecto
   |
  ... 
   |
   +-> src
        |
        +-> assets
              |
              +-> css
              |
              +-> fonts
              |
              +-> img
              |
              +-> js
                  |
                  +-> app.config.js
                      app.js
   ...

The app.config.js file has an internal structure like the following:

$.root_ = $('body');
$.navAsAjax = false; 
$.sound_path = "sound/";
$.sound_on = true; 

var root = this,
    debugState = false, 
    debugStyle = 'font-weight: bold; color: #00f;',
    debugStyle_green = 'font-weight: bold; font-style:italic; color: #46C246;',
    debugStyle_red = 'font-weight: bold; color: #ed1c24;',
    debugStyle_warning = 'background-color:yellow',
    debugStyle_success = 'background-color:green; font-weight:bold; color:#fff;',
    debugStyle_error = 'background-color:#ed1c24; font-weight:bold; color:#fff;';
...

And the file app.js has a structure like this:

$.intervalArr = [];
var calc_navbar_height = function() {
        var height = null;

        if ($('#header').length)
            height = $('#header').height();

        if (height === null)
            height = $('<div id="header"></div>').height();

        if (height === null)
            return 49;
        // default
        return height;
    },

    navbar_height = calc_navbar_height,
    ...
    if (!ismobile) {
        // Desktop
        $.root_.addClass("desktop-detected");
        thisDevice = "desktop";
        return false; 
    } else {
        // Mobile
        $.root_.addClass("mobile-detected");
        thisDevice = "mobile";

        if (fastClick) {
            // Removes the tap delay in idevices
            // dependency: js/plugin/fastclick/fastclick.js 
            $.root_.addClass("needsclick");
            FastClick.attach(document.body); 
            return false; 
        }

    }
    ...

As you can see, the file app.js uses variables declared in the file app.config.js , in the main.js file I import the files js in the following way

import '../assets/js/app.config.js'
import '../assets/js/app.js'

The problem I'm having is that the file app.js uses variables declared in the file app.config.js but that it is not recognizing when I import them and it is causing me errors undefined

I have no problems with JQuery since it matters and recognizes it well, any "light" that can be given to me will be well received

    
asked by Ale 08.03.2018 в 03:31
source

0 answers