The Project | About Us | Contribute | Donations | License
HOME My courses Completed
◄ Previous
◄

Creating Your First Vue Application

Next ►
►

In this section, we will guide you through the process of creating your first Vue.js application. By the end of this lesson, you will have a basic Vue.js app up and running. Let's get started!

Step 1: Setting Up the Project

1.1 Install Vue CLI

Vue CLI (Command Line Interface) is a powerful tool that helps you to scaffold and manage Vue.js projects. To install Vue CLI, you need to have Node.js and npm (Node Package Manager) installed on your machine.

Open your terminal and run the following command to install Vue CLI globally:

npm install -g @vue/cli

1.2 Create a New Project

Once Vue CLI is installed, you can create a new Vue project by running:

vue create my-first-vue-app

You will be prompted to choose a preset. For this tutorial, you can select the default preset by pressing Enter.

1.3 Navigate to the Project Directory

After the project is created, navigate to the project directory:

cd my-first-vue-app

1.4 Start the Development Server

To start the development server, run:

npm run serve

You should see output similar to this:

App running at:
- Local:   http://localhost:8080/
- Network: http://192.168.1.100:8080/

Open your browser and navigate to http://localhost:8080/. You should see the default Vue.js welcome page.

Step 2: Understanding the Project Structure

Let's take a look at the project structure generated by Vue CLI:

my-first-vue-app/
├── node_modules/
├── public/
│   ├── favicon.ico
│   └── index.html
├── src/
│   ├── assets/
│   ├── components/
│   ├── App.vue
│   ├── main.js
├── .gitignore
├── babel.config.js
├── package.json
├── README.md
└── yarn.lock

Key Files and Directories

  • public/index.html: The main HTML file. Vue will inject the app into this file.
  • src/main.js: The entry point of the application. This file initializes the Vue instance.
  • src/App.vue: The root component of the application.
  • src/components/: A directory to store your Vue components.

Step 3: Creating a Simple Component

3.1 Create a New Component

Create a new file named HelloWorld.vue inside the src/components/ directory:

src/components/HelloWorld.vue

Add the following code to HelloWorld.vue:

<template>
  <div class="hello">
    <h1>{{ message }}</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, Vue!'
    };
  }
};
</script>

<style scoped>
.hello {
  font-family: Arial, sans-serif;
  text-align: center;
  color: #42b983;
}
</style>

3.2 Use the Component in App.vue

Open src/App.vue and modify it to use the HelloWorld component:

<template>
  <div id="app">
    <HelloWorld />
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue';

export default {
  name: 'App',
  components: {
    HelloWorld
  }
};
</script>

<style>
#app {
  font-family: Arial, sans-serif;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

3.3 View the Changes

Save the changes and go back to your browser. You should see the message "Hello, Vue!" displayed on the page.

Step 4: Practical Exercise

Exercise: Modify the HelloWorld Component

  1. Task: Modify the HelloWorld component to accept a name prop and display a personalized greeting message.
  2. Steps:
    • Add a props section to the HelloWorld component.
    • Update the template to use the name prop.
    • Pass a name prop from App.vue.

Solution

Step 1: Update HelloWorld.vue:

<template>
  <div class="hello">
    <h1>Hello, {{ name }}!</h1>
  </div>
</template>

<script>
export default {
  props: {
    name: {
      type: String,
      required: true
    }
  }
};
</script>

<style scoped>
.hello {
  font-family: Arial, sans-serif;
  text-align: center;
  color: #42b983;
}
</style>

Step 2: Update App.vue to pass the name prop:

<template>
  <div id="app">
    <HelloWorld name="Vue Learner" />
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue';

export default {
  name: 'App',
  components: {
    HelloWorld
  }
};
</script>

<style>
#app {
  font-family: Arial, sans-serif;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

Common Mistakes and Tips

  • Common Mistake: Forgetting to import the component in App.vue.
    • Tip: Always ensure you import and register the component before using it.
  • Common Mistake: Not passing the required prop.
    • Tip: Check the console for warnings about missing required props.

Conclusion

Congratulations! You have successfully created your first Vue.js application and learned how to create and use components. In the next module, we will dive deeper into Vue.js basics, including template syntax and data binding. Keep practicing and experimenting with the code to solidify your understanding. Happy coding!

◄ Previous
◄
Next ►
►
The Project | About Us | Contribute | Donations | License
© Copyright 2024. All rights reserved