sakai vue cli

Modèle d'administration Sakai pour Vue

Aperçu en direct

Visitez le site Web de Sakai Vue pour un aperçu en direct.

Commencer

Sakai est un modèle d'application pour Vue basé sur Vue CLI qui fournit des outils standard prêts à l'emploi pour les projets Vue. Pour commencer, clonez ce référentiel depuis GitHub et installez les dépendances avec npm ou Yarn.

 npm install

ou

 yarn

L'étape suivante consiste à exécuter l'application à l'aide du script de service et à accéder à http://localhost:8080/ pour afficher l'application. Ça y est, vous pouvez maintenant commencer le développement de votre application en utilisant le modèle Sakai.

 npm run serve

Scripts CLI Vue

Les commandes suivantes sont dérivées de create-app-app.

 "npm run serve": Starts the development server
"npm run build": Builds the application for deployment.
"npm run lint": Executes the lint checks.
"npm run test:unit": Runs the tests.

Structure

Sakai se compose de 2 parties principales ; la présentation de l'application et les ressources. App.vue dans le dossier src est le composant principal contenant le modèle pour la mise en page de base, tandis que les ressources requises telles que la structure SASS pour la mise en page sont placées dans le dossier src/assets/ .

Composants de mise en page

La mise en page principale est le modèle de App.vue , il est divisé en quelques composants enfants tels que la barre supérieure, le menu et le pied de page. Voici le modèle du composant App.vue qui implémente la logique telle que l'état du menu, les modes de mise en page, etc.

Menu

Le menu est un composant distinct défini dans le fichier AppMenu.vue basé sur l'API PrimeVue MenuModel. Afin de définir les éléments de menu, accédez à la section de données du fichier App.vue et définissez votre propre modèle en tant que structure imbriquée à l'aide de la propriété menu .

Dépendances

Les dépendances de Sakai sont répertoriées ci-dessous et doivent être ajoutées à package.json.

{
    "primevue" : " ~3.12.2 " ,
    "primeicons" : " ~5.0.0 " ,
    "primeflex" : " ~3.1.2 " ,
}

Thème PrimeVue

Sakai utilise les thèmes gratuits Saga, Arya et Vela qui sont distribués dans PrimeVue, mais ils peuvent également être utilisés avec n'importe quel thème PrimeVue, comme le matériel, le vent arrière et le bootstrap, car les couleurs de mise en page sont dérivées du thème utilisé via des variables CSS.

Variables SASS

Si vous souhaitez personnaliser les variables de mise en page, ouvrez le fichier _variables.scss dans le dossier src/layout. La liste est assez courte car la majorité des variables sont dérivées du thème PrimeVue utilisé.

src/actifs/_variables.scss

$fontSize : 1rem;
$b or derRadius : 12px;
$transitionDuration : .2s;