My main.js file isn't being imported in VScode and I'm at a loss for what the issue could be. Even though the index.html is adjacent to main.js, it's unable to locate it. I've successfully imported multiple js files into html in the past, so why is it failing now? Does anyone have any insights?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Vue Mastery</title>
<!-- Import Styles -->
<link rel="stylesheet" href="./assets/styles.css" />
<!-- Import Vue.js -->
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e1979484a1d3cfd7cfd0d5">[email protected]</a>/dist/vue.js"></script>
<div id="app">
<h1>{{ product }}</h1>
</div>
<!-- Import Js -->
<script src="./main.js"></script>
<!--Mount App-->
<script>
const mountedApp = app.mount;
</script>
</body>
</html>
I'm encountering issues with using the js file here because it's not linking properly to the html, causing "Vue is not defined" errors.
const app = Vue.createApp({
data() {
return{
product: 'Socks'
}
}
})
The directory structure appears as follows:
Intro-to-Vue
-Assest
-Images
Socks.png
Index.html
main.js
Your assistance would be greatly appreciated. Thank you!