Vue CLI

Creating a Vue project...

Previously

vue init

The good old'

Reduce configuration work

vue init

Getting started as fast as possible

Templates

webpack

webpack-simple

browserify

browserify-simple

simple

vue init

?

Lots of templates

vue init

(but you can't combine them easily)

Only a scaffolding tool

vue init

(with late prototyping experiments)

Eject-only

vue init

(you are left on your own)

Difficult upgrades

vue init

(for your app and for template forks)

Enter the next best thing...

Vue CLI 3.0

More than 6 months in the making

(out now!)

yarn global add @vue/cli
yarn global remove vue-cli

Install it now!

How is it different?

A complete rewrite from scratch

An entirely new architecture based on plugins

A powerful and extensive API

Why Vue CLI 3.0?

Reduce configuration fatigue

Mix all kind of tools together

Include best practices

The Ultimate Objective...

The standard build toolchain for Vue

Vue CLI 3.0

Feature-rich

vue create

Built-in

zero-config

fully-featured

Webpack 4

Babel 7

PostCSS

SASS

Stylus

LESS

Auto-generated HTML

Modern mode

Multi-page support

Library target

Web component target

All of this...

Out-of-the-box!

No Template

PLUGINS

Pick

the additional features

you want...

Typescript

ESLint/TSLint/Prettier

Vue Router

Vuex

PWA

Want to write

tests?

Cypress

Jest

Mocha

Nightwatch

Save your selection into presets and share them with the World!

Add new features after project creation

Plugins can be upgraded thus upgrading the app

vue create

is not the end of the story...

vue create

Source code

@vue/cli-service

plugins

Generators

Your project

vue-cli-service <command>

@vue/cli-service

@vue/cli-plugin-typescript

@vue/cli-plugin-eslint

@vue/cli-plugin-pwa

Your project

Creation

Development

Production build

Deployment

...

Zero-config by default

Configure and customize if needed

No need to eject!

In a hurry?

Instant Prototyping

vue serve MyApp.vue
vue build MyApp.vue

Something is still missing?

Community plugins

130+ plugins already available

Create your own!

Generator API

Service API

Prompts API

Read the Docs

One more thing...

Vue CLI

UI

But CLI is "Command Line Interface"?!?

Vue CLI 3.0 is more complex

More choices

More commands

More options

But we still shoot for

Ease of Access

with simple-to-use tools

So let's

Interfacize

(thanks, @Compulves)

Everything

More context

Detailed explanations

Discoverability

Better prompts UI

Localization

I started with a UI framework

yarn add @vue/ui

Homogeneous look-and-feel for Vue org apps

And after a few months of work...

vue ui

Graphical User Interface (web app)

Node.js GraphQL Server

No

electron

needed

That's not all...

UI Plugin API

Configuration

Task

Page

Suggestion

Custom components

Shared data

Actions

Hooks

What's next?

Babel 7.0 updates

vue upgrade

Better error overlay

Settings page

Command box and keyboard shortcuts

Global UI Plugins

Some secret features

More info

cli.vuejs.org

Your logo here

Guillaume Chau

@Akryum

github.com/Akryum

Thank you!

Vue CLI 3.0

By Guillaume Chau

Vue CLI 3.0

Learn more about the completely new CLI for Vue.js!

  • 12,009