Getting Started with Vue CLI 3.x

Introduction

Vue.js is rocketing to unexpected heights after surpassing React.js in GitHub stars, in spite of not being backed by any major company, and the release of their new Command-line Interface (CLI) tool might very well bump them even higher!

Scaffolding a Vue project from scratch can be a daunting thing to approach, especially if you are not particularly comfortable with Vue.js.

This is why Vue CLI is a must-have tool under your arsenal to make sure your projects are set up properly from the get-go, letting you pick from a handful of templates and let the CLI make all the hard work boilerplate code be done for you.

Excitingly enough, this last summer has brought us Vue CLI 3.0, introducing a bunch of cool new features like the Vue Graphical User Interface, making creating a project and managing dependencies easier than ever before!

CLI Service

The CLI Service is a development dependency built on top of Webpack, a static module bundler for JavaScript applications - which is quite similar to react-scripts for React.js.

It is responsible for loading the plugins, making sure the webpack configuration is optimized, and enables us to have basic commands for managing our application (serve, build, lint, etc.).

Here you can pick which are the features you want your project to have:

Babel for transpiling your code to ES5 Javascript, which every browser can understand.

Typescript if you want to have strong typings and access more modern features on your Javascript code.

Progressive Web App (PWA) Support if you desire to make use of PWA driven features like service-workers and offline support.

Router which will add the Vue-router package which is an awesome routing tool for your Single Page Applications (SPA). You will be prompted, if you pick this option, to choose if you want to have the History mode enabled for the router, which removes the # sign from all your endpoints.

Vuex to have a centralized store for your states and manage the global data of your application, as well as managing how data in your components is changed and from where from within Vue Devtools. (See Vue Devtools).

CSS Pre-processors to pick your CSS pre-processor of choice, if you pick this option you will be prompted to pick between Sass/Less, Less, or Stylus.

Linter / Formatter this will add linting to your project to make sure your code is up to par with code standards. If you pick this option and you've picked Typescript you will be prompted to pick a linter / formatter as such, if you haven't chosen typescript, you won't get prompted for TSLint.

Here you can create your projects in the same fashion as you would with the command line, but with a nice user interface.

Plus, you can manage your dependencies without the need of managing them out from package.json, which comes with the desired version for each package:

Further configuration and widgets can be set up, and a few tasks can be automatically run from the Vue UI - Such as running a vulnerability check for your dependencies that may have security issues, setting up a port that you can kill to shut down your application, and enable the news feed to have the latest updates from the Vue team!

$ vue-init < template > < project name >

Whenever you want to use a Vue CLI 2.x legacy template, you need to install the vue-init service:

$ npm install -g @vue/cli-init

and then:

$ vue init webpack my-project

Then you will be able to set up your project as you would with a regular project.

Folder Structure

Each created project comes in with several folders which are set up for ease of use:

/node_modules this is where all the packaged dependencies will be installed in, by default they are installed whenever you create a project.

/public here is where the index.html lives and where all the public assets, manifests, and service-workers should be created.

/src where the main bread and meat of your work will be added, most other files from other folders are pre-configured, but this is where you add all your custom code and components.

/src/assets where you add your images, icons, fonts, that will, later on, be added to the /dist folder.

/src/components this is where you add your components, specifically your single components which do not represent a whole page.

/src/views here you have your layout components.

/test where your unit / e2e tests live.

Plus, a /plugins folder will be added as long as you have used the vue add command, where all your plugins will be installed.

Additionally, main.js, router.js, store.js, and App.vue will be auto-generated according to your configurations selected during the creation, along with some boilerplate examples.

The package.json File

This is one of the most important files, which holds most of your projects configuration, like the name, version, automated scripts you can use via NPM, and dependencies, which are third-party packages you can use in your project:

Deployment

The /dist folder can be handled to upload your bundled app to Github Pages, Heroku, Amazon S3, BitBucket Pages, and many other services.

Depending on your host service of choice, you will need to set up the /dist folder to match your server needs, this can be easily done via the vue.config.js file (or through the Vue UI configuration tab for that matter), which has to be created in the root folder of your project:

module.exports = {}

Here you can add your configuration needed for the server deployment such as the baseUrl.

If your server is waiting for your application to be hosted in a specific endpoint, such as: http://www.testsite.com/test - you will need to set up your baseUrl to accommodate to that endpoint:

module.exports = {
baseUrl: '/test'
}

On the other hand, if your server is waiting for your static files to be in a specific folder, you can also specify it, or if you wanted to have the /dist folder named differently you can choose your outputDir: