Vue.js Environment Setup

Before building applications with Vue.js, you need to set up your development environment. Vue supports two main setup methods—one suited for quick experiments and another for full-scale projects.

You can either include Vue via a CDN for simple usage or use the Vue CLI to create a structured application with build tools. This tutorial explains both approaches so you can choose the best one for your project.

Method 1: Using Vue.js via CDN

The simplest way to get started is to incorporate Vue via a CDN into your HTML file. This method does not require any installation or configuration and is ideal for beginners or small interactive components.

  1. Create a new HTML file.
  2. Include the Vue.js script from the CDN.
  3. Add a root element for Vue.
  4. Write your Vue code in a <script> tag.

Example:

<!DOCTYPE html>
<html>
<head>
  <title>Vue CDN Example</title>
</head>
<body>
  <div id="app">
    <h2>{{ message }}</h2>
  </div>

  <!-- Vue.js CDN (Vue 2) -->
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

  <script>
    new Vue({
      el: '#app',
      data: {
        message: 'Hello from Vue!'
      }
    });
  </script>
</body>
</html>

This setup allows you to use Vue right away, without any additional tools or project files. It's ideal when you want to test Vue or integrate it into existing web pages.

Method 2: Using Vue CLI (Command Line Interface)

Vue CLI (Command Line Interface) offers a powerful way to scaffold and manage Vue projects. It sets up everything you need, including file structure, development server, and build tools like Webpack.

Before using Vue CLI, ensure that Node.js and npm are installed on your system. You can verify the installation by running node -v and npm -v in the terminal.

You can check installation with:

node -v
npm -v

To install Vue CLI globally, run the following command: Use npm to install the Vue CLI globally:

npm install -g @vue/cli

After installation, check the CLI version with:

vue --version

Now, create a new Vue project by running:

vue create my-vue-app

The system will prompt you to select a preset. You can go with the default or manually choose features such as routing, state management, or CSS processors.

After creating the project, relocate it to the project folder and initiate the development server.

cd my-vue-app
npm run serve

The application will compile and run on http://localhost:8080 by default. As you develop, changes are reflected in real time.

Conclusion

Setting up Vue.js is straightforward, whether you're trying it for the first time or building a production-ready application. The CDN method is perfect for quick tests and small features. Vue CLI is best suited for organized, scalable projects with advanced tools and features. Once your environment is ready, you can move forward to learning Vue's core features like data binding, directives, and components in upcoming tutorials.

Found This Page Useful? Share It!
Get the Latest Tutorials and Updates
Join us on Telegram