个人中心
gpt4 book ai didi

javascript - 组件挂载后导入javascript文件

转载 作者：行者123 更新时间：2023-11-30 15:06:11 24 4
gpt4 key购买 nike

我正在使用 vuejs 作为前端和 laravel 作为后端来构建 spa，我购买了一些名为 limitless 的管理 Bootstrap 模板。 (顺便说一句，非常酷的管理模板)。

但是这个模板有一个问题，在主 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>

在检查代码后，我发现它需要类为 page-container 的 div，并且这个 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 类的 div，因为它还不存在。

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

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

据我所知，我可以从 npm 下载像 moment 这样的 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>

更新_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>

关于javascript - 组件挂载后导入javascript文件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45714278/

24 4 0
文章推荐： c - 在 C 中对齐数据集列
文章推荐： c# 如何检查 QueryString Values 计数是否与键计数具有相同的值
文章推荐： C套接字原子非阻塞读取
文章推荐： c# - 在 C# 中调试窗口系统服务
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com