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
Hands off! No Eject!
Developer Friendly
BONUS!
> vue ui
🤔🤔🤔
But wait! isn't this call vuecli
References
Vue Cli 3
By ringo kam
