How do paths work in vue-cli?

Question

Vue.js

Hello, I'm learning vue-cli, using the standard preset, I can't understand why such a path to vue
Document structure (All unnecessary removed, instead of spaces, pluses, due to toaster editing):
-node-modules
++-vue
++++ -dist
-src
++-app.vue
++-main.js
In the main.js file, this is the code:

import Vue from 'vue'
import App from './App.vue'

Why is the Vue object imported from the folder at all, how does that work? From the tutorial, I realized that it is taken from the node-modules folder, but which side, if node-modules is located above, and there are more folders in the node-modules itself in the vue folder. Is this how automatic folder search works, or does vue-cli take everything from node-modules itself, transferring it to the same directory as main.js?
And from the extra, who knows why app.js is included in the head and at the end of the body, an error?
Thanks in advance)

Answer 1

Projects with Vue CLI 3 include a pre-configured Webpack config that has aliases for the "vue" and "@" paths. In addition, the assembler by default looks for a module not only in the source code of the project itself, but also in the node_modules folder. In this case, for "path/to/dependency" the desired file may be either "path/to/dependency.js" or "path/to/dependency/index.js" or something else specified in package.json . See the Webpack documentation for details.
Regarding app.js in two places - I have never seen this. And your structure is strange for the latest version, you usually get something like the following:

node_modules
public
  index.html # без app.js
src
  components/(компоненты)
  assets/(прочие файлы)
  App.vue
  main.js
package.json
(конфиги)