Node Modules Folder - Vue 3 + Rest Api + CodeIgniter 4 - 04
We are going to install the nose modules folder only if the folder does not appear for you.
We are left here in which we cannot lift the project so let's see because as I told you there is a missing node modules folder which would be the equivalent that we have in CodeIgniter or projects in php the vendor folder in which all the project dependencies are found is the equivalent but in this case from Node for some reason it was not generated as I told you This is changing it seems that between Vue there are like three ways to install it I for example I always use Laravel but it had been a while since I created it so individually and individually we have it as I told you before we can create a project from scratch initializing a project in node we can create it as we did and we can also use the CLI which is another option that gives us more access to customize various things then
Node installation command
There are four ways to create projects in Vue, here we are going to execute:
npm install This is a command that seems to be missing here because it did not generate the node modules folder and we wait a moment for the process to finish, this is going to take a while.
Important point: don't be scared by the size of the folder, since we are not going to use that folder when we go into production, this is only for development purposes.
In the node modules folder you will find many intermediate packages that will allow us to develop in View as such. But don't worry because that folder will have many files and we will not expand it when we go to production. Remember that it is by executing this command and when we execute this command it would generate here in the folder the output files that you had to copy and paste.
Many files and folders in node_modules
Look at the number of packages that were added, as there are not only these three, as with coding or php in general, each of these packages have dependencies and notice that another very important file should appear here, which is the one
package-lock.json
package-lock.json in which the specific versions that are being used are found that were not there before and that is why it previously generated the output so quickly since as I indicated the dependencies have dependencies and well it is not going to get into much trouble but it is what is found here with the specific versions since notice that here the versions are found as who would say general this one that I did not talk about either but that is to say these ions that are here are not specific as they are since notice that this little hat indicates install vite in its version 6.0.5:
"vite": "^6.0.5"dev command
In the archive of:
package.json
"dev": "vite",You will be able to see the commands for development and production
Also, apart from starting the server, note that this opportunity worked, it will also generate a watch here, and by watch I mean an observer, meaning that every time we make a change, our application in Vue will automatically reload or should reload every time you make a change to the source code.
Vue bootstrap file
This is the boot file
main.js
const app = createApp(App)
app.config.globalProperties.$axios = axios
window.axios = axios
app.mount('#app')Note that here we are importing Vue from Vue the function called create which is an import with a name, that is to say that if you change the name here it will fail because this will not find it or it should not find it as you can see here
F12 in your browser to see the errors
I also recommend that you give it an f12 so that you can see the errors here in the client and here it clearly indicates that this has not been found, this is because it is an import with a name and we will also see this a little later but it is because of the keys we are importing:
import { createApp } from 'vue'Parent/Root Component
main.js
app.mount('#app')As they say main component, parent component, that's what we're going to call it. Familiarize yourself with this term of parent component, which is called app, which is the output component, and here we have it, which is this one, and we're mounting it, we're mounting it in a div in an html element called a, which is exactly what we had here on the page over here, if you were to change the name here:
index.html
<div id="app"></div>If you change the DIV, Vue won't find where to mount the app and it won't work.
- Andrés Cruz
Develop with Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter