Vue CLI

Creating a Vue project...

Previously

vue init

The good old'

Lots of templates

Scaffolding only

Eject only

Difficult upgrades

Enter the next best thing...

Vue CLI 3.0

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

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

Add new features after project creation

Plugins can be upgraded thus upgrading the app

vue create

is not the end of the story...

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

...

Something is still missing?

Community plugins

130+ plugins already available

Create your own!

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

Sneak peek

More info

cli.vuejs.org

Your logo here

Guillaume Chau

@Akryum

github.com/Akryum

Thank you!

A look at Vue CLI 3 and its UI

By Guillaume Chau

A look at Vue CLI 3 and its UI

Vue CLI 3.0 is full-packed of new features, including a graphical user interface! Let's take a deeper look at it!

  • 6,471