/clean-vue-cli-setup

Clean Vue cli setup - Initialize a project with exemples : Vuetify layout, API calls, logger, ...

Primary LanguageJavaScript

clean-vue-setup

A Vue.js project

Création

Ce projet a été créé avec Vue Cli et le template webpack qui propose la compilation avec Webpack, Babel, le hot reload, le code linting, les tests unitaires et les tests fonctionnels.

$ npm install -g vue-cli

$ vue init webpack <project-name>

A ce Cli, ont été ajoutés :

  • axios, pour les requêtes HTTP
  • vuejs-logger, un logger pour Vue
  • vuetify, un Framework Vue de présentation (comme Bootstrap). Vuetify est basé sur Matérial.
  • Un système de services. Répertoire services
  • un layout de base
  • un exemple d'appel HTTP

Build Setup

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

# build for production and view the bundle analyzer report
npm run build --report

# run unit tests
npm run unit

# run e2e tests
npm run e2e

# run all tests
npm test

For a detailed explanation on how things work, check out the guide and docs for vue-loader.

Architecture

L’application est composée d’un fichier main.js servant de point d’entrée, d’un fichier index.html affichant votre application et de composants sous la forme de fichiers .vue. De base vous aurez 2 composants, App.vue qui sera votre root component et Hello.vue qui est votre Hello world. Hello.vue est render dans App.vue avec la ligne : .

En effet, vue-router (répertoire router) gère les routes. Par défaut, on indique que Hello.vue est accessible au chemin "/", à la racine.

Vous avez un répertoire components pour vos composants, un répertoire assets pour vos images, css, etc et un répertoire services pour mettre tous vos services, Rest, etc. Le répertoire config permet de gérer toute la configuration : port, url, transpileur, etc, mais aussi les variables globales. Le répertoire mixins regroupe les mixins. Dans Vue, les mixins sont des "morceaux de component" qui servent à être injectés dans d'autres components. Un exemple est utilisé avec le ToasterMixin injecté dans le component Book.vue.

Les fichiers .vue permettent de définir des Single File Components réutilisables et de bien découper votre application. Ces fichiers encapsulent le code Javascript, le template et le CSS de leur composant respectivement dans des balises <script>, et <style>. Par defaut les composants sont développés en ES6 qui sera transpilé grâce à Babel.

Un attribut scoped sur la balise de style vous permettra de limiter le CSS à son composant uniquement. Vous pouvez néanmoins tout à fait gérer votre style globalement dans des fichiers CSS inclus depuis le fichier index.html ou compiler du SASS ou du LESS en configurant Webpack dans le répertoire build.

Grâce au hot reload, la moindre modification de code rechargera automatiquement votre navigateur.