How to make splitting vue files like in react?

Question

JavaScript

In React, I really liked the ability to create, say, a NavBar folder and place index.js and index.css in it.
And when it was necessary to import this component into others, it was enough to write: And the index.js file was loaded automatically. now I am writing in view and I want to split the files, but I ran into a problem: it turns out that after splitting, the following structure will turn out:
import NavBar from './components/NavBar';

components
  NavBar
    index.js
    index.css
    index.html
    NavBar.vue

And after that, import only in the exact way:

import NavBar from './components/NavBar/NavBar.vue'

otherwise it won't work (I work with vue-cli).
Is there a more concise way to structure a vue.js project?

Answer 1

In index.js make the component export:

import NavBar from './NavBar.vue'
export default NavBar

Write the component code in NavBar.vue

Answer 2

instead of a comment, it already looked like an answer. can. in components/common/index.js we write

import component1 from './component1.vue';
import component2 from './component2.vue';
...
export {component1, component2}

or even

components = {};
fs
  .readdirSync(__dirname)
  .filter(function(file) {
    return (file.indexOf(".") !== 0) && (file !== "index.js");
  })
  .forEach(function(file) {
    components[component.name] = require(path.join(__dirname, file));
  });

module.exports = components;

and import at least everything globally via

for (var component in components) {
            Vue.component(component, components[component]);
        }

, at least in parts in the necessary files through Yes, one component = one file, but everything turns out more or less accurately. import {component} from './components/common'