Question

0

204

Views

what main.js should contained in vuejs project?

I'm learning nodejs and vuejs to modify an already created web site. I installed nodejs, vue and vue-cli and I launched "npm run serve" which apparently start "vue-cli-serve serve"

The problem is that I don't understand what this web server do on files, in this documentation : https://cli.vuejs.org/guide/prototyping.html , it's told:

It automatically infers the entry file in the current directory - the entry can be one of main.js, index.js, App.vue or app.vue. You can also explicitly specify the entry file:

vue serve MyComponent.vue

Ok, but does it run main.js, does it include it into a js file which is the loaded by the index.html on the client broswer.

I see in the browser that the page load a js file named like that: app.23d...js My question is how this js file is created?

For instance, when the content of main.js is this one:

import './css/icon.css'
Vue.use(VueResource)
Vue.use(VueScrollTo)

what is the output in the app....js file?

It seems it doesn't work at all like php which I usually use on web server

Thank you

about 4 years ago · Juan Pablo Isaza

1 answers

Answer question

0

Answer question

Find remote jobs

Answer 1 · 2022-07-13T04:29:36.933Z

Vue uses Webpack to convert your potentially-numerous distinct .js files into bundles with names like app.23d92ab88708...js

From the Webpack documentation:

Concepts

At its core, webpack is a static module bundler for modern JavaScript applications. When webpack processes your application, it internally builds a dependency graph from one or more entry points and then combines every module your project needs into one or more bundles, which are static assets to serve your content from.

I don't suggest trying to get into the details of how Webpack works

This will take a lot of time. If you have an existing Vue project, you are much better off spending your time interpreting that as a Vue project, and accepting that the conversion into the actual app.23d.....js file or files is an automatic process that you do not need to involve yourself in.

It will avoid a colossal waste of time
It won't advance your understanding of how the Vue project works
Whatever you learn about the exact workings of today's Webpack, may be completely wrong about tomorrow's Webpack.
Nevertheless the interface that Webpack provides to you as a Vue programmer will remain constant over future versions.

This is the concept of software abstraction. It is highly advantageous to not have to know how every step of every process works, as long as you know how it is designed to respond to actions you take at a high level.

Horrific thought

I have just re-read your opening sentence:

I'm learning nodejs and vuejs to modify an already created web site.

Please tell me that you are not trying to modify an already created web site where you only have the compiled website available, without the Vue source code? That would be a stupendously painful enterprise.

0

204