I recently downloaded an HTML template from a website and now I am looking to convert the entire template into a Vue CLI project. The template includes jQuery and other custom JavaScript files. While I was able to use npm packages for jQuery and Bootstrap, I am unsure how to make the other custom JS files function properly. Below is the index.html file located inside the public folder of the Vue CLI project.
<!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)
});
})
</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>
The script files mentioned above are the ones that need to run. How can I execute them?
<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>
Below you'll find the main.js file
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')