Learn How to Use the Vue.js CLI
Vue.js is an impressive project that offers a range of utilities to make a Vue programmer’s life easier. One such utility is the Vue CLI, which stands for Command Line Interface. In this blog post, we will explore how to use the Vue CLI to create and manage Vue projects.
Installation
To start using the Vue CLI, you need to install it globally on your system by running the following command:
1 | npm install -g @vue/cli |
Alternatively, you can use Yarn to install the Vue CLI:
1 | yarn global add @vue/cli |
Once installed, you can invoke the vue command to start using the Vue CLI.
What does the Vue CLI provide?
The Vue CLI is an essential tool for rapid Vue.js development. Its main goal is to ensure all the necessary tools work together seamlessly, abstracting away the configuration details that would be required when using each tool in isolation. It simplifies initial project setup and scaffolding, and allows you to easily configure your project without the need to eject or reconfigure.
How to use the CLI to create a new Vue project
To create a new Vue project using the CLI, run the following command:
1 | vue create example |
The Vue CLI will guide you through an interactive process where you can choose a preset for your project. You can customize the preset by enabling or disabling features such as Babel, ESLint, and testing tools. You can also configure how linting should be applied. After completing the setup, the CLI will download the necessary dependencies and create the Vue project for you.
How to start the newly created Vue CLI application
Once the Vue CLI has created your app, you can navigate to the project folder and run the following command to start your application in development mode:
1 | yarn serve |
This will open your application in a browser, allowing you to view and test your code. The CLI provides other commands as well, such as yarn build for production builds, yarn lint for running the linter, and yarn test:unit for running unit tests.
Git repository
The Vue CLI automatically initializes a Git repository for your project and makes the first commit. This allows you to track your changes and easily revert back to previous states.
Use a preset from the command line
If you prefer to skip the interactive panel, you can instruct the Vue CLI to use a specific preset by running the following command:
1 | vue create -p favorite example-2 |
Where presets are stored
Presets are stored in the .vuejs file located in your home directory. You can customize presets by modifying this file. Each preset consists of a collection of plugins with optional configuration settings.
Plugins
The Vue CLI allows you to add more plugins to your project using the vue add command. You can also specify a particular version of a plugin by including the version property in the plugin’s configuration.
Remotely store presets
Presets can be stored in GitHub or other services by creating a repository that contains a preset.json file. This file defines a single preset configuration that can be used to bootstrap a new application.
1 | vue create --preset your-username/repository example3 |
Another use of the Vue CLI: rapid prototyping
The Vue CLI can also be used for rapid prototyping. You can create a simple Vue application, even a self-contained one in a single .vue file, and serve it without downloading all the dependencies. To do this, you need to install the cli-service-global global package using the following command:
1 | npm install -g @vue/cli-service-global |
Once installed, you can create an app.vue file and use the vue serve command to serve your application.
Webpack
Internally, the Vue CLI uses webpack for building and bundling your project. You can inspect the webpack configuration by running the vue inspect command.
In conclusion, the Vue CLI is a powerful tool that simplifies the creation and management of Vue projects. It abstracts away the complexities of configuring multiple tools and allows for rapid development and prototyping. Try it out and see how it can enhance your Vue.js projects.
tags: [“Vue.js”, “CLI”, “development”, “presets”, “plugins”, “webpack”]