When a new VueJS project is created, it failed to automatically install the necessary basic HTML files and folders

Hey there, I am completely new to Vue.js. Just recently, I installed the Vue.js/CLI and created a brand new project using vue create test. This prompted me to choose from three options:

> Default ([Vue 2] babel, eslint)
  Default (Vue 3 Preview) ([Vue 3] babel, eslint)
  Manually select features

I ended up selecting the second option,

Default (Vue 3 Preview) ([Vue 3] babel, eslint)
. After that, it started installing all the necessary dependencies, creating the app folder. However, upon checking the project directory, all I could see were node_modules, package.json, and package_lock.json. There were no default folders or html files installed. When I tried running npm run serve, I encountered this error:

npm ERR! Missing script: "serve"
npm ERR!
npm ERR! To see a list of scripts, run:
npm ERR!   npm run

npm ERR! A complete log of this run can be found in: <dir>

Here is the content of my package.json file:

{
 "name": "test",
 "version": "0.1.0",
 "private": true,
 "devDependencies": {
  "@vue/cli-plugin-babel": "~4.5.0",
  "@vue/cli-plugin-eslint": "~4.5.0",
  "@vue/cli-service": "~4.5.0"
  }
}

I'm unsure about what might be causing this error. Any ideas?

Answer №1

I encountered the same issue before and found a solution. I recommend downloading an older version of node.js, such as 14.16.0. Occasionally, newer versions of node.js can cause complications with Vue.js build processes. Hopefully, this advice proves helpful!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

VueJS3 and Vuetify are in need of some additional CSS classes

We are currently in the process of upgrading our application from old VueJS+Vuetify to VueJS3. However, we have encountered some classes defined in the template that are not available in the new version. These classes include xs12 (which is intended to co ...

What is the best way to access the index in a v-for loop in Vue.js?

Here is an example of my Vue component: <div v-for="item in items" :key="I need to access the index of the for-loop here" > </div> ... data(){ items: [{name:'a'}, {name:'b'}...] } Is there a way to retrieve the inde ...

I am attempting to implement an Express static middleware as demonstrated in this book, but I am having trouble understanding the intended purpose of the example

I'm currently studying a chapter in this book that talks about Express, specifically concerning the use of express.static to serve files. However, I'm encountering an issue where the code catches an error when no file is found. I've created ...

The Beauty of HTML5 UI

Among the plethora of HTML5 UI frameworks available, I stumbled upon a few that caught my eye: Kendo Wijmo jqWidgets Zebra Sencha SproutCore YUI XUI Shield UI The abundance of options has left me feeling overwhelmed. Upon exploring some of them, I notic ...

Extension for Chrome that enhances YouTube video playback experience

I'm struggling to figure out why this isn't functioning. I've reviewed the Google extension dev docs and examined some sample code. Checked various Stack Overflow questions and answers, but haven't received any helpful feedback or res ...

Tips for confirming date is earlier than current date in Reactjs?

Looking for guidance on how to ensure a date selected by a user is always before the current date when using Material UI in my project. For instance, if it's January 6th, 2021 and the user selects either January 5th or 6th that would be acceptable. Ho ...

Applying the 'overflow: scroll' property creates a scroll bar that remains fixed and cannot be scrolled

Looking to showcase the seating arrangement in a cinema hall. If the seats occupy more than 50% of the page, I want a scroll bar to appear. Attempted using "overflow-scroll" without success. View result image <div class="w-50"> <div ...

"Troubleshooting problems with jQuery click function during real-time search execution

In my code, I have an empty result div that dynamically fills up with item elements as search queries are entered (using jQuery ajax). If I use the following code: $(".result").click(function(){ alrert("click on whole result class captured") }); I r ...

Inject a dynamic URL parameter into an iframe without the need for server-side scripting

I'm really stuck and could use some assistance with the following issue, as I am unable to solve it on my own :( When a user is redirected to a form (provided via an iframe), there is a dynamic URL involved: website.com/form?id=123 The code resp ...

Tips for efficiently awaiting outcomes from numerous asynchronous procedures enclosed within a for loop?

I am currently working on a search algorithm that goes through 3 different databases and displays the results. The basic structure of the code is as follows: for(type in ["player", "team", "event"]){ this.searchService.getSearchResult(type).toPromise ...

What is the function of this.handleClick that is positioned on the LEFT side of the = operator?

I'm struggling to understand the usage of this in an ES6 constructor. Initially, I grasped the following concepts (see example below): - We utilize this.height = height; to introduce a new instance variable. - Adding a new instance method with cl ...

Using AngularJS with the Chosen Plugin to pre-select a value in a dropdown menu

After following the guidance from this URL, I successfully incorporated the chosen plugin into Angular.js. Now that I can retrieve the value, my next objective is to have the selected value be pre-selected in the chosen dropdown menu. If anyone has a sim ...

Revamping JSP Content with DOJO AJAX: A Comprehensive Guide

I am currently utilizing the Dojo library and I need assistance with replacing all the content of my jsp/html file. I am attempting to dynamically reload my page whenever new data is updated. Below is the code snippet from my dojo implementation: functio ...

Adding dynamic HTML to the body in AngularJS based on URL alterations

I am currently developing a single-page application using Angular. I am trying to create a card stack made of divs, similar to this concept. https://i.stack.imgur.com/42M06.png The idea is that the app will have various URL links and a card should be app ...

Send a response from socket.io to the client's browser

I am working on a project where I need to retrieve the ID of the current drawer from the server and pass it to the client. Here is the code I have so far: Client Side: socket.emit('returnDrawer'); socket.on('returnDrawer', fu ...

css issue with opacity transition not functioning properly

My website is designed to display images in a table, but some of them are Stock Photos, so I need to indicate the source. I want the source to appear when the user hovers over the picture. For this purpose, I have assigned the source tag to a class (.PicSo ...

problem with displaying sidebar in Ember template

Using Ember, I have a login page where I don't want to display the header or sidebar navigation for my site until the user is authenticated. Once they are logged in, I want the header and sidebar to be visible. Currently, I am achieving this by checki ...

Would this be considered a practical method for showcasing an image with jQuery?

Is there a more efficient way to display an image once it has been loaded using this code? LightBoxNamespace.SetupLightBox = function(path, lightBox) { // Create a new image. var image = new Image(); // The onload function must come before ...

What is preventing me from loading js and css files on my web pages?

I have developed a web application using SpringMVC with Thymeleaf and I am encountering an issue while trying to load javascript and CSS on my HTML5 pages. Here is a snippet from my login.html: <html xmlns="http://www.w3.org/1999/xhtml"> <head&g ...

Solving relative paths in NodeJS/Express

My website is calling several scripts, images, styles, etc., from different folders both inside and outside the main folder: File Tree - / - website - scripts - data.js - customJquery.js - styles ...