Create a Vue.js application with CLI Services

Refer to our previous blog to install Vue.js and CLI, and create a basic project. This article will tell you how to use CLI services and make your app more functional and fast. Follow the steps and use CLI services without hustle. 

Step 1: Use the Binary

@vue/cli-service will install a binary named vue-cli-service inside a Vue CLI project. You can easily access this binary as vue-cli-service in npm scripts or from terminal access the binary as ./node_modules/.bin/vue-cli-service.  

Below is the code you will see in the package.json of your project as the default preset 

json

{   "scripts": {     "serve": "vue-cli-service serve",     "build": "vue-cli-service build"   } }

You can also invoke these scripts by using either Yarn or npm. 

sh

npm run serve # OR yarn serve

In case you have npx available with you (must be bundled with an updated version of npm), it will allow you to invoke the binary with

sh

npx vue-cli-service serve

The below is the Webpack Analyzer from the GUI

                                                        Source: cli.vuejs.org

Step 2: vue-cli-service server   

Usage: vue-cli-service serve [options] [entry] Options:   --open         open browser on server start   --copy         copy url to clipboard on server start   --mode         specify env mode (default: development)   --host         specify host (default: 0.0.0.0)   --port         specify port (default: 8080)   --https        use https (default: false)   --public       specify the public network URL for the HMR client   --skip-plugins comma-separated list of plugin names to skip for this run

 

The command vue-cli-service server starts a dev server which is based on webpack-dev-server. This server comes with Hot-Module-Replacement (HMR) working differently.  

Along with the command line flags, you can configure the dev server with the help of devServer field in vue.config.js.  

Step 3: vue-cli-service build

Usage: vue-cli-service build [options] [entry|pattern] Options:   --mode         specify env mode (default: production)   --dest         specify output directory (default: dist)   --modern       build app targeting modern browsers with auto fallback   --target       app | lib | wc | wc-async (default: app)   --formats      list of output formats for library builds (default: commonjs,umd,umd-min)   --inline-vue   include the Vue module in the final bundle of library or web component target   --name         name for lib or web-component mode (default: "name" in package.json or entry filename)   --filename     file name for output, only usable for 'lib' target (default: value of --name),   --no-clean     do not remove the dist directory contents before building the project   --report       generate report.html to help analyze bundle content   --report-json  generate report.json to help analyze bundle content   --skip-plugins comma-separated list of plugin names to skip for this run   --watch        watch for changes

vue-cli-service build helps in producing a production ready bundle in the directory named dist/, with auto vendor chunk for better chaching and minification for JS/HTML/CSS. 

There are some useful flags:

- -modern create your application using Modern Mode, sending native ES2015 code to contemporary browsers that support it with automatic fallback to a legacy bundle.

- -target allows you to develop any component(s) inside your Vuejs project as web components or as a library. See Build Targets for further details.

- -report and - -report-json will produce reports based on the build statistics that will allow you to assess the size of the modules in your bundle.

Step 4: vue-cli-service inspect

Usage: vue-cli-service inspect [options] [...paths] Options:   --mode    specify env mode (default: development)

To examine the webpack configuration inside a Vue, use vue-cli-service inspect. For further information, see Examining Webpack Configuration.

Step 5: Checking available commands

Certain CLI plugins will send vue-cli-service additional commands. For instance, the vue-cli-service lint command is injected by @vue/cli-plugin-eslint. Run the following command to view all inserted commands:

npx vue-cli-service help

Moreover, you can use the following to discover each command's possible options:

npx vue-cli-service help [command]

Step 6: Skipping Plugins

By specifying the name of the plugin with the —skip-plugins option, you can omit particular plugins from being used with a command:

npx vue-cli-service build --skip-plugins pwa

By giving a list of plugin names separated by commas or by repeating the argument, you can skip more than one plugin:

npx vue-cli-service build --skip-plugins pwa,apollo --skip-plugins eslint

The same method used to resolve plugin names during installation is used here.

# these are all equivalent npx vue-cli-service build --skip-plugins pwa npx vue-cli-service build --skip-plugins @vue/pwa npx vue-cli-service build --skip-plugins @vue/cli-plugin-pwa

Step 7: Caching and Parallelization

cache-loader Vue/Babel/TypeScript compilers by default. You will find node modules/.cache is where files are cached; if you're having compilation problems, always try removing the cache directory first.

When the computer has more than one CPU core, the thread-loader will be activated for Babel/TypeScript translation.

Git Hooks

@vue/cli-service pre installs yorkie that enables you to specify Git hooks with the help of the gitHooks field in your package-json:

json

{   "gitHooks": {     "pre-commit": "lint-staged"   },   "lint-staged": {     "*.{js,vue}": "vue-cli-service lint"   } }

Configuration without Ejecting

vue create projects don't require any additional configuration and are ready to go. Most of the time, all you have to do is choose the features you want from the interactive prompts because the plugins are made to cooperate with one another.

We are aware, however, that it is impractical to meet every requirement and that a project's requirements may evolve over time. Without ever having to eject, Vue CLI projects let you configure practically every aspect of the tooling. For more information, go to the Config Reference.