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

【问题标题】：How to include/import custom js files into vue project?如何将自定义 js 文件包含/导入到 vue 项目中？
【发布时间】：2020-12-03 12:49:47
【问题描述】：

我已经从某个站点下载了 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')

【问题讨论】：

与 jquery 相同（但不是全部在 main 中）
是的，我可以将 npm 包用于 jquery，但对于特定于模板的 js，我该如何运行它
所有这些库都在 npm 上，对于 template 特定的 js，它将被放在 vue 实例中。

标签： javascript vue.js vue-cli

【解决方案1】：

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

【讨论】：

是的@Rylan，我可以使用 npm 包，但是对于特定于模板的 js，比如 script.js，我找不到它的包。我应该在设置 DOM 之后运行它们，我的意思是最后。