Overvue of VueCLI 3

Ringo Kam

> npm i -g @vue/cli

or

> yarn global add @vue/cli

Why Vue CLI 3?

Baseline for all Vue developers

Vue CLI 2.0

Released 3 years ago
Template driven approach

Vue CLI 2.0 problem

Very hands on!
Developer are on the hook to maintain the build process
Add overhead to line of business application

How can we solve this 🤔???

Abstract away the complexity with toolings?

Case Study Angular CLI

inside package.json

From Angular 2 -> 5

6 and beyond

> ng update

Eject Eject Eject

Vue suggested Solution?

Plugin Driven Approach

Lets get started!

> vue init create

although you can still use init by getting @vue/cli-init

After create...

you have 2 options

Use default or saved preset
Mix and match from the available plugins

No more Webpack?!

Vue-CLI-Service

This is the abstraction! it handle all the difficult stuff so you don't have to

Instant prototyping w/ cli service

> npm i -g @vue/cli-service-global

How to Customize?

// vue.config.js
module.exports = {
  configureWebpack: {
    //Anything here will be merge to webpack config
  }
}

Webpack Merge

inspect webpack config with

> vue inspect

Vue Plugin

Service Plugin: mutate Webpack file
Generator API (optional): Add dependency, generate new files
Prompt API (optional): ask user question, answer pass to generator

Add Vue Plugin

find a plugin from cli-plugin-*plugin name*

> vue add pluginName

Text