moncv-ArnaudPl

Réalisation d'un CV avec l'utilisation de webpack et jQuery dans le cadre du cours Projet de Technologies Web donné par M. Fritscher. Le CV est visible à cette adresse.

Installation du projet

# installer toutes les dépendences
$ npm install

# lancer le serveur local avec rafraîchissement automatique à l'adresse localhost:8080
$ npm run dev

# build pour la production
$ npm run build

# build pour la production avec un rapport d'analyse
$ npm run build --report

# déployer sur la branche gh-pages de l'association HEG-Web sur Github visible à l'adresse heg-web.github.io/moncv-ArnaudPl (tous les fichiers doivent avoir été commit)
$ npm run deploy

Technologies utilisées et configurations réalisées

Vue-cli
- Installation du package
  - $ npm i -g vue-cli
- Initialiser le projet (scaffold) avec le template webpack
  - $ vue init webpack moncv
  - Répondre aux différentes questions selon les préférences
- Suppression de VueJs car on ne l'utilise pas de ce projet
  - $ npm un vue --save
Configuration d'ESLint
- Ajouter ces lignes au fichier .eslintrc.js

{
  ...,
  "rules": {
    // enforce semi
    "semi":  ["error", "always"],
    // use 4 spaces indent
    "indent": ["error", 4],
    // make rule equal vs code auto formatting
    "space-before-function-paren": ["error", {
        "anonymous": "always",
        "named": "never"
    }],
    ...
  },
  ...
}

Corriger la configuration de webpack pour le debug
- Remplacer cette ligne dans le fichier build/webpack.dev.conf : devtool: 'source-map',
Utiliser des LF aussi sur Windows
- Créer le fichier .gitattributes à la racine du projet avec ce contenu : * text eol=lf
bootstrap v3.3 sans dépendance jQuery
- bootstrap.native
  - Installation du package
    - $ npm i bootstrap.native@3.3.7 --save
- bootstrap-only-css
  - Installation du package
    - $ npm i bootstrap-only-css --save
- Importer bootstrap.native et bootstrap-only-css dans le projet
  - Ajouter ces deux lignes au fichier moncv/src/main.js
    - import 'bootstrap.native';
    - import 'bootstrap-css-only/css/bootstrap.min.css';
jQuery
- Installation du package
  - $ npm i jquery --save
- Charger jQuery partout pour éviter de devoir l'importer sur chaque script
  - Ajouter plugins: [ new webpack.ProvidePlugin({ $: "jquery", jQuery: "jquery" }) ], dans le fichier moncv/build/webpack.base.conf.js
push-dir
- Installation du package
  - $ npm i push-dir --save-dev
- Ajouter le script pour envoyer sur la branch gh-pages au fichier package.json
  - "deploy": "push-dir --dir=dist --branch=gh-pages --cleanup --verbose",
Timeline.css
Chart.js
- Installation du package
  - $ npm i chart.js --save
- Importer le package dans moncv/src/main.js
  - import Chart from 'chart.js';
jquery-smooth-scroll
- Installation du package
  - $ npm i jquery-smooth-scroll --save
- Importer le package dans moncv/src/main.js
  - import 'jquery-smooth-scroll';
nav-scroll-spy
- Installation du package
  - $ npm i nav-scroll-spy --save
- Importer le package dans moncv/src/main.js
  - import NavScrollSpy from 'nav-scroll-spy';

ArnaudPl/moncv-ArnaudPl

moncv-ArnaudPl

Installation du projet

Technologies utilisées et configurations réalisées