Quiero obtener la versión más simple de vuejs Hello World usando archivos individuales. Estoy configurando el proyecto así: crear 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> crear crear ./src/main.js :
import { createApp } from 'vue' import App from './App.vue' const app = createApp(App) app.mount("#app") crear ./src/App.vue :
<template> Hello World </template> Ejecute npm init --yes en la terminal seguido de npm install vue@latest , entonces 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" } } Al ir a http://localhost , aparece una página en blanco con inspeccionar/consola que da el error: Error de Uncaught TypeError: Error resolving module specifier “vue”. Relative module specifiers must start with “./”, “../” or “/”. . He intentado importar ../node_modules/vue y usar importmap pero todos arrojan errores.
Eso no funcionará en el navegador, ya que espera una URL a un archivo para poder importar un módulo. Debe usar una herramienta de compilación/agrupador de algún tipo, recomiendo https://vitejs.dev/ Alternativamente, puede usar https://vuejs.org/guide/quick-start.html#without-build-tools , asegúrese de asignar al archivo exacto vue.esm-browser.js no solo vue