首页 文章

安装组件后导入javascript文件

提问于
浏览 次
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文件？

javascript vue.js vuejs2 vue-component vue-router

1 回答

  • 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>
    回复于

相关问题