Vue.js 应用程序中“main.js”和“App.vue”的用途是什么？

Question

我不明白每个文件的确切用途。

假设我想添加验证码。我应该把它放在哪里，在 main.js 或 _App.vue 中_？

原文由 Sanyam Jain 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我相信您可能缺少 Vue.js 结构背后的一些基础知识，以及在何处和/或如何添加身份验证等功能。可能值得再次通过 他们的介绍 来巩固您的知识。

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

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

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

文件 应用程序.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 发布，翻译遵循 CC BY-SA 4.0 许可协议