Vue App中main.js & App.vue的作用是啥

Posted 2023-02-22

【中文标题】Vue App中main.js & App.vue的作用是啥

【英文标题】：What is the purpose of main.js & App.vue in Vue AppVue App中main.js & App.vue的作用是什么

【发布时间】：2020-03-17 05:26:31

【问题描述】：

我不明白每个文件的确切用途。 假设，我想把认证代码放在哪里，在 main.js 或 App.vue 中

【问题讨论】：

main.js 包含用于初始化 Vue 应用程序的 javascript。 App.vue 包含 Vue 应用程序的根组件。

【参考方案1】：

我相信您可能缺少 VueJS 结构背后的一些基础知识，以及在何处和/或如何添加身份验证等功能。可能值得再次查看他们的Introduction 以巩固您的知识。

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

当你编写一个 Vue JS 应用程序时，你可以选择用纯 JavaScript、TypeScript 或 .vue 组件格式来完成，它结合了你定义组件所需的 HTML、CSS 和 JavaScript。

vue 格式不能直接运行，它必须由 Vue-CLI/builder 转译成纯 JavaScript，并首先使用 WebPack 之类的打包程序打包，然后由您的入口点加载。幸运的是Vue CLI handles nearly all of this process，这样您就可以继续构建了。

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

【讨论】：

感谢您的解释。但是，您推荐的 Introduction 链接甚至没有提到 App.vue 文件。 Vue 文档甚至没有尝试解释 index.html、App.vue 和 main.js 是如何协同工作的。

'import Vue from "vue"' 是什么意思？这个“vue”元素/对象在项目树中的什么位置？

@webuser - 这是允许您使用Vue 变量/类访问“vue”模块的导入语句。 Vue 是使用 NPM 安装的，它是节点项目的包管理器。

【参考方案2】：

我认为您的项目中并不特别需要index.html。如果您的 main.js 有一个引用您的主 Vue 页面的导入，例如：

import App from "./App.vue"; 

然后渲染它。

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

【参考方案3】：

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

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

Vue CLI 的正确起点是：https://cli.vuejs.org/guide/prototyping.html