web-dev-qa-db-ja.com

Vue Appのmain.jsとApp.vueの目的は何ですか？

各ファイルの正確な目的がわかりません。
仮に、main.jsまたはApp.vueのどこに認証コードを配置したいのでしょうか。

vue.jsvue-cli
2
Sanyam Jain

VueJSの構造の背後にある基本の一部、および認証などの機能を配置する場所や方法を欠いている可能性があります。あなたの知識を固めるために、彼らの はじめに をもう一度読む価値があるかもしれません。

より直接的に回答するには、Vue JSアプリケーションを実行するときに、エントリポイントとしての基本的なhtmlページ（index.htmlなど）とVueの初期化が必要ですそのページの<script>に読み込まれたアプリ。

Vue JSアプリケーションを作成するときは、純粋なJavaScript、TypeScript、またはHTML、CSS、JavaScriptを組み合わせた.vueコンポーネント形式で作成することを選択でき、コンポーネントを定義する必要があります。 .vue形式は直接実行されません。最初にWebPackなどのパッケージャによってJavaScriptにコンパイルされ、次にエントリポイントによってロードされる必要があります。

App.vue

これは通常、Vueコンポーネントファイル形式で定義されたアプリケーションのルートです。これは通常、ページのテンプレートを定義するものです。

<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

これは通常、このルートコンポーネントをページの要素に初期化するJavaScriptファイルです。また、アプリで使用する可能性のあるプラグインやサードパーティコンポーネントの設定も行います。

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

インデックスページは、VueJがアプリにロードしてmain.jsをインポートしてアプリを初期化するための要素を提供するhtmlのエントリポイントを提供します。

<!-- 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>

別のメモでは、認証ロジックを配置する適切な場所は ルーター内 です。ここで、ナビゲーションガードを追加して、現在の認証状態に基づいてページへのアクセスを制限し、ユーザーをログインページに送ることができます。

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