Vue CLI 3

Transcript

1. Vue CLI 3 It’s pretty cool Nick Hall

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

3. 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!

4. 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

5. 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

6. 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.

7. Interactive project scaffolding Great command line interface for creating projects

   Thanks, Evan

8. 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 <file>` command

9. 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

10. A rich collection of official plugins Easily integrate widely used

    libraries built following established best practices

11. A full graphical user interface to create and manage Vue.js

    projects A really neat UI!

12. 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

13. Demo