组件挂载后导入 javascript 文件
Import javascript file after component is mounted
我正在使用 vuejs 作为前端和 laravel 作为后端来构建 spa，我购买了一些名为 limitless 的管理 bootstrap 模板（顺便说一句，非常酷的管理模板） .
但是这个模板有问题，在主 javascript 文件中（管理目录中的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 和 class page-container 而这个 div 位于 header 部分之后所以在我的 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
因为当页面加载时它没有找到任何 div 和 page-container class，因为它还没有。
根据我在 vuejs 文档中阅读的有关生命周期的内容，整个 admin/app.js 代码应该是 运行 在 mounted() 或 created() vuejs 函数中。但是从文档和互联网上的例子来看，它只用于 运行 一些 javascript 函数，但不包括整个 javascript 文件，所以它将在那里执行....
所以我的问题是如何解决这个问题？或者更简单的方法，如何在组件中添加外部 css 文件和 javascript 文件（这个 index.vue 称为组件对吗？）有些人告诉我将其制作为模块并导入它但是我不知道该怎么做....
据我所知，我可以从 npm 下载 javascript 插件，并且可以在 vue 中使用 import moment from moment 神奇地调用它，但是本地 javascript 文件怎么样？
当您在组件中使用本地 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文件，你也可以在
里面的style标签导入
//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
首先，您必须确保可以通过引入而不是使用脚本标签来使用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');
现在您可以在 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>
我正在使用 vuejs 作为前端和 laravel 作为后端来构建 spa，我购买了一些名为 limitless 的管理 bootstrap 模板（顺便说一句，非常酷的管理模板） .
但是这个模板有问题，在主 javascript 文件中（管理目录中的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 和 class page-container 而这个 div 位于 header 部分之后所以在我的 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
因为当页面加载时它没有找到任何 div 和 page-container class，因为它还没有。
根据我在 vuejs 文档中阅读的有关生命周期的内容，整个 admin/app.js 代码应该是 运行 在 mounted() 或 created() vuejs 函数中。但是从文档和互联网上的例子来看，它只用于 运行 一些 javascript 函数，但不包括整个 javascript 文件，所以它将在那里执行....
所以我的问题是如何解决这个问题？或者更简单的方法，如何在组件中添加外部 css 文件和 javascript 文件（这个 index.vue 称为组件对吗？）有些人告诉我将其制作为模块并导入它但是我不知道该怎么做....
据我所知，我可以从 npm 下载 javascript 插件，并且可以在 vue 中使用 import moment from moment 神奇地调用它，但是本地 javascript 文件怎么样？
当您在组件中使用本地 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文件，你也可以在
里面的style标签导入//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
首先，您必须确保可以通过引入而不是使用脚本标签来使用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');
现在您可以在 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>