我们如何在Vue-cli中导入外部脚本

时间:2019-05-20 15:02:52

标签: javascript vuejs2

我正尝试在vue-cli应用程序中使用可使用Revolution滑块的现成模板,如何使用此模板的外部脚本?

我试图导入index.html标记中的模板所使用的脚本:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Balad | Govt HTML Template</title>
<!-- CSS Files -->
<link href="css/custom.css" rel="stylesheet">
<link href="css/responsive.css" rel="stylesheet">
<link href="css/color.css" rel="stylesheet">
<link href="css/all.css" rel="stylesheet">
<link href="css/owl.carousel.min.css" rel="stylesheet">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/prettyPhoto.css" rel="stylesheet">
<link href="css/slick.css" rel="stylesheet">
<link rel="icon" href="images/fav.png" type="image/png">
<!--Rev Slider Start-->
<link rel="stylesheet" href="js/rev-slider/css/settings.css"  type='text/css' media='all' />
<link rel="stylesheet" href="js/rev-slider/css/layers.css"  type='text/css' media='all' />
<link rel="stylesheet" href="js/rev-slider/css/navigation.css"  type='text/css' media='all' />
<!--Rev Slider End-->
<!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
      <![endif]-->
</head>
<body>
    <noscript>
        <strong>We're sorry but brikma-website doesn't work properly without JavaScript enabled. Please enable it to
          continue.</strong>
      </noscript>
      <div id="app"></div>
      <!-- built files will be auto injected -->

<!-- JS --> 
<script src="js/jquery.min.js"></script> 
<script src="js/bootstrap.min.js"></script> 
<script src="js/owl.carousel.min.js"></script> 
<script src="js/jquery.prettyPhoto.js"></script> 
<script src="js/slick.min.js"></script> 
<script src="js/custom.js"></script> 
<!--Rev Slider Start--> 
<script type="text/javascript" src="js/rev-slider/js/jquery.themepunch.tools.min.js"></script> 
<script type="text/javascript" src="js/rev-slider/js/jquery.themepunch.revolution.min.js"></script> 
<script type="text/javascript" src="js/rev-slider.js"></script> 
<script type="text/javascript" src="js/rev-slider/js/extensions/revolution.extension.actions.min.js"></script> 
<script type="text/javascript" src="js/rev-slider/js/extensions/revolution.extension.carousel.min.js"></script> 
<script type="text/javascript" src="js/rev-slider/js/extensions/revolution.extension.kenburn.min.js"></script> 
<script type="text/javascript" src="js/rev-slider/js/extensions/revolution.extension.layeranimation.min.js"></script> 
<script type="text/javascript" src="js/rev-slider/js/extensions/revolution.extension.migration.min.js"></script> 
<script type="text/javascript" src="js/rev-slider/js/extensions/revolution.extension.navigation.min.js"></script> 
<script type="text/javascript" src="js/rev-slider/js/extensions/revolution.extension.parallax.min.js"></script> 
<script type="text/javascript" src="js/rev-slider/js/extensions/revolution.extension.slideanims.min.js"></script> 
<script type="text/javascript" src="js/rev-slider/js/extensions/revolution.extension.video.min.js"></script>
</body>
</html>

然后我越过#app渲染的vue js组件中模板的主体

该jQuery可以在网站上运行,但还有其他问题,旋转滑块未显示

我还尝试将这些软件包与节点模块一起使用,但是我发现用这种方法很难完成工作

这是我的项目结构: 我在公共文件夹中放置了index.html可以直接访问它们的文件夹,这些文件夹在模板中(所有js和css ...)

控制台和内部版本都没有问题

0 个答案:

没有答案