@alonso.lares/vue-components v0.1.2

WWW-Template

Plantilla web basada en Vue 2.0 y V-Yokozuna

• WWW-Template
  • Primeros Pasos
    • Organización del Proyecto
    • Iniciar Aplicación
    • Construir Artefacto
  • Agregar Dependencias
  • Agregar Vista
  • Agregar Servicio
  • Agregar Componente
  • SASS
  • Extras
    • Variables de entorno

Primeros Pasos

Organización del Proyecto

El proyecto está organizado de la siguiente manera

.
├── babel.config.js
├── Dockerfile
├── nginx.tmpl
├── package.json
├── package-lock.json
├── postcss.config.js
├── public
│   ├── favicon.ico
│   └── index.html
├── README.md
├── src
│   ├── App.vue
│   ├── assets
│   │   ├── fonts
│   │   ├── img
│   │   └── styles
│   ├── core
│   │   ├── components
│   │   ├── config
│   │   ├── directives
│   │   ├── filters
│   │   ├── polyfills
│   │   └── service
│   ├── main.js
│   ├── router.js
│   ├── vendor.js
│   └── views
│       └── welcome
└── vue.config.js

Donde

• src: Mantiene los archivos de código fuente de la aplicación.

  • App.vue: Es el componente principal de la aplicación
  • assets: Contiene los archivos que son recursos simples para el uso de la aplicación, css, imágenes, etc. - core: Contiene los archivos donde se deposita la lógica de componentes que serán utilizados de manera general por las vistas de la aplicación
    • components: Contiene los componentes de la aplicación.
    • config: Contiene los archivos de configuración.
    • directives: Contiene los archivos de directivas,
    • filters: Contiene los archivos de filtros.
    • polyfills: Contiene los archivos de retrocompatibilidad de js.
    • services: Contiene los archivos de servicios. - pages: Contiene los archivos de lógica y plantillas de las vistas.
  • main.js: Contiene la lógica de bootstraping de la aplicación.
  • router.js: Módulo donde se confiugra el router de la aplicación.
  • vendor.js: En el se declaran las liberías que se importan para ser utilizadas en la aplicación.

  • views: Contiene las vistas de la aplicación

    • welcome: Vista por defecto de la aplicación

Iniciar Aplicación

Para iniciar el proyecto primero debes instalar las dependencias del mismo con el siguiente comando

$ npm install

Y para levantar el servidor de desarrollo de la aplicación debes ejecutar la siguiente instrucción en la consola

$ npm start

Construir Artefacto

Para construir el artefacto de la aplicación en la consola debes ejecutar los siguientes comandos

$ npm run build
$ docker build -t [namespace]/[nombre-imagen] .

Es necesario que tengas instalado docker en tu equipo consulta la siguiente liga para obtener más información sobre cómo instalar docker: https://docs.docker.com/install/. Para obtener más información sobre namespace de docker consulta la siguiente liga: https://success.docker.com/article/introduction-to-user-namespaces-in-docker-engine

Agregar Dependencias

Si requieres agregar una dependencia al proyecto debes asegurarte que la misma exista dentro del reposositorio npm que estés utilizando.

El siguiente ejemplo muesta cómo agregar angular-translate

$ npm install angular-translate --save

En el archivo vendor.js

src/
└── vendor.js

Importar la libería de angular translate

vendor.js;

import Vue from "vue";

De ser necesario deberás registrar el módulo de la libería en el módulo de tu aplicación.

Agregar Vista

El siguiente ejemplo muestra cómo puedes agregar una vista

Agregamos los archivos necesarios al ruta de pages

src/views/
└── welcome
    ├── welcome.js
    ├── welcome.vue
    └── welcome.init.js

welcome.js;

export default {
  name: "Welcome",
  data() {
    return {};
  },
  methods: {},
  mounted() {}
};

welcome.html

<template>
  <main class="welcome">HELLO WORLD!</main>
</template>
<script src="./welcome.js"></script>

welcome.init.js;

import Router from "../../router";

Router.addRoutes([
  {
    path: "/",
    name: "welcome",
    component: () => import("./welcome.vue")
  }
]);

import Router from '../../router'; importa el módulo de router al archivo de javascript para poder asociar el componente a la aplicación.

Agregar Servicio

El siguiente ejemplo muestra cómo agregar un servicio

Agregamos el archivo del servicio a la ruta de servicios

src/core/services/
└── client.js

client.js;

const client = {};

export default client;

importamos el servicio donde requieramos usarlo

welcome.js;

import client from "../core/services/client";

export default {
  name: "Welcome",
  data() {
    return {};
  },
  methods: {},
  mounted() {
    client.get("http://api/objects");
  }
};

Agregar Componente

El siguiente ejemplo muestra cómo agregar un componente

Agregamos los archivos del componente a la ruta de componentes

src/app/component/
└── side-nav
    ├── side-nav.vue
    └── side-nav.js

side - nav.js;

const sideNav = {
  name: "side-nav",
  data() {
    return {};
  }
};

side-nav.vue

<template>
  <div class="side-nav"></div>
</template>

<script src="./side-nav.js"></script>

SASS

Los archivos de sass deben colocarse dentro de la ruta de src/assets/style/sass

El siguiente ejemplo muestra cómo debe agregarse un archivo de sass

src/assets/styles/sass/
├── index.scss
└── components
    └── _side-nav.scss

index.scss

@import 'components/side-nav';

index.scss es un archivo boostraping donde se registran los estilos para ser descubiertos por el servicio de compilación.

Para importar estilos de una libería instalada a través de npm debe realizarse de la siguiente manera:

El siguiente ejemplo muestra cómo agregar bootstrap

$ npm install bootstrap-sass --save

index.scss

$icon-font-path: '~bootstrap-sass/assets/fonts/bootstrap/';

@import '~bootstrap-sass/assets/stylesheets/bootstrap';
@import '~bootstrap-daterangepicker/daterangepicker.css';

Extras

Variables de entorno

Este proyecto está configurado para permitir el usuario de variables de entorno al ser desplegado dentro de un contenedor de docker.

El siguiente ejemplo muestra cómo agregar una variable de entorno

En nuestro archivo de ambiente agregamos la variable de entorno que queremos agregar.

env.production;

VUE_APP_APIURL = "API_URL";

En el archivo nginx.tmpl agregamos el sub_filter de la variable

nginx.tmpl

	...

	http {

    	server {
        	sub_filter "api_url" "${API_URL}";
    	}
	...

}

Usando la variable de entorno

client.js;

const apiUrl = process.env.VUE_APP_APIURL;

const client = {
  get: function(path, config) {
    return manageCallback(axios.get(apiUrl + path, config));
  }
};

export default client;