Vue.js应用程序中，'main.js'和'App.vue'的目的是什么？

Question

我不理解每个文件的确切目的。

假设我想添加身份验证代码。 我应该将其放在 main.js 还是 App.vue 中？

- Sanyam Jain

---

main.js 包含初始化 Vue 应用的 JavaScript 代码。 App.vue 包含 Vue 应用的根组件。 - yqlim

Answer 1

我认为你可能缺少Vue.js结构的一些基础知识以及如何在哪里或如何添加身份验证等功能。建议重新阅读Vue.js官方文档来巩固你的知识。

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

当你编写Vue.js应用程序时，你可以选择使用纯JavaScript、TypeScript或.vue组件格式进行编写，.vue格式不会直接运行。它必须先通过Vue-CLI/builder将其转换为纯JavaScript，并使用类似于Webpack的打包工具进行打包，然后由入口点加载。幸运的是，Vue.js CLI几乎处理了这个过程的所有细节，因此你可以专注于构建应用。

文件 App.vue

这通常是以Vue.js组件文件格式定义的应用程序根目录，它通常定义了页面的模板：

<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的入口点，为Vue.js提供了一个元素进行加载，并导入文件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()
})

- Tom 'Blue' Piddock

---

感谢您的解释。然而，您推荐的介绍链接甚至没有提到App.vue文件。Vue文档甚至没有尝试解释index.html，App.vue和main.js如何一起工作。 - Dean Schulze

'import Vue from "vue"' 的意思是什么？在项目树中，这个“vue”元素/对象位于哪里？ - web user

@Web用户 - 这是导入语句，它允许您使用Vue变量/类访问“vue”模块。Vue是使用NPM安装的，NPM是用于Node项目的软件包管理器。 - Tom 'Blue' Piddock

赞同Dean的评论，你的答案应该在他们的文档中，因为他们直接开始编写代码而没有解释结构的基础知识，例如入口点等等。 - James

Answer 2

我认为你的项目中并不需要一个特定的index.html文件。只要你的main.js文件有一个导入引用了你的Vue主页面，例如：

import App from "./App.vue"; 

然后将其呈现。

new Vue({
    ...
    render: (h) => h(App),
...

- Dave Oakley

Answer 3

.vue文件是Vue.js CLI项目的特殊功能，允许您以更方便的方式编写Vue.js应用程序或Vue.js组件。您可以在.vue文件中编写应用程序/组件，而Vue.js CLI将其转换为在浏览器中运行的代码。

Vue.js CLI项目中的main.js启动应用程序的实例。index.html文件在Vue.js CLI项目中自动处理（位于“public”文件夹中）。

使用Vue.js CLI的正确方法是：即时原型制作

- ertogrul

---

这似乎已经过时了。也许是时候更新一下了？但是请注意，不要在答案中出现“编辑：”、“更新：”或类似的字眼，让它看起来像今天写的一样。 - Peter Mortensen