Vue Getting Started

This project is seen in demos including the Pluralsight course "Vue: Getting Started" to help represent a fundamental app written with Vue. The heroes and villains theme is used throughout the app.

by John Papa

Projects

This repository contains several projects. Each project represents a step in the learning experience. Two proejects of note are:

• 02-getting-started/end/vue-heroes - This is the starting point for the app
• xx-final/vue-heroes - This is the ending point for the app

Quick Start

1. Clone this repository

   git clone https://github.com/johnpapa/vue-getting-started.git
   cd vue-getting-started

2. Change to the folder you wish to use

   cd 02-getting-started/end/vue-heroes

3. Install the npm packages

   npm install

4. Run the app!

   npm run serve

Quick Start - npm install for each module

Git bash commands to install npm modules at the beginning of each example

export PARENT_DIR
PARENT_DIR=C:/code/training/vue-getting-started # edit this to match your local git directory

cd $PARENT_DIR/03-data-and-events/begin/vue-heroes | npm install
cd $PARENT_DIR/04-lists-and-conditionals/begin/vue-heroes | npm install
cd $PARENT_DIR/05-interacting-within-a-component/begin/vue-heroes | npm install
cd $PARENT_DIR/06-component-communication/begin/vue-heroes | npm install
cd $PARENT_DIR/07-accessing-data/begin/vue-heroes | npm install
cd $PARENT_DIR/08-routing/begin/vue-heroes | npm install
cd $PARENT_DIR/09-managing-state/begin/vue-heroes | npm install

Git bash commands to install npm modules at the end of each example

cd $PARENT_DIR/02-getting-started/end/vue-heroes | npm install
# copy begin commands and replace `begin` with `end` here 
cd $PARENT_DIR/xx-final/vue-heroes | npm install

Problems or Suggestions

Open an issue here

Resources

• VS Code
• VS Code Extension Marketplace
• VS Code - macOS keys
• VS Code - Windows keys
• Debugging Vue in VS Code