In this article, we will discuss “Vue CLI 3”. You know command line interface (CLI) is a helpful tool for each language. Today, lots of framework for frontend or backend provide the CLI support which helps the developer to develop their apps faster. You can check our previous article for the basic understanding of “Vue Js”.
Before starting with Vue CLI 3, need to set up “Node and NPM” on your system. If both are already working on your system then you can start with Vue CLI 3. Otherwise, follow the given steps to setup “Node and NPM”.
You can download the node js setup from https://nodejs.org/en/download/ as per your system compatibility. I’m working on windows system so I’m mentioning this way.
After the successful setup, you can use following commands to check the node and npm version.
Table of Contents
Let’s start the setup of Vue CLI 3
You can use the following npm command to set up the Vue CLI.
npm install -g @vue/cli
After, executing the above-mentioned command. You can see the Vue CLI is successfully installed on your system. You can see the following screenshot.
Why I’m calling Vue CLI 3 a new game changer?
Vue CLI 3 provides an awesome feature for its developer. Developers can manage projects from the new web-based GUI (Graphical User Interface) which is called Vue Project Manager. A developer can create a new Vue project directly from the Vue Project Manager.
You can use the following command to start the VPM.
vue ui
After executing the above-mentioned command. Vue GUI is started at port no 8000.
Vue Project Manager
VPM provides three options such as Projects, Create, and Import.
- Project: You can manage your Vue projects here.
- Create: You can create a new Vue project and also you can manage favorite, new folder, hidden file and many more options here.
- Import: You can import your previous Vue project.
Create Project
First, we will discuss the Create option. It is providing an easy and simple way to create a new Vue project. Also provides rich option panel to manage lots of things such as presets, features, package manager, and etc.
We are going to create the new Vue project title “vue-test-project” with npm package manager and git initialize repository. You can also use yarn as a package manager. Its depends on you as per your experience. In this example, we are using npm as package manager.
Setup Presets
A preset is an association of plugins and configurations. After you have selected features, you can optionally save it as a preset so that you can reuse it for future projects, without having to reconfigure everything again.
After selecting the presets, we have to click on “create project” button. Now, the project creation process starts, after all the initialization our Vue project is ready.
Vue Project Manager showed the newly created project panel.
Here, we can manage plugins & dependencies. Also, install new plugins & dependencies as per our requirement.
In the Configuration tab, you can manage the configuration of Vue CLI, ES Lint & etc.
In the Tasks tab, you have four option such as serve, build, lint, and inspect.
Now, time to run our project. So click on serve option then you see other options shown which provide under the “serve task” as per the following screenshot.
Here we need to click on the “Run Task” button, and you can see the result in the output tab.
Everything is done, you can run the “http://localhost:8080/” and see the working of newly created vue project.
Conclusion
In this article, I’m trying to explain to you the use of Vue CLI 3. We will discuss more on Vue CLI 3 in our future articles. Because of its features, I’m calling Vue CLI 3 is like a new game changer. Still, other library or framework does not provide this kind of GUI. Hope you get the good knowledge of Vue CLI. Please feel free to add the comment if any query.
If you like our content, please consider buying us a coffee.
Thank you for your support!
Buy Me a Coffee