Installing Vue JavaScript using the npm command

Embarking on my journey as a Vue JS learner, I took the plunge to install Vue and delve into creating web applications using it. So, I globally added npm Vue.

npm install --global vue-cli

This action resulted in:

npm WARN deprecated [email protected]: This package has been deprecated in favour of @vue/cli
npm WARN deprecated [email protected]: CoffeeScript on NPM has moved to "coffeescript" (no hyphen)
npm WARN deprecated [email protected]: request has been deprecated, see https://github.com/request/request/issues/3142
C:\Users\Abhilash\AppData\Roaming\npm\vue -> C:\Users\Abhilash\AppData\Roaming\npm\node_modules\vue-cli\bin\vue
C:\Users\Abhilash\AppData\Roaming\npm\vue-init -> C:\Users\Abhilash\AppData\Roaming\npm\node_modules\vue-cli\bin\vue-init
C:\Users\Abhilash\AppData\Roaming\npm\vue-list -> C:\Users\Abhilash\AppData\Roaming\npm\node_modules\vue-cli\bin\vue-list
+ [email protected]
updated 1 package in 17.266s

Subsequently, I proceeded to create a new project by executing:

vue init webpack my-project

This command generated various folders and files (including Package.json).

Following the prescribed procedure, I then entered the following command:

cd my-project
npm install

However, this led to errors such as:

npm WARN deprecated [email protected]: Deprecated. Please use https://github.com/webpack-contrib/mini-css-extract-plugin
npm WARN deprecated [email protected]: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
npm WARN deprecated [email protected]: core-js@<3 is no longer maintained and not recommended for usage due to the number of issues. Please, upgrade your dependencies to the actual version of core-js@3.
...
npm ERR! Unexpected end of JSON input while parsing near '...0-rc.2":{"name":"@bab'

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Abhilash\AppData\Roaming\npm-cache\_logs\2020-05-06T11_17_51_094Z-debug.log

What exactly is happening? Can someone provide me with detailed explanations please? What mistake have I made?

Answer №1

Here are the suggested commands to be used sequentially-

      npm install vue
      npm cache clear --force
      npm install -g @vue/cli

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

Error code 405: The POST method is not compatible with submitting multiple forms using JavaScript code simultaneously

Having multiple forms on a single page that are all submitted using the same JavaScript code presents some challenges. <form class="form" id="cancelchallenge1" method="POST" action="{{action('ChallengeController@cancelChallenge')}}"> <i ...

Encountering issue while static generating project: Cannot find resolution for 'fs' module

I am encountering an issue in my Next.js app when trying to serve a static file. Each time I attempt to use import fs from 'fs';, an error is thrown. It seems strange that I have to yarn add fs in order to use it, as I thought it was not necessa ...

The FormData function is unable to retrieve the input fields of a form

My Unique Code <!DOCTYPE html> <html> <body> <div id="custom-form-sample"> <form enctype="multipart/form-data"> <input type="text" name="custom-text" /> <input type="radio" name="custom-radio" ...

A guide on including a class to a DOM element in Angular 6 without relying on Jquery

Currently, I have created a component template using Bootstrap that looks like this: <div class="container"> <div class="row my-4"> <div class="col-md-12 d-flex justify-content-center"> <h2> ...

Can we selectively execute certain tests in Cypress using support/index.js?

I need to selectively run certain tests from a pool of 50 test files located in the integration folder. Specifically, I only want 10 of them to execute. In an attempt to achieve this, I am trying to configure the selection process within the support/index. ...

Sorting JSON data using JQuery Ajax

I've encountered an issue with sorting JSON data. Here is the JSON data I'm working with: [ { nom: "TERRES LATINES", numero: "0473343687", image: "http://s604712774.onlinehome.fr/bonapp/api/wp-content/uploads/2016/12 ...

What is a suitable alternative to forkJoin for executing parallel requests that can still complete even if one of them fails?

Is there a more robust method than forkJoin to run multiple requests in parallel and handle failed subscriptions without cancelling the rest? I need a solution that allows all requests to complete even if one fails. Here's a scenario: const posts = th ...

How to efficiently pass props between components in NextJs

This is the project's file structure: components ├─homepage │ ├─index.jsx ├─location │ ├─index.jsx pages │ ├─location │ │ ├─[id].jsx │ ├─presentation │ │ ├─[id].jsx │ ├─_app.jsx │ ├─index.jsx ...

Experiencing difficulty in connecting with the service providers

What's the process for obtaining these providers? I recently followed the JavaScript Mastery tutorial step by step, however, I encountered an issue with the useEffect hook to fetch the providers (I even tried using alert to check, but it keeps showin ...

maximum number of results in google custom search limit

I'm trying to retrieve the top 40 results from the Google API, but when I limit the result using the code below, it doesn't seem to work. How can I achieve getting the top 40 results with the Google API? <script> (function() { ...

Placing the date of each blog post at the end of the excerpt

Currently, there is a grid section on the homepage of our site showcasing the two most recent blog posts. I am looking for a Javascript solution to relocate the date to the bottom of each block, outside of the border. For reference, you can visit the follo ...

How can I prevent receiving package dependency warnings in React Native?

Every time I create a new React Native project, I am bombarded with warnings such as: warning react-native > create-react-class > fbjs > <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="9ffcf0edfab2f5ecdfaeb1adb1a8"> ...

Problems encountered when transferring information from jQuery to PHP through .ajax request

Hey there! I am currently working with Yii and facing an issue while trying to pass some data to a controller method called events. This is how my jQuery ajax call looks like: var objectToSend = { "categories" : [selectedOption],"datefrom" : month + "" + ...

Is it possible to retrieve a variable from a geojson file using Vue 3 and Vite?

For my Vue 3 project, I am trying to import a variable from a geojson file. However, when I use import line from '@static/line.geojson', my page goes blank and it seems like Vue stops working. If I use import line from '@static/line.json&ap ...

Creating a dynamic polyline with custom data on Mapbox is a great way to enhance your mapping experience

Hey everyone, I'm looking to create a polyline or path on Mapbox using my own data. I came across an example on mapbox.com that shows how to draw a sine wave on the map. How can I customize this example to use my own data? <!DOCTYPE html> <h ...

Retrieve GPS data source details using Angular 2

In my Angular 2 application, I am looking to access the GPS location of the device. While I am aware that I can utilize window.geolocation.watchposition() to receive updates on the GPS position, I need a way to distinguish the source of this information. ...

Tips on invoking a function from an array in JavaScript when a button is clicked

Being new to JavaScript, I encountered a challenge where I have an array of functions: allFunctions = () => [ function1(), function2(), function3(), function4(), function5(), function6(), function7(), function8(), function9() ] My go ...

Issue encountered while invoking the jQuery html method

Embarking on my first adventure with javascript + jQuery, creating a basic page but running into errors. I've gone through the code multiple times and still can't seem to find the issue. Below is the error message I am encountering: The complet ...

The table is unable to properly display the array data

My code includes an AJAX function that sends a GET request to an API and receives data in the format shown below: { "firstname": "John", "lastname": "Doe", "email": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6 ...

Exploring Angular 2: Unveiling the secrets of lifecycle hooks in lazy loaded

Currently, I'm working on an application that involves lazy loaded Angular modules. I have a straightforward inquiry: Is there a way to detect an event once a module is loaded? For instance, similar to the OnInit lifecycle hook for components. I fo ...