This post has been published first on CodingTheSmartWay.com.
Vue CLI 3 is a complete rewrite of the previous version of the Vue command line interface tool and comes with a set of new features which makes Vue development and the management of Vue projects a lot easier:
- Out-of-the-box support for Babel, TypeScript, ESLint, PostCSS, PWA, Unit Testing & End-to-end Testing.
- A plugin system which makes it easy to add common features to your project with ease
- A graphical user interface (Vue UI) as an alternative to the command line tool
- Executing single Vue files for instant prototyping
In the following we’re going to take a deeper look at Vue CLI 3 and it’s new features.
Vue CLI 3 comes as an NPM package. The first thing you need to make sure is that Node.js and NPM is available on your system. Vue CLI 3 requires at least Node.js version 8.9 (or above) on your system. If you have already installed Node.js you can check the version with the following command:
$ node —version
If you need to install or update Node.js first you can go to https://nodejs.org/ and download the installer for your OS. By installing Node.js the Node.js Package Manager (NPM) is installed automatically.
Vue CLI 3 is a complete re-write. In comparison to the previous version of Vue CLI the package name has changed from vue-cli to @vue/cli.
It is recommended to first uninstall the old package from your system:
$ npm uninstall vue-cli -g
The installation of Vue CLI 3 is then done via:
$ npm install -g @vue/cli
After having completed the installation successfully you’re able to check for the installed version with:
$ vue --version
Creating Vue Projects
With the new Vue CLI 3 there are two ways we can create new Vue projects from scratch:
- Via command line by using the vue create command
- Via browser by using the Vue UI
First, let’s take a look at the command line option.
To start creating a new Vue project via the command line just use the vue create command followed by the name of the new project, e.g.:
$ vue create my-vue-app-01
Having hit return to execute this command you’re prompted with the option to pick a default preset or to select features manually:
Selecting this option will give you access to a list of features available:
Here you can use the up and down arrow key on your keyboard to navigate through the list of features. Use the spacebar to select a feature from the list, e.g. let’s add the Router feature:
Again, hitting return takes you to the next list of options (Linter / Formatter to use):
Here we’re going to select the ESLint + Prettier option.
- Prettier is an opinionated code formatter. It enforces a consistent style by parsing your code and re-printing it with its own rules that take the maximum line length into account, wrapping code when necessary.
Next, we can decide if the linting should be done on save or on commit:
Now you can choose to have have dedicated config files or to place the configuration just inside of package.json. We’re going to decide for dedicated config files:
Finally you’ll have the option to save the settings as preset:
Just hit return to confirm the default (N = no preset will be saved) and you’re directly forwared to the next question. Here you can decide whether to use NPM or Yarn as the package manager:
Having selected the package manager the new project is created and the corresponding dependencies are downloaded and installed:
Finally you’ll see a success message on the command line confirming that the project has been created:
Now that the Vue.js project is created and configured we’re able to change into the newly created project folder and start the development web server by typing in:
$ npm run serve
The application is then available via http://localhost:8080:
Graphical User Interface
Next, let’s take a look at the second option to create new Vue projects: Vue UI. The graphical user interface is started with the following command:
$ vue ui
The default browser is opened and the Vue Project Manager application is displayed like you can see in the following screenshot:
Click on the button Create a new project here to start creating a new project. The following screen is shown afterwards:
In this first view you need to:
- specify the name of the project
- select the package manager to be used
- choose whether to override the target folder if it exists
- specify if a new Git repository should be created
Click on button Next to continue to the Presets view:
Select option Manual to then be able to select Features you’d like to add to the Vue project on the next page:
As seen before on the command line we’re able to add additional features to our application, e.g. the Router feature. In the last step you’re able to
- activate the history mode for the router
- pick a linter / formatter
- and specify if linting should take place on save or on commit
Click on button Create Project to finalize the project creation process. In the last step you also have the option to save the settings as a new preset:
Managing Projects With Vue UI
The Vue UI is also capable of managing existing projects. Once the project is created successfully you’ll find the corresponding project entry in the project overview. Clicking on the project is opening up the project details view which is split into four pages:
Click on the Plugins link from the left navigation menu and you should see the following view:
Here you can see an overview of the of the already installed plugins. If you’d like to add further plugins to the project you can click on button Add plugin. Afterwards you’ll see a list of available plugins you can select from:
Selecting an entry and hitting the button Install will add this plugin to the Vue project.
Managing dependencies vie Vue UI is also straightforward. In the left side menu select entry Dependencies to open the following view:
Again, you’re able to add dependencies to an existing project by using button Install dependencies and then selecting from a list of available packages:
With Vue UI you can also alter the configuration of the project. Clicking on the Configuration link takes you to the Project configuration page which gives you access to various configuration settings:
Another feature which is offered by Vue UI is the management of tasks. E.g. you can start and monitor the development web server by using the serve task as you can see in the following screenshot:
To start the server process you only need to select the serve task and then click on button Run task. Once the build process is complete and the server is running the dashboard view is updated. From this view you’re able an overview of the build result:
This post has been published first on CodingTheSmartWay.com.
Go To Course …
Disclaimer: This post contains affiliate links, which means that if you click on one of the product links, I’ll receive a small commission. This helps support this blog!