Looking to create the most basic vuejs Hello World application using separate files. Here is the project setup: start by creating 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.0">
<title>Document</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="./src/main.js"></script>
</body>
</html>
create a file named ./src/main.js:
import { createApp } from 'vue'
import App from './App.vue'
const app = createApp(App)
app.mount("#app")
now create ./src/App.vue:
<template>
Hello World
</template>
Run npm init --yes in your terminal followed by npm install vue@latest, which will update your package.json:
{
"name": "vueintro",
"version": "1.0.0,
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"vue": "^3.2.31"
}
}
When accessing http://localhost, you may encounter a blank page along with this error in the inspect/console:
Uncaught TypeError: Error resolving module specifier “vue”. Relative module specifiers must start with “./”, “../” or “/”.../node_modules/vue and using importmap but they all resulted in errors.