aelbore

Getting Started

• Install Dependencies

  npm init -y
  npm install --save-dev vue @vue/cli http-server
  

Create Web Component

• Create vue component src/my-component.vue.

  <template>
  

aelbore

const ts = require('typescript');
const fs = require('fs');
const path =  require('path');
const prettier = require('prettier');

const { promisify } = require('util');
const { globFiles, clean, mkdirp } = require('aria-fs');

const writeFileAsync = promisify(fs.writeFile);

aelbore

Getting Started

ng new ng-elements --enable-ivy

Create and Build HelloWorldElements

• Remove all the files in src/app folder
• Add hello-world.ts file in src/app folder
• Add Component

aelbore

Getting Started

ng new ng-elements --enable-ivy

Create and Build HelloWorldElements

• Remove all the files in src/app folder
• Create card.ts file in src/app folder
• Add Component

aelbore

<template>
  <div id="app">
    <div style="text-align:center;margin-bottom:20px;">
      <h1>Welcome to Vue</h1>
      <img width="200" src="https://vuejs.org/images/logo.png" />
    </div>
    <div class="cards">
      <div v-for="(profile, index) in profiles" v-bind:key="index">
        <Card :profile="profile" />
      </div>

aelbore

Testing in Vue

Write lots of tests so people will afraid to delete yout code
  - creator of redux
  
Don't just write tests that let you verify unit works with confidence.
Write tests that let you *delete* that unit of confidence.
  - creator of redux

aelbore

Requirements

• Docker Desktop on Windows (https://docs.docker.com/docker-for-windows/install)
• Mongodb Management Studio (https://robomongo.org/download)

Getting Started

1. Launch Terminal or Command Prompt
2. Type docker --version to check the version of docker
3. Pull docker image type docker pull mongo (this will get the latest version of mongodb)

aelbore

Testing in Vue

Write lots of tests so people will afraid to delete yout code

Why need test?

aelbore

<link href='https://fonts.googleapis.com/css?family=Titillium+Web:400,200,300,600,700' rel='stylesheet' type='text/css'>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<button id="toggleButton">Toggle</button>

<ul class="timeline" id="timeline">
  <li class="li complete">
    <div class="timestamp">
      <span class="author">Abhi Sharma</span>
      <span class="date">11/15/2014<span>
    </div>

aelbore

Horizontal Timeline with Swiper

Horizontal Timeline with SwiperJS

A Pen by Jay on CodePen.

License.