Step to install Vue Js using npm & Node.js




1. Make sure you have Node.js and npm (the Node.js package manager) installed on your machine. You can check if you have them installed by running the following commands in your terminal:

node -v

npm -v



2.If you don't have Node.js and npm installed, you can download and install them from the official website (https://nodejs.org/).


3.Once you have Node.js and npm installed, open your terminal and navigate to the directory where you want to create your Vue.js project.


4.Run the following command to create a new Vue.js project:

npm init

This command will create a package.json file in the current directory.


5.Next, install Vue.js by running the following command:

npm install vue

This will install Vue.js and add it as a dependency in your package.json file.


6.Now you can create a new Vue.js app by creating a new .vue file in your project directory and adding the following code:

<template>
  <div>Hello, Vue.js!</div>
</template>

<script>
export default {
  name: 'App'
}
</script>


<style>
/* Add your styles here */
</style>


7.Finally, you can run your Vue.js app by including the following script in your HTML file:

<script src="/node_modules/vue/dist/vue.js"></script>



And then creating a new Vue instance:

<script>
new Vue({
  el: '#app',
  template: '<App/>',
  components: {
    App
  }
})
</script>


 

Bonus , some important commands

npm install -g @vue/cli

vue create <app-name>

npm run serve


Tips : default port is 8080 for Vue apps


 

Comments

Popular posts from this blog

Simple click function to increase and decrease values of two buttons using Vue js