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

Question

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

Answer 1

我相信您可能缺少 VueJS 结构背后的一些基础知识，以及在哪里和/或如何放置身份验证等功能。可能值得通过他们的 Introduction再次巩固你的知识。
更直接地回答，当您运行 Vue JS 应用程序时，您需要有一个基本的 html 页面(如 index.html )作为入口点，并将您的 Vue 应用程序的初始化加载到 <script> 中。在那个页面。
当您编写 Vue JS 应用程序时，您可以选择使用纯 JavaScript、TypeScript 或 .vue 组件格式(结合了定义组件所需的 HTML、CSS 和 JavaScript)。vue格式不直接运行，它必须由 Vue-CLI/builder 转换为纯 JavaScript，并首先使用像 WebPack 这样的打包程序打包，然后由您的入口点加载。幸运的是 Vue CLI handles nearly all of this process这样你就可以继续 build 了。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 方组件:

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>  

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

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