如何将自定义js文件包含/导入到vue项目中？

问题描述

我已经从某个站点下载了html模板，现在想将整个模板转换为vue cli项目。该模板包含jquery和其他自定义js文件。对于jquery和bootstrap我使用了npm包，但对于其他自定义js我不这样做不知道如何运行。下面是vue cli项目中公用文件夹中的index.html文件。

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>License Renewal</title>
  <!-- Stylesheets -->
  <link href="css/nepali.datepicker.v3.min.css" rel="stylesheet" type="text/css"/>
  <link href="css/revolution-slider.css" rel="stylesheet">
  <link href="css/style.css" rel="stylesheet">
  <link href="css/jquery-ui.css" rel="stylesheet">

  <!--Favicon-->
  <link rel="shortcut icon" href="images/ezee-logo.png" type="image/x-icon">
  <link rel="icon" href="images/ezee-logo.png" type="image/x-icon">
  <!-- Responsive -->
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
  <link href="css/responsive.css" rel="stylesheet">
  <!--[if lt IE 9]><script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script><![endif]-->
  <!--[if lt IE 9]><script src="js/respond.js"></script><![endif]-->
</head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div class="page-wrapper">
    <div id="app"></div>
    <!-- built files will be auto injected -->

    </div>
    <!--Scroll to top-->
    <div class="scroll-to-top scroll-to-target" data-target=".main-header"><span class="icon fa fa-long-arrow-up"></span></div>


    <script src="js/nepali.datepicker.v3.min.js" type="text/javascript"></script>

    <script src="js/revolution.min.js"></script>
    <script src="js/jquery.fancybox.pack.js"></script>
    <script src="js/jquery.fancybox-media.js"></script>
    <script src="js/owl.js"></script>
    <script src="js/appear.js"></script>
    <script src="js/wow.js"></script>
    <script src="js/jquery-ui.js"></script>
    <script src="js/jquery.datetimepicker.js"></script>
    <script src="js/script.js"></script>
    <!--Google Map APi Key-->
    <script src="http://maps.google.com/maps/api/js?key="></script>
    <script src="js/map-script.js"></script>

    <!--End Google Map APi-->

    <script type="text/javascript">
      $('.modal').on('shown.bs.modal',function () {
        $.getScript('js/nepali.datepicker.v3.min.js')
                .done(function(script,textStatus) {
                  console.log(textStatus)
                  /*var mainInput = document.getElementById("nepali-datepicker");
                  mainInput.nepaliDatePicker();
                  console.log('date');
                  console.log(mainInput);*/
                });


      })
    </script>

    <script>
      $('.motor-block').on('click',function () {
        test('application');
        console.log('yes');
      })
      function test(elID)
      {
        var dest = document.getElementById(elID);
        $([document.documentElement,document.body]).animate({
          scrollTop: $(dest).offset().top -25
        },500);
      }
    </script>
  </body>
</html>

下面是我正在谈论的脚本文件。如何运行它们？

 <script src="js/nepali.datepicker.v3.min.js" type="text/javascript"></script>
    <script src="js/revolution.min.js"></script>
    <script src="js/jquery.fancybox.pack.js"></script>
    <script src="js/jquery.fancybox-media.js"></script>
    <script src="js/owl.js"></script>
    <script src="js/appear.js"></script>
    <script src="js/wow.js"></script>
    <script src="js/jquery-ui.js"></script>
    <script src="js/jquery.datetimepicker.js"></script>
    <script src="js/script.js"></script>

下面是main.js文件

import Vue from 'vue'
import App from './App.vue'
import Main from './Main'
import router from './router'
import store from './store'
import jQuery from 'jquery'
global.jQuery=jQuery
global.$=jQuery
let Bootstrap=require('bootstrap')
import 'bootstrap/dist/css/bootstrap.css'

Vue.config.productionTip = false

new Vue({
  router,store,render: h => h(Main)
}).$mount('#app')

解决方法

您可以在这里选择几条路线。到目前为止，最简单的方法是在NPM上找到文件并将其安装在您的项目中，使用Webpack或Gulp将文件复制到Index.js中使用的公共JS路径。另一种方法是在线查找这些文件并手动复制（复制整个文件内容，粘贴到新的本地文件），然后将所需的公共路径保存到模板核心文件中。

javascript vue-cli vue.js

如何将自定义js文件包含/导入到vue项目中？

问题描述

解决方法

相关问答