Slide 1

Slide 1 text

Vue CLI 3 It’s pretty cool Nick Hall

Slide 2

Slide 2 text

Me - Nick (USA ) - Consumer (AskDoctors ), AI

Slide 3

Slide 3 text

Vue who? - “Vue (pronounced /vjuː/, like view) is a progressive framework for building user interfaces. Unlike other monolithic frameworks, Vue is designed from the ground up to be incrementally adoptable.” - Vue docs - Web framework like React, Angular - Now more github stars than React!

Slide 4

Slide 4 text

Vue CLI 3: what is it? - Command line utility for scaffolding Vue apps (like create-react-app) - Pre-3: Simple templates for getting started with a Vue project - 3: “Vue CLI is a full system for rapid Vue.js development” (docs, emphasis mine) - Full rewrite released in August

Slide 5

Slide 5 text

Vue CLI: The good parts First see these - https://cli.vuejs.org/guide/ - https://medium.com/the-vue-point/vue-cli-3-0-is-here-c42bebe28fbb This presentation is a summary New!! Guillaume Chau’s Vue Fes Japan presentation (with Japanese slides): https://www.youtube.com/watch?v=GMdCf-2kmQE

Slide 6

Slide 6 text

In summary From the docs: ● Interactive project scaffolding via @vue/cli. ● Zero config rapid prototyping via @vue/cli + @vue/cli-service-global . ● A runtime dependency (@vue/cli-service ) that is: ○ Upgradeable; ○ Built on top of webpack, with sensible defaults; ○ Configurable via in-project config file; ○ Extensible via plugins ● A rich collection of official plugins integrating the best tools in the frontend ecosystem. ● A full graphical user interface to create and manage Vue.js projects.

Slide 7

Slide 7 text

Interactive project scaffolding Great command line interface for creating projects Thanks, Evan

Slide 8

Slide 8 text

Zero config rapid prototyping Instantly start writing and using Vue single file components without any setup or hassle using the @vue/cli-service-global package and the `vue serve ` command

Slide 9

Slide 9 text

A runtime dependency that is... - Upgradeable: easy upgrading without micromanaging dependencies - Webpack with sensible defaults: reduce configuration fatigue with automated, sane setup - Configurable via in-project config file: no need to eject to customize config - Extensible via plugins: easily add new official and community-supported functionality

Slide 10

Slide 10 text

A rich collection of official plugins Easily integrate widely used libraries built following established best practices

Slide 11

Slide 11 text

A full graphical user interface to create and manage Vue.js projects A really neat UI!

Slide 12

Slide 12 text

Key features - Out-of-the-box support for webpack: hot module replacement, code splitting, tree shaking, caching, error overlays, etc. - ES2017 transpilation, polyfills with Babel - PostCSS with autoprefixer and CSS preprocessors - TypeScript, PWA, Vue Router and Vuex, ESLint/TSLint/Prettier, unit testing, E2E testing integrations in single command - Extensible configuration without ejecting - GUI - AND MORE

Slide 13

Slide 13 text

Demo