Какова цель main.js & App.vue в приложении Vue - PullRequest
Новая
       61

Какова цель main.js & App.vue в приложении Vue

0 голосов
/ 21 ноября 2019

Я не понимаю точную цель каждого файла.
Предположим, я хочу поместить код аутентификации, где я должен его разместить, в main.js или App.vue

1 Ответ

1 голос
/ 21 ноября 2019

Я полагаю, что вам может не хватать некоторых основ структуры VueJS, а также того, где и / или как использовать такие функции, как аутентификация. Возможно, стоит еще раз пройти через их Введение , чтобы закрепить свои знания.

Чтобы ответить более прямо, при запуске приложения Vue JS вам нужна базовая HTML-страница (например, * 1005). *) в качестве точки входа и инициализации для вашего приложения Vue, загруженного в <script> на этой странице.

Когда вы пишете приложение Vue JS, вы можете сделать это на чистом JavaScript, в TypeScript или вформат компонента .vue, который объединяет HTML, CSS и JavaScript, необходимые для определения компонентов. Формат .vue не запускается напрямую, его нужно сначала скомпилировать в JavaScript с помощью упаковщика, такого как WebPack, а затем загрузить его точкой входа.

App.vue

Обычно это корневой каталогвашего приложения, определенного в формате файла Vue Component. Обычно это то, что определяет шаблон для вашей страницы: 

<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

Страница указателя предоставляет вашу точку входа в html, предоставляяэлемент для загрузки в VueJs и импорта main.js для инициализации вашего приложения. 

<!-- 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()
})
...