close

Installing Vue.js and Creating Your First Project

To install Vue.js, you can follow the steps below:

Step 1: Create a new directory for your project and open the terminal in that directory.

Step 2: Use npm to install Vue CLI (Command Line Interface) by running the following command:

npm install -g @vue/cli


Step 3: After successful installation, you can create a new Vue project using the following command:

vue create my-vue-project


Step 4: Choose configuration options for your project, including installing Babel, ESLint, and CSS Pre-processors (optional).

Step 5: Once the project creation process is complete, navigate into the project directory using the command:

cd my-vue-project


Step 6: Run the following command to start the Vue project:

npm run serve


After the startup process is completed, you will see a URL to access your Vue application on the browser.

A simple example of Vue.js:

Let's create a new HTML file and name it index.html`. In this file, add the following code:

html
<!DOCTYPE html>
<html>
<head>
  <title>Vue.js Example</title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
  <div id="app">
    <h1>{{ message }}</h1>
    <button @click="changeMessage">Change Message</button>
  </div>

  <script>
    new Vue({
      el: '#app',
      data: {
        message: 'Hello Vue.js!'
      },
      methods: {
        changeMessage() {
          this.message = 'Message changed successfully!';
        }
      }
    });
  </script>
</body>
</html>

In this example, we have created a simple Vue application with an h1 tag and a button. When the button is clicked, the message will change.

Save the index.html file and open it in the browser. You will see the initial message as "Hello Vue.js!". When you click the button, the message will change to "Message changed successfully!".

This is just a simple example to get you started with Vue.js. You can explore many more features and powerful capabilities of Vue.js while developing your applications.