Vue App中main.js & App.vue的目的是什么

Question

我不明白每个文件的确切用途。
假设，我想在 main.js 或 App.vue 中放置身份验证代码，我应该将其放置在哪里

Answer 1

我相信您可能缺少 VueJS 结构背后的一些基础知识，以及在哪里和/或如何放置身份验证等功能。再次阅读他们的介绍以巩固您的知识可能是值得的。

更直接地回答，当您运行 Vue JS 应用程序时，您需要有一个基本的 html 页面（如index.html）作为入口点，并<script>在该页面中加载 Vue 应用程序的初始化。

当您编写 Vue JS 应用程序时，您可以选择使用纯 JavaScript、TypeScript 或 .vue 组件格式（结合了定义组件所需的 HTML、CSS 和 JavaScript）。

该vue格式不是直接运行的，它必须由 Vue-CLI/builder 转换为纯 JavaScript，并首先使用像 WebPack 这样的打包程序打包，然后由您的入口点加载。幸运的是，Vue CLI 处理了几乎所有这个过程，因此您可以继续构建。

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 文件。它还负责设置您可能想要在您的应用程序中使用的插件和第 3 方组件：

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

index.html

索引页面在 html 中提供您的入口点，为 VueJs 提供一个元素以加载和导入main.js以初始化您的应用程序。

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");

另一方面，放置您的身份验证逻辑的合适位置是在路由器中，您可以在其中添加导航守卫以根据当前身份验证状态限制对页面的访问并将您的用户发送到登录页面：

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