Pour commencer

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

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

npm install --global vue-cli

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.

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"
  }
}

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>

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");
)}

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>

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.

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.

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: