My side projects have slowed down so I have had a bit of time on my hands lately. Since I do not really have anything pressing at the moment I thought it would be good time to checkout some of the new features in the newly released Vue CLI 3.0.
Vue UI is still in beta so it may still have some rough edges, but I have not had any issues. The UI will not only allow you to create projects, but also manage dependencies and tasks for those projects all wrapped in an attractive dashboard. I like the dark interface, but there is also a light interface as well.
Getting started is easy, first you just need to install the tool:
npm install -g @vue/cli which will install Vue CLI globally.
Vue CLI uses the same vue binary as Vue CLI 2. If you still need access to the Vue CLI 2 legacy
vue init functionality you will need to install the global bridge.
npm install -g @vue/cli-init # vue init now works exactly the same as firstname.lastname@example.org vue init webpack my-project
Now we have things installed, lets start Vue UI.
# rob @ roberts-mbp in ~ [15:56:38] $ vue ui 🚀 Starting GUI... 🌠 Ready on http://localhost:8000
Once started, your default browser will open the Vue Project Manager.
As you can see I already have a test project here, but lets create a brand new project to examine all of the features.
Creating a New Project
Creating a new project is as easy as clicking the create button and picking the parent directory folder. I will be using the area51 folder in my home directory.
As you can see it will recognize other JS projects in the folder as noted by the solid green folder and VueJS apps will also show the VueJS icon beside it. If the language is not recognized it will be denoted with an outlined folder icon.
The Details tab is where you enter basic information about the project. First you will enter your project folder and choose either npm or yarn to use for package management. Additionally you can choose to overwrite the folder if it exists and create a git repo at initialization.
As you can see, toggling options is easy as clicking a switch.
Once the details have been set it is time to select the presets for your application. You can either select the Default preset which is babel and eslint or you can do a manual configuration and cherry pick the features. If you decide to use a manual configuration you can save your preset to apply to future projects.
I will choose a manual configuration so we can really explore the options.
Again, adding features is handled by toggling items on or off. If you are not sure what a feature does, each one has a more information link that opens a new tab explaining in detail what functionality that feature provides.
If you would like to start with a small application and add features later you can do that from your projects Plugins view.
Some features will require additional configuration.
Since I chose to install the vue-router I have the option of using history mode. This will remove the bang out of the url you would usually see in a SPA application.
I chose to use a CSS pre-processor so I will choose to use SCSS/SASS. This will allow me to use SCSS in my stylesheets as well as style blocks in the Vue templates.
Finally I chose the Use ESLint + Prettier for linting/formatter. I have not used Prettier before so I thought it would be cool to check out.
Once that is done it is time to click on Create Project.
So I have created an awesome new VueJS project. Once all the dependencies have been installed I will see the main project page which has side navigation with four main options: Plugins, Dependencies, Configuration, and Tasks.
Plugins list all the Vue CLI plugins for your application. Adding a new plugin is as easy as clicking the Add Plugin button on the top navigation bar. There are plugins to help you produce progressive web apps or the Vuetify material design framework for VueJS. There are many more plugins you can quickly add so you will definitely want to check this out.
If you did not install Vuex or Vue-Router when you initially created your project there will be quick links in the top navigation bar to add them. I thought it was a good design choice since they are used often.
Dependencies will allow you to manage the items you find in your package.json file. You can still add items the old fashioned way using npm or yarn, but there is a nice search interface built in for finding and adding packages. If you do add a package you can choose to install it as a main or development dependency. Installed and latest versions are displayed for items so you can easily tell which dependencies need to be updated.
Configuration does what you would expect it to, allow you to configure Vue CLI for your project as well as fine tune your lint configuration.
Tasks allow to execute the scripts you set in package.json. Starting the serve task will start up a webpack 4 development server with hot loading. As you can see from the screenshot above the dashboard gives you plenty of details about your build.
The build task will build your production ready deployable bundle.
My personal favorite, the lint task will go through your code base and fix linting errors that can be auto-corrected.
Finally the inspect task will resolve your entire webpack configuration for you.
Wrapping it all up
As someone who recently converted to VueJS, this is a tool I would have loved to have getting started. It has always been easy to kick start a VueJS project with
vue init and the starter templates but now you can add plugins a la carte with an intuitive user interface.
It has never been easier.