Pour commencer

Installation de vuejs

Vuejs nécessite l'installation de Nodejs et npm.

On utilise alors npm pour installer vuejs (en globale).

npm install --global vue-cli

Démarrer un package

Récupération de la structure

Dans notre cas, on n'initialise pas un projet en utilisant npm, mais on reprend les fichiers nécessaires à partir d'un package d'Aeris par exemple Le package aeris-commons-components-vjs et on ajoute un fichier vue pour notre premier composant (mon-composant.vue).:

|- src
|   |- mon-composant
|   |-    |- mon-composant.vue (+)
|   |- l.min.js
|   |- mains.js  (*)
|- .babelrc
|- index.html  (*)
|- package.json (*)
|- webpack.config.js

Les fichiers webpack.config.js et .babelrc sont des fichiers de configuration à laisser tel quel pour le moment. Le fichier src/l.min.js est un loader à ne pas modifier.

Le fichier package.json va être adapté à notre projet et modifier suivant les futurs dépendances.

Les fichiers index.html, src/main.js seront modifié pour mes nouveaux composants Mon premier composant sera codé dans le fichier mon-composant/mon-composant.vue.

Les modifications de départ

Le fichier package.json

Dans ce fichier, on ne va modifier que les metadatas (name, description, version, author). On garde les dépendances à vue, vue-custom-element, vue-i18n et vue-resource, même si on ne va pas les utiliser toute de suite. On préserve aussi les dépendances pour le développement.

{
  "name": "mes-composants",
  "description": "Un test de composants . ",
  "version": "0.1.0",
  "author": "epointal",
  "private": false,
  "scripts": {
    "dev": "cross-env NODE_ENV=development webpack-dev-server --progress --open --hot --inline",
    "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
  },
  "dependencies": {
    "vue": "^2.3.4",
    "vue-custom-element": "^1.2.1",
    "vue-i18n": "^7.0.5",
    "vue-resource": "^1.3.4"
  },
  "devDependencies": {
    "@kazupon/vue-i18n-loader": "^0.1.1",
    "babel-core": "^6.0.0",
    "babel-loader": "^6.0.0",
    "babel-preset-env": "^1.5.1",
    "clean-webpack-plugin": "^0.1.16",
    "cross-env": "^3.0.0",
    "css-loader": "^0.25.0",
    "exports-loader": "^0.6.4",
    "file-loader": "^0.9.0",
    "style-loader": "^0.18.2",
    "vue-loader": "^12.1.0",
    "vue-template-compiler": "^2.3.3",
    "webpack": "^2.6.1",
    "webpack-dev-server": "^2.4.5"
  }
}

Le fichier de mon premier composant "mon-composant.vue"

Notre premier composant va être un bouton dont on peut choisir la valeur.

<template>
<span class="aeris-mon-composant">
   <input type="button" :value="value"/>
</span>
</template>

<script>
export default {
  props: {
	 value:{
		 type:String,
		 default:"Sauvegarder"
	 }
  },
  
}
</script>

<style>
.aeris-mon-composant {
	 display: inline-block
}
.aeris-mon-composant input[type="button"]{
    background-color:#cb3609;
    color:#fff;
}
</style>

Le fichier main.js

Il sert à importer les composants. On va donc importer notre composant et l'enregistrer dans le tableau des composants Aeris.

require("exports-loader?!./l.min.js")

import Vue from "vue";

import vueCustomElement from "vue-custom-element";
Vue.use(vueCustomElement);

//pour la traduction (non-utilisé pour le moment)
import VueI18n from 'vue-i18n';
Vue.use(VueI18n);

// Inutilisé ici
//import VueResource from 'vue-resource';
//Vue.use(VueResource);

//J'importe mon composant
import MonComposant from "./mon-composant/mon-composant.vue";

//Je préserve les fichiers à charger bien qu'ils ne soient pas du tout tous utiles ici
ljs.addAliases({
	dep: ["https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css", 
"https://rawgit.com/aeris-data/aeris-commons-fonts/develop/font/aeriscommmonsfonts.css", 
"https://cdnjs.cloudflare.com/ajax/libs/document-register-element/1.4.1/document-register-element.js", "https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment-with-locales.min.js",
"https://cdnjs.cloudflare.com/ajax/libs/moment-range/3.0.3/moment-range.min.js"]
})
ljs.load("dep", function() {
	
	window.moment = moment
	window["moment-range"].extendMoment(moment);
	
	// le tableau des composants Aeris
	if (!window.registredAerisElements) {
		window.registredAerisElements = [];
	}

        //J'enregistre mon composant
	Vue.customElement("mon-composant", MonComposant);
	window.registredAerisElements.push("mon-composant");
)}

Le fichier index.html

Il est utilisé pour tester mes composants, donc il appelle mon composant:

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="utf-8">
    <title>Vue Example</title>
  </head>
  <body> 
  <h1>Test 2 un essai de web component</h1>
	<div>
	<!-- J'utilise mon composant -->
	<mon-composant value="Truc"></mon-composant>
	<mon-composant value="Machin"></mon-composant>
	</div>
        <!-- le fichier build est créé lorsqu'on lance la commande build -->
	<script src="dist/build.js"></script>  
  </body>
</html>

Installation

Pour installer tous les modules déclarés dans package.json. Dans mon dossier, j'exécute:

npm install

Tous les paquets “node” dont dépend notre package sont alors installés dans le répertoire node_modules.

Mon premier test

Pour tester notre composant on lance:

npm run dev

Vuejs lance alors la construction de mon build, puis lance mon navigateur par défaut et affiche ma page index.html!

A chaque modification des sources, le build est “recompilé” et la page rechargée.

Intégrer mon composant dans une page quelconque.

Pour obtenir le fichier de production pour notre composant, il faut lancer la commande:

npm run build

Le fichier dist/test2.0.1.0.js est alors créé, c'est lui qu'il faut charger pour permettre l'interprétation de mon(mes) composant(s) en prod.

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="utf-8">
    <title>Vue Example</title>
  </head>
  <body> 
  <h1>Test 2 un essai de web component</h1>
    <div>
    <!-- J'utilise mon composant -->
    <mon-composant value="Truc"></mon-composant>
    <mon-composant value="Machin"></mon-composant>
    </div>
        <!-- le fichier final test2.0.1.0.js -->
    <script src="dist/test2.0.1.0.js"></script>  
  </body>
</html>

Le résultat: