Vue.js en 15 minutos*

* o casi... 🤓

0. ReQUISITOS

1. Node

2. NPM

1. Clonar REpositorio

$ git clone git@git.fullcircle.es:around/around-corporate.git

2. INSTALAR DEPENDENCIAS

$ npm install

3. Levantar servidor local

$ npm run serve

[...]

You may use special comments to disable some warnings.
Use // eslint-disable-next-line to ignore the next line.
Use /* eslint-disable */ to ignore all warnings in a file.

  App running at:
  - Local:   http://localhost:8081/
  - Network: http://192.168.1.37:8081/

  Note that the development build is not optimized.
  To create a production build, run yarn build.

4. Estructura básica

.
├── Readme.md
├── node_modules
├── package-lock.json
├── package.json
├── public
├── src
└── tests

Raíz

4. Estructura básica

.
├── favicon.ico
├── img
│   └── icons
├── index.html
└── manifest.json

public

4. Estructura básica

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="shortcut icon" href="<%= webpackConfig.output.publicPath %>favicon.ico">
    <script src="https://js.stripe.com/v3/"></script>
    <title>around-corporte</title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but around-corporte doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

index.html

4. Estructura básica

.
├── App.vue
├── assets
│   └── logo.png
├── components
│   └── StripeCard.vue
├── http-common.js
├── main.js
├── registerServiceWorker.js
├── router.js
├── services
│   └── form.js
├── store.js
└── views
    ├── About.vue
    ├── Form.vue
    ├── Form2.vue
    └── Home.vue

src

5. Vistas

<template>
  <div class="home">
    <!-- <HelloWorld msg="Welcome to Your Vue.js App" /> -->
    <carousel :navigationEnabled="true">
      <!-- {{buildSlideMarkup(10)}} -->
      <slide class="slide1">
        Slide 1 Form
      </slide>
      <slide class="slide2">
        Slide 2 Form
      </slide>
    </carousel>
  </div>
</template>

<script>
// @ is an alias to /src
import { Carousel, Slide } from 'vue-carousel'

export default {
  name: 'home',
  components: {
    Carousel,
    Slide
  }
}
</script>

<style lang="scss">
.slide1 {
  background-color: rgb(202, 94, 94);
  color: white;
  font-size: 3em;
  width: 100%;
}
.slide2 {
  width: 100%;
  background-color: rgb(94, 202, 139);
  color: white;
  font-size: 3em;
}
</style>

Home

6. Componentes

<template>
	<div>
  		<div ref="card"></div>
  		<button @click.prevent="purchase()">Pagar</button>
  	</div>
</template>

<script>
let stripe = Stripe(`YOUR_STRIPE_PUBLISHABLE_KEY`),
  elements = stripe.elements(),
  card

export default {
  mounted: function () {
    card = elements.create('card')
    card.mount(this.$refs.card)
  },
  methods: {
	  purchase: function () {
	    stripe.createToken(card).then(function (result) {
	      	if (result.error) {
		      // Inform the customer that there was an error.
		      var errorElement = document.getElementById('card-errors')
		      errorElement.textContent = result.error.message
		    } else {
		      // Send the token to your server.
		      this.stripeTokenHandler(result.token)
		    }
	    })
	  },
	  stripeTokenHandler: function () {
	  	// Insert the token ID into the form so it gets submitted to the server
      var form = document.getElementById('payment-form')
      var hiddenInput = document.createElement('input')
      hiddenInput.setAttribute('type', 'hidden')
      hiddenInput.setAttribute('name', 'stripeToken')
      hiddenInput.setAttribute('value', token.id)
      form.appendChild(hiddenInput)

      // Submit the form
      form.submit()
	  }
  }
}
</script>

Stripe Card

7. Librerías externas

$ npm install bootstrap jquery --save

Bootstrap / jquery

// main.js

import './../node_modules/jquery/dist/jquery.min.js';
import './../node_modules/bootstrap/dist/css/bootstrap.min.css';
import './../node_modules/bootstrap/dist/js/bootstrap.min.js';

5. Organizando ficheros

assets
├── css
│   └── main.css
└── logo.png

CSS's

/* eslint-disable no-new */

<template>
  <div id="app">
    <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link> |
      <router-link to="/form">Form</router-link> |
      <router-link to="/form2">Form2</router-link> |
    </div>
    <router-view/>
  </div>
</template>

<style lang="scss">
    @import 'src/assets/css/main.css';
</style>

Further reading

 

Vue en 15 minutos

By mgmerino

Made with Slides.com

Vue en 15 minutos

Vue(lvo) en 15 minutos

  • 1,101

More from mgmerino