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格式不能直接运行，必须先由WebPack等打包程序编译为JavaScript，然后再由入口点加载。

`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中提供了您的入口点，为VueJ加载并导入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()
})

Answer 2

我认为您在项目中不需要特别使用Index.html。假设您的main.js具有导入引用您的Vue主页，例如：

从“ ./App.vue”导入应用；

然后呈现它。

新Vue（{ ... 渲染：（h）=> h（App）， ...

Vue App中main.js和App.vue的用途是什么

2 个答案:

`App.vue`

`main.js`

`index.html`