VUe CLI 3

https://slides.com/therealdanvega/vuecli

DAN VEGA

http://www.therealdanvega.com

http://www.github.com/cfaddict

http://www.twitter.com/therealdanvega

DAN VEGA

  • Husband / Father
  • Tech Elevator - Curriculum Developer
    • Intro to Vue
  • Lifelong Learner
    • Books / Audiobooks / Podcasts / Courses
  • Teaching
    • Blog / YouTube / Courses
    • 75,000+ Students Worldwide
  • Professional Tinkerer

WHAT IS VUE?

WHAT IS A JAVASCRIPT FRAMEWORK?

JAVASCRIPT FRAMEWORKs

THE PROGRESSIVE JAVASCRIPT FRAMEWORK

  • Approachable
  • Versatile
  • Performant

PROGRESSIVE

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

Vue is a progressive framework for building user interfaces. Unlike other monolithic frameworks, Vue is designed from the ground up to be incrementally adoptable.

APPROACHABLE

Already know HTML, CSS, and JavaScript? Read the guide and start building things in no time!

 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>HTML/CSS/JavaScript</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
  <h1>HTML/CSS/JavaScript</h1>
  <script src="main.js"></script>
</body>
</html>

VERSATILE

An incrementally adoptable ecosystem that scales between a library and a full-featured framework.

  • Core Libraries
    • Vuex
    • Vue Router
    • Vue Test Utils
  • Tooling
    • Devtools
    • Vue CLI
    • Vue Loader

PERFORMANT

20KB min+gzip Runtime
Blazing Fast Virtual DOM
Minimal Optimization Efforts

 

WHAT I LOVE ABOUT VUE

  • Low entry barrier
  • Documentation
  • Ecosystem
  • Community

GETTING STARTED WITH VUE

GETTING STARTED WITH VUE

 

  • CDN
  • VUE CLI
  • CODEPEN
  • CODE SANDBOX

GETTING STARTED WITH VUE:
CDN

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

GETTING STARTED WITH VUE:
VUE CLI

npm install -g @vue/cli
# OR
yarn global add @vue/cli
vue --version

GETTING STARTED WITH VUE: CODEPEN

GETTING STARTED WITH VUE: CODESANDBOX

VUE CLI 3

Command Line Interface (CLI)

INSTALLATION

// you need node/npm installed
node -v
npm -v

// install the Vue CLI
npm install -g @vue/cli

// check Vue CLI version (3.3.0)
vue --version //3.3.0

VUE CLI HELP

VUE CLI: Create NEW PROJECT

vue create hello-world

VUE CLI: Create NEW PROJECT

VUE CLI: Create NEW PROJECT

VUE CLI: Create HELP

vue create --help
Usage: create [options] <app-name>

create a new project powered by vue-cli-service


Options:

  -p, --preset <presetName>       Skip prompts and use saved or remote preset
  -d, --default                   Skip prompts and use default preset
  -i, --inlinePreset <json>       Skip prompts and use inline JSON string as preset
  -m, --packageManager <command>  Use specified npm client when installing dependencies
  -r, --registry <url>            Use specified npm registry when installing dependencies
  -g, --git [message|false]       Force / skip git initialization, optionally...
  -n, --no-git                    Skip git initialization
  -f, --force                     Overwrite target directory if it exists
  -c, --clone                     Use git clone when fetching remote preset
  -x, --proxy                     Use specified proxy when creating project
  -b, --bare                      Scaffold project without beginner instructions
  -h, --help                      Output usage information

VUE CLI UI

vue ui

DEMO TIME

RESOURCES

Continuing the Vue Journey

Learning RESOURCES

  • Awesome Vue
  • Documentation
  • Courses
    • Vue Mastery
    • Vue School
  • Books
    • FullStack Vue
    • VueJS in Action
    • Vue.js (Bleeding Edge Press)
  • Podcasts
    • Views on Vue
    • Vue News (Official Podcast)

VUE ECOSYSTEM

Projects in the Vue ecosystem that might interest you

Q&A

Vue CLI 3

By Dan Vega

Made with Slides.com

Vue CLI 3

VUECLE Meetup Group presentation

  • 101

More from Dan Vega