web-dev-qa-db-fra.com

Quel est le but de main.js & App.vue dans Vue App

Je ne comprends pas le but exact de chaque fichier.
Supposons que je veuille mettre le code d'authentification, où dois-je le placer, dans main.js ou App.vue

vue.jsvue-cli
2
Sanyam Jain

Je pense que vous pourriez manquer certaines des bases de la structure de VueJS et où et/ou comment mettre en place des fonctionnalités telles que l'authentification. Il pourrait être utile de parcourir à nouveau leur Introduction pour consolider vos connaissances.

Pour répondre plus directement, lorsque vous exécutez une application Vue JS, vous devez avoir une page html de base (comme index.html) comme point d'entrée et l'initialisation de votre application Vue chargée dans un <script> dans cette page.

Lorsque vous écrivez une application J= Vue JS, vous pouvez choisir de le faire en JavaScript pur, en TypeScript ou au format de composant .vue qui combine le HTML, CSS et JavaScript dont vous avez besoin pour définir les composants. Le Le format .vue n'est pas exécuté directement, il doit d'abord être compilé en JavaScript par un packager comme WebPack puis chargé par votre point d'entrée.

App.vue

Il s'agit généralement de la racine de votre application définie au format Vue Composant. C'est généralement quelque chose qui définit le modèle de votre page:

<template>
  <div id="app">
    <SideBar /> 
    <router-view v-if="loaded" /> 
  </div>
</template>

<script>
import SideBar from "./pages/SideBar";

export default {
  components: { SideBar },
  computed: {
    loaded() {
      return this.$store.state.loadState == "loaded";
    }
  }
};
</script>

main.js

Il s'agit généralement du fichier JavaScript qui initialise ce composant racine en un élément de votre page. Il est également responsable de la configuration des plugins et des composants tiers que vous souhaiterez peut-être utiliser dans votre application:

import Vue from "vue";
import { store } from "./store/store";
import router from "./router";
import App from "./App.vue";

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount("#app");

index.html

La page d'index fournit votre point d'entrée en html fournissant un élément pour que VueJs se charge et importe main.js pour initialiser votre application.

<!-- the html element that hosts the App.vue component -->
<div id="app"></div>

<!-- built files will be auto injected -->
<script type="text/javascript" src="main.js"></script>

Sur une autre note, un endroit décent pour mettre votre logique d'authentification est dans le routeur où vous pouvez ajouter des gardes de navigation pour restreindre l'accès aux pages en fonction de l'état d'authentification actuel et envoyer vos utilisateurs à une page de connexion:

// GOOD
router.beforeEach((to, from, next) => {
  if (!isAuthenticated) next('/login')
  else next()
})
4
Tom 'Blue' Piddock