Installation

Vue Dot est la librairie qui porte les composants du Design System.

Pour l’ajouter dans votre projet, vous devez l’installer :

yarn add @cnamts/vue-dot

npm install @cnamts/vue-dot

Ensuite, vous pouvez créer un fichier plugin src/plugins/vue-dot.ts avec le contenu suivant :

// src/plugins/vue-dot.ts
import Vue from 'vue';

// Import Vue Dot styles
import '@cnamts/vue-dot/dist/vue-dot.css';

// Import Vue Dot from src
import VueDot from '@cnamts/vue-dot';

Vue.use(VueDot);

Puis importer ce fichier dans le fichier d’entrée de votre application :

// src/main.ts
import './plugins/vue-dot';

Le FormBuilder est un ensemble de composants pour afficher des formulaires. Avant de l’installer, vous devez installer Vue Dot.

Pour l’ajouter dans votre projet, vous devez l’installer :

yarn add @cnamts/form-builder

npm install @cnamts/form-builder

Ensuite, vous pouvez créer un fichier plugin src/plugins/form-builder.ts avec le contenu suivant :

// src/plugins/form-builder.ts
import Vue from 'vue';

import FormBuilder from '@cnamts/form-builder';

Vue.use(FormBuilder);

Puis importer ce fichier dans le fichier d’entrée de votre application :

// src/main.ts
import './plugins/form-builder';

Vue Dash est le plugin Vue CLI qui génère le template d’un nouveau projet.

Pour l’ajouter dans un projet existant, vous devez l’installer :

yarn add -D @cnamts/vue-cli-plugin-vue-dash

npm install -D @cnamts/vue-cli-plugin-vue-dash

puis l’invoquer :

vue invoke @cnamts/vue-dash

Par défaut, lorsque le plugin est invoqué manuellement, il n’applique pas le template afin de ne pas écraser les fichiers du projet, mais vous pouvez utiliser l’option --render-template pour l’appliquer :

vue invoke @cnamts/vue-dash -- --render-template

Tree-shaking de Vue Dot

Par défaut, tous les composants de Vue Dot sont importés et enregistrés de manière globale.

Vous pouvez réduire la taille de votre application finale en n’important que les composants que vous utilisez.

Pour cela, vous devez utiliser le loader vueDotLoader en combinaison avec le plugin Vuetify Loader :

// vue.config.js
const { vueDotLoader } = require('@cnamts/vue-cli-plugin-vue-dash/vueDotLoader');

module.exports = {
	chainWebpack: config => {
		// Auto-load Vue Dot components
		config.plugin('VuetifyLoaderPlugin').tap(vueDotLoader);
	}
};

Les Design Tokens sont un ensemble de variables qui représentent les décisions de Design et remplacent les valeurs statiques dans le code.

Pour les utiliser, vous devez les installer :

yarn add -D @cnamts/design-tokens

npm install -D @cnamts/design-tokens

Ensuite, vous pouvez importer les tokens dont vous avez besoin :

import { tokens } from '@cnamts/design-tokens';
console.log(tokens.pageWidth); // 1440px

Le package ESLint Config contient des configurations pour la qualité de code pour les projets JavaScript et TypeScript.

Pour utiliser une des configurations, vous devez installer le package ainsi qu’ESLint :

yarn add -D eslint @cnamts/eslint-config

npm install -D eslint @cnamts/eslint-config

Ensuite, vous pouvez utiliser la configuration dont vous avez besoin en créant un fichier .eslintrc.js :

module.exports = {
	extends: '@cnamts/eslint-config'
};

Pour la configuration TypeScript :

module.exports = {
	extends: '@cnamts/eslint-config/typescript'
};

Le package ESLint Config Vue contient des configurations pour la qualité de code pour les projets Vue.js.

Pour utiliser la configuration, vous devez installer le package ainsi qu’ESLint et le plugin ESLint Vue :

yarn add -D eslint eslint-plugin-vue @cnamts/eslint-config-vue

npm install -D eslint eslint-plugin-vue @cnamts/eslint-config-vue

Ensuite, vous pouvez utiliser la configuration en créant un fichier .eslintrc.js :

module.exports = {
	extends: '@cnamts/eslint-config-vue'
};

Si vous utilisez la version 7 d’ESLint, vous devez configurer le parser pour utiliser vue-eslint-parser :

module.exports = {
	extends: '@cnamts/eslint-config-vue',
	parser: 'vue-eslint-parser'
};