Home Articles

安装组件后导入javascript文件

Asked
Viewed 408 times
1

我正在使用vuejs作为前端和laravel作为后端来构建spa,并且我使用了一些名为limitless的管理员引导模板(顺便说一下非常酷的管理模板) .

但是这个模板存在问题,在主javascript文件(admin目录中的app.js)中有这一行

// Calculate min height
    function containerHeight() {
        var availableHeight = $(window).height() - $('.page-container').offset().top - $('.navbar-fixed-bottom').outerHeight();

        $('.page-container').attr('style', 'min-height:' + availableHeight + 'px');
    }

    // Initialize
    containerHeight();

因为我正在使用spa vuejs所以我只在我的admin.blade.php文件中包含所有js文件,就像这样

<!DOCTYPE Html>
<Html lang="{{ config('app.locale') }}">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'>
    <meta name="description" content="">
    <meta name="author" content="">
    <script>
        window.Laravel = <?php echo json_encode([
            'csrfToken' => csrf_token(),
        ]); ?>
    </script>
    <title>SIMO</title>
    <meta name="csrf-token" content="{{ csrf_token() }}" />
    <!-- icon-->
    <link rel="icon" href="{{asset('images/logo.png')}}" sizes="16x16">
    <link rel="icon" href="{{asset('images/logo.png')}}" sizes="32x32">
    <link rel="apple-touch-icon" href="{{asset('images/logo.png')}}"/>
    <link rel="apple-touch-icon" href="{{asset('images/logo.png')}}" sizes="76x76" />
    <link rel="apple-touch-icon" href="{{asset('images/logo.png')}}" sizes="120x120" />
    <link rel="apple-touch-icon" href="{{asset('images/logo.png')}}" sizes="152x152" />
    <link rel="apple-touch-icon" href="{{asset('images/logo.png')}}" sizes="180x180" />
    <!-- Bootstrap Core CSS -->
    <link href="https://fonts.googleapis.com/css?family=Roboto:400,300,100,500,700,900" rel="stylesheet" type="text/css">
    <link rel="stylesheet" type="text/css" href="{{asset('css/admin/icons/icomoon/styles.css')}}" >
    {{-- <link rel="stylesheet" type="text/css" href="{{asset('css/admin/icons/fontawesome/styles.min.css')}}" > --}}
    <link rel="stylesheet" type="text/css" href="{{asset('css/admin/bootstrap.css')}}" >
    <link rel="stylesheet" type="text/css" href="{{asset('css/admin/core.css')}}" >
    <link rel="stylesheet" type="text/css" href="{{asset('css/admin/components.css')}}" >
    <link rel="stylesheet" type="text/css" href="{{asset('css/admin/colors.css')}}" >
    @yield('css')

    <!-- Html5 Shim and Respond.js IE8 support of Html5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/Html5shiv/3.7.0/Html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>

<body>
<div id="app"></div>

<script type="text/javascript" src="{{ URL::asset('js/app.js') }}"></script>
<script type="text/javascript" src="{{ URL::asset('js/admin/plugins/loaders/pace.min.js') }}"></script>
<script type="text/javascript" src="{{ URL::asset('js/admin/libraries/jquery.min.js') }}"></script>
<script type="text/javascript" src="{{ URL::asset('js/admin/libraries/bootstrap.min.js') }}"></script>
<script type="text/javascript" src="{{ URL::asset('js/admin/plugins/loaders/blockui.min.js') }}"></script>
<script type="text/javascript" src="{{ URL::asset('js/admin/plugins/ui/nicescroll.min.js') }}"></script>
<script type="text/javascript" src="{{ URL::asset('js/admin/plugins/ui/drilldown.js') }}"></script>
<script type="text/javascript" src="{{ URL::asset('js/admin/plugins/buttons/hover_dropdown.min.js') }}"></script>
<script type="text/javascript" src="{{ URL::asset('js/admin/plugins/forms/selects/bootstrap_select.min.js') }}"></script>
<script type="text/javascript" src="{{ URL::asset('js/admin/plugins/ui/ripple.min.js') }}"></script>
<script type="text/javascript" src="{{ URL::asset('js/admin/app.js') }}"></script>

</body>
</Html>

并且在检查代码后我发现它需要div与类 page-container 并且这个div位于 Headers 部分之后所以在我的index.vue页面中我把它放在这样的

<template>
<div>
   <div class="page-header">
     //here is header
   </div>
   <div class="page-container">
    //content
   </div>
</div>
</template>

所以它会抛出

Uncaught TypeError: Cannot read property 'top' of undefined

因为当页面加载时它找不到任何带有 page-container 类的div,因为它还没有 .

从我在vuejs文档中读到的关于生命周期的内容来看,这整个admin / app.js代码应该在mounted()或created()vuejs函数中运行 . 但是从文档中的例子和互联网上它只是用于运行一些javascript函数但不包括整个javascript文件所以它将在那里执行....

所以我的问题是如何解决这个问题?或者更简单的方法,如何在组件中添加外部css文件和javascript文件(这个index.vue被称为组件对吗?)有些人告诉我使它成为模块并导入它但我不知道如何做到这一点.. ..

从我所知道的是我可以下载jpm插件像从npm的时刻,它神奇地可以在vue与 import moment from moment 调用,但如何本地的JavaScript文件?

1 Answer

  • 2

    当您在组件中使用本地javascript文件时,应该导入它 . 就像那样:

    // before you use your files in some components,you should package them
    // your local files
    export default {   //export your file
       your_function(){ // defined your function
       ...
       }
    }
    
    // now your can use it
    // your component file
    
    <script>
    import local_file from 'your_file_relative_path'
    //now you can use it in the hook function
    created(){  //or other hook function
       local_file.your_function() //call your function
    }
    
    </script>
    

    至于css文件,你也可以在里面的样式标签中导入它

    //your component file
    <style>
      @import 'your_css_file_path' 
      //or use requrie
      require('your_css_file_path')
    <style>
    

    换句话说,在导出之外编写你的js代码,它可能会工作

    //xxx.vue
       <script>
       var your_code='your_code'
       var your_function=function(){
    
       }
       export default{
    
       }
       </script>
    

    update_1:

    经过艰苦的战斗,我在Vue中正确使用jQuery .

    首先,你必须确保你可以 use jQuery by introducing instead of using script tag . This is very important!!!

    以下是我介绍jQuery的方法,但是我的webpack与你不同,所以你这样做:

    //package.json  //add the attributes and run npm install
    "devDependencies": {
       "jquery" : "^2.2.3",
       ...
    }
    
    //webpack.base.conf.js
    var webpack = require("webpack")
    module.exports = {
       ...
        plugins: [ //use the plugin
            new webpack.optimize.CommonsChunkPlugin('common.js'),
            new webpack.ProvidePlugin({
                jQuery: "jquery",
                $: "jquery"
            })
        ]
    }
    
    //main.js,the file you instantiate Vue object just like your app.js
    import $ from 'jquery'  //now you can use jQuery anywhere in the Vue files
    ...
    const app = new Vue({
        router,
        render: h => h(Admin)
    }).$mount('#app');
    

    现在你可以在Vue文件中的任何地方使用jQuery

    //app.vue
    <template>
        <div id="app">
            <router-view></router-view>
            <div class="page-container"></div>
        </div>
    </template>
    
    <script>
        //file name don't be like app.js in order to avoid conflict
        import yourApp from './yourApp.js'  
        export default {
            name: 'app',
            created() {
                yourApp.app_function()
               //now it can find .page-container class and not alert the error
            }
        }
    </script>
    

Related