Vue.js has rapidly gained popularity for its simplicity and flexibility, making it a favorite among frontend developers. One of the essential tools for working with Vue.js is the Vue CLI (Command Line Interface). This powerful tool allows us to scaffold, manage, and develop Vue applications efficiently. In this guide, we’ll explore how to set up a new project using Vue CLI and delve into its features that enhance our development workflow.

What is Vue CLI?

Vue CLI is a standard tooling for Vue.js development. It helps developers rapidly scaffold new Vue projects with a predefined structure. Moreover, it comes with a robust plugin system, offering various configurations to suit the project’s specific needs.

Installing Vue CLI

Before we start creating a Vue.js project, we need to install Vue CLI globally on our machine. Make sure you have Node.js installed, as it's required for Vue CLI to work.

Open your terminal and run the following command:

npm install -g @vue/cli

To verify the installation, you can check the version using:

vue --version

This command will display the installed version of Vue CLI. If you see the version number, congratulations — you have successfully installed Vue CLI!

Creating a New Project

With the Vue CLI installed, we can create a new project easily with the vue create command. Let’s create a simple Vue.js application named my-vue-app.

Run the following command in your terminal:

vue create my-vue-app

Upon executing this command, you will be prompted to choose a preset. You'll typically have two options:

1. Default ([Vue 3] babel, eslint) - This will set up your project with Babel and ESLint configurations out of the box.
2. Manually select features - This allows you to choose additional features such as TypeScript, Router, Vuex, and more.

For this example, let's go with the default preset:

After accepting the default settings, Vue CLI will scaffold a new project structure in the my-vue-app directory. You should see output indicating that the project has been created successfully.

Project Structure

Once your project is created, navigate to your project directory:

cd my-vue-app

Here’s a brief overview of the project structure:

• node_modules/ - Contains all dependencies and modules needed for the project.
• public/ - This directory contains the index.html template and other static assets.
• src/ - The main source folder where you will spend most of your time. It includes:
  • assets/ - A place for images and styles.
  • components/ - Contains Vue components that can be reused across views.
  • App.vue - The root component of your application.
  • main.js - The entry point for the Vue application.

Running the Development Server

Now that you have your project set up, let's run the development server. From within the my-vue-app directory, execute:

npm run serve

This command will start the local development server, and you should see output indicating that your application is running, typically at http://localhost:8080. Open this URL in your browser, and you’ll see your new Vue.js application in action!

Adding Features to Your Project

As you develop your application, you may want to add new features such as Vue Router for navigation or Vuex for state management. Vue CLI makes this straightforward with the Plugin system.

To add a new plugin, simply run:

vue add router

The CLI will guide you through the setup process for the router, asking if you’d like to use history mode or not, among other settings.

Conclusion

With just a few simple commands, you can have a fully functional Vue.js application running thanks to Vue CLI. This powerful tool streamlines project setup, allowing developers to focus on building features rather than configuring boilerplate code. Whether you're a beginner or an experienced developer, Vue CLI enhances your productivity and makes Vue.js development enjoyable.