Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Vue CLI 3

nickhall
December 27, 2018
720

Vue CLI 3

A (brief) tour of the features of the recently-released Vue CLI

nickhall

December 27, 2018
Tweet

Transcript

  1. 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!
  2. 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
  3. 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
  4. 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.
  5. 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
  6. 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
  7. A rich collection of official plugins Easily integrate widely used

    libraries built following established best practices
  8. 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