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>