我在使用vuejs作爲前端和laravel作爲後端構建spa，並且我提供了一些名爲limitless（很酷的管理模板）的管理引導模板。安裝組件後導入javascript文件

但與此模板，在主要的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();

而且由於我使用的溫泉vuejs所以我只包括所有的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>

我admin.blade.php文件和檢查我發現，它需要分度，page-container類的代碼後這個div位於後頭部部分所以在我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類，因爲它現在還沒有。

從我在vuejs關於生命週期的文檔中讀到的內容，應該在掛載（）或創建（）vuejs函數中運行整個admin/app.js代碼。但從文檔和互聯網上的例子它只是用於運行一些JavaScript功能，但不包括整個JavaScript文件，所以它會在那裏執行....

所以我的問題是如何解決這個問題？或者更簡單的方法，如何在組件中添加外部css文件和javascript文件（這個index.vue被稱爲組件？）有人告訴我使它成爲模塊並導入它，但我不知道該怎麼做。 ..

從我所知道的是我可以下載像npm時刻的JavaScript插件，它可以被稱爲import moment from moment vue，但本地javascript文件呢？

來源

2017-08-16 Laurensius Tony

當您在組件中使用本地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：

經過艱難的戰鬥，我在Vu中正確使用jQuery即

首先，你必須確保你可以使用jQuery 而不是使用腳本標記哪個。 這非常重要！

，以下是我的方式來介紹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');

現在你可以使用jQuery在Vue公司的任何地方文件

//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>

來源

2017-08-16 13:36:52 Zany

對不起，但我的項目是與vuejs laravel所以我的資產文件夾是在與vuejs分開的地方，所以如何得到正確的道路？ –

這很尷尬，我建議你把JS文件放到vue項目中。除此之外，我看到你在index.html中引入了很多JS文件，它可能不好，因爲它佔用了很多流量。我想你可以在使用它們時引入它們。 – Zany

多數民衆贊成在這一點上，我想只介紹與當前視圖有關的JS文件，我已經嘗試過了，我把所有的js文件放在那裏並導入它...但仍然得到相同的錯誤... 。只是不要拿它 –

安裝組件後導入javascript文件

回答

update_1：

相關問題