top of page

How to create a Vue.js website from scratch

React is incredibly popular framework for building SPAs (single-page applications). However, there are many options out there, so there's no reason to limit yourself. Vue.js has been gaining significant popularity recently. Keep reading if you want to learn the basics to building a Vue.js website completely from scratch!


If you have any questions about Vue.js or need a professional software engineer to help with a project you're working on, schedule an intro call with CodeConda for free!


1. Setup Environment


Make sure you have Node.js installed on your machine. If not, download and install it from the official website (https://nodejs.org). Use Node Package Manager (npm) to manage packages for your project. It comes bundled with Node.js.


2. Initialize a Vue.js Project


Open a terminal (or command prompt) and navigate to the directory where you want to create your Vue.js project. Run the following command to create a new Vue.js project using the Vue CLI (Command Line Interface):


npm install -g @vue/cli   # Install Vue CLI globally (if not already installed)
vue create my-vue-app      # Replace 'my-vue-app' with your desired project name

The Vue CLI will prompt you to pick a preset. You can either choose the default preset or manually select features. For beginners, the default preset is recommended.


3. Navigate to Project Directory


After the project is created, navigate to your project directory using the terminal:

cd my-vue-app   # Replace 'my-vue-app' with your project name

4. Development Server


To see your app in action during development, run the following command to start a local development server:

npm run serve

Your website will be accessible at `http://localhost:8080` (or another port if 8080 is busy).


5. Edit the Website


Open your project in a code editor (e.g., Visual Studio Code). The main entry point of the website is located in the src folder, specifically src/main.js. Vue.js uses components. You can find the root component in src/App.vue. Modify the content and layout of these components as per your project requirements.


Below is a simple example of a Vue.js website code. This example creates a basic To-Do list application that allows users to add and remove tasks.


In this example, we will have three main components:


1. App.vue: The root component that manages the overall application.

2. TaskList.vue: A child component that displays the list of tasks.

3. TaskInput.vue: A child component that handles task input and adding new tasks.


Let's start with the code:


1. App.vue

<template>
  <div>
    <h1>Vue.js To-Do List</h1>
    <TaskInput @addTask="addTask" />
    <TaskList :tasks="tasks" @removeTask="removeTask" />
  </div>
</template>

<script>
import TaskList from './TaskList.vue';
import TaskInput from './TaskInput.vue';

export default {
  components: {
    TaskList,
    TaskInput,
  },
  data() {
    return {
      tasks: [],
    };
  },
  methods: {
    addTask(task) {
      this.tasks.push(task);
    },
    removeTask(index) {
      this.tasks.splice(index, 1);
    },
  },
};
</script>

2. TaskList.vue

<template>
  <ul>
    <li v-for="(task, index) in tasks" :key="index">
      {{ task }}
      <button @click="removeTask(index)">Remove</button>
    </li>
  </ul>
</template>

<script>
export default {
  props: {
    tasks: {
      type: Array,
      required: true,
    },
  },
  methods: {
    removeTask(index) {
      this.$emit('removeTask', index);
    },
  },
};
</script>

3. TaskInput.vue

<template>
  <div>
    <input type="text" v-model="newTask" @keyup.enter="addTask" />
    <button @click="addTask">Add Task</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      newTask: '',
    };
  },
  methods: {
    addTask() {
      if (this.newTask.trim() !== '') {
        this.$emit('addTask', this.newTask);
        this.newTask = '';
      }
    },
  },
};
</script>

Make sure to place each component in its respective .vue file, and then you can use them as shown in the App.vue template.


6. Add Additional Packages


Vue.js has a vast ecosystem of plugins and packages you can use to extend your website's functionality. To add a package, use npm to install it and then import it into your code. For example:

npm install axios   # Install the Axios HTTP library

In your component:

import axios from 'axios';

7. Build for Production


When you are ready to deploy your website, build it for production with the following command:

npm run build

This will create a `dist` folder with optimized and minified files for deployment.


8. Deployment


Once the build is ready, you can deploy your website on a web server or hosting service of your choice.

Komentarze

bottom of page