Vuejs：我应该在 vue-router SPA 中的哪里放置一些常用的 js 工具？

Posted 2023-02-22

【中文标题】Vuejs：我应该在 vue-router SPA 中的哪里放置一些常用的 js 工具？

【英文标题】：Vuejs: where should I place some common js util in a vue-router SPA?

【发布时间】：2016-08-10 21:47:20

【问题描述】：

在我的 Vuejs 项目中，我有一些常用的 js 函数，可以通过多个组件使用：

我的代码结构如下，在http://vuejs.github.io/vuex/en/structure.html中介绍过：

├── index.html
├── main.js
├── components
│   ├── App.vue
│   └── ...
└── vuex
    ├── store.js     # exports the store (with initial state and mutations)
    └── actions.js   # exports all actions

some_component.vue

<template>
// The page content
</template>

<script>
export default 
    attached: function() 
        if(!isLoggedIn) 
            $this.router.go('/signin');
        
    

</script>

在这种情况下，我想创建一个函数loginRequired，它将在多个组件中调用。

那我应该如何组织代码呢？

【参考方案1】：

这是我的选择

├── index.html
└── src
    ├── main.js
    ├── config.js        # Here I define global constants like a base url for vue-resource
    ├── api              # here is all the http calls using Vue.resource
    │   ├── index.js
    │   └── resource.js  # here I define interceptors, for errors log, auth, etc
    ├── components
    │   ├── utils        # Here I define common functions for components
    │   ├── App.vue
    │   └── ...
    └── vuex
        ├── store.js     # exports the store (with initial state and mutations)
        └── actions.js   # exports all actions

因此，根据我的文件结构，您想要的应该在src/components/utils 文件夹中，至少它使用一些http 调用，在这种情况下，它将是src/api api 文件夹的一部分。在这种情况下，路由在main.js 文件中，有些人更喜欢在src 文件夹中有一个专用文件routes.js，这取决于你

【讨论】：

我应该将 utils 定义为一个模块（实际上是命名空间）然后let utils = require('./components/utils.js') 来使用它吗？

事实上我把它当作一个文件夹使用，然后根据需要制作尽可能多的文件。还有其他项目类似于this

最后看看this project，从这里我调整了我的文件结构

太棒了！谢谢！