Project Structure in Vue: Consuming REST API in CodeIgniter 4 - 03

Let's talk about the folder structure that we have defined when creating an application in Vue.

Let's talk about the structure we have here for the project. I'm not going to be too theoretical. It's a very practical project, so I don't want to complicate things. In case you want more information, you can always look for a little more information, obviously the official documentation, which is always recommended for obvious reasons, because that always has to be your source. So I'm not going to mention this folder. This is from Visual Studio code. Here you'll find some basic configurations, but that's not the problem. Most of all, it's for the syntax and error highlighting part and so on. It doesn't work much either, so it's not necessary.

Public

The public folder as always and all life is the access folder or that is public although it sounds rhetorical in which the output files would be. Here you can also find static files, for example the favicon and if you want to place some images, videos or anything that is part of the application in View, here they would go. I am going to give this for last, the ignore, there is not much mystery, the files that are going to be ignored since this later we will also configure a repository for it, although it already has it by default I think but enot, for example, the Index html which of course is the startup file. Here you will find what it is. Note that this is a normal page in html Vue is an html technology, obviously, that is to say, web technology and therefore what our browser understands is simply html css javascript and this is the output page which we can customize. Note that it is important to remember that here is the di with the App identifier which is the one that as you could see in the official documentation in the example that I showed you, here is where our application is mounted, that is to say, here in the source it happens. Everything that is the structure of the framework we make our components and so on and finally we assemble it right on this page is the output page the pque json in which the versions that we are using of our packages are found in this case we are using Vue here you have it and this one and in this case All these are simply dependencies

Vite

It is a tool for the frontend that allows us to build our application, in other words, a little bit of what was mentioned before, our browser simply understands html, sss, javascript, but it will not understand this structure that we have here by default, the source folder in which our components, . Vue files and everything else will be, so basically Vite, apart from serving our application, also allows us to interpret all these files, or more than interpreting, and more than interpreting, it is the term after Pilar, which you have surely heard, basically transpiling (compiling) is compiling, but when we compile we go from one language to a Vue language. For example, if you compile, even if it is html, sss, javascript, you are not compiling as such to another programming language, it is the same, it is javascript, so that is why the term transpiler is used, basically Vie in other words or in summary. On the one hand, it allows us to assemble our application and on the other hand, it allows us to interpret it, and by interpreting it I mean that it allows us to convert all this, everything that we are going to generate here, into something that our browser understands, that is the term basically. For the rest, here it has some dependencies. that is to say, byte not only works for Vue, you can also use it for re angular, it is something that you can also see here and each one of them has its specific package that you can see for example, you can also use it for read, so each one of them also has its specific package and that is basically everything here, the rmi, which is for the repositories above all

Here we also have the vite file to configure it, we don't have to fiddle around too much, but here, for example, we are going to have what is good. We are going to see this later, but it is a relative way of doing the imports and some more configurations that we could do here, for example, it is indicating that it is expanding the Vue plugin, which is the one we are also installing here, and it is simply configuration. If you want to obtain more information about this here, I highly recommend that you go to the official documentation, but what it is doing is referencing the plugins that it is installing, the main one is this one, and it is referencing this one and this one here and here, it is a way of doing relative imports that we will see later when we create the components, and here, obviously, the components are simply imported. packages or functions that we are referencing down here This is another configuration file that is not very relevant and for the rest there is not much more to say here we come here to the source folder which is where we are going to place our application as such here you will also find the files for example the css for our components and the components one which is for our components and we already have some before only one appeared it seems to me now they invented some more things but oh well when we launch the application there we will see what really appears So how do we launch our application to see something on the screen for God's sake with everything I'm commenting on Remember that in the end we have to present this somehow just like we do with codiner 4 with the spar serf command in some way.

Development commands

We also have to launch this application to be able to consume it from here, how would we do it for this here, this is also something from node, we have to see precisely in this file, we have to see the Script section, and by default it launches some, we are going to use these two, this would be for when we already have the application ready and we want to generate the output files and this does something equivalent, again equivalent to what we do with

spark serve

What is to present the application or raise the application on a development server and this is the one that we would have to expand then let's see what happens we place here npm of the node Room package manager that indicates that we are going to execute something we are always going to do this every time we want to execute some of these commands and we place Def here which is an abbreviation of what we are placing here since the vite command you can place many more things depending on your needs so instead of writing all this here manually we simply have here as who says the shortened one and you can create more in case they are necessary for you But since this is a basic course it will not be necessary for you to create additional ones with the ones we already have it is more than enough I simply wanted to explain a little bit why this is in short to raise our application in development mode we place dev here:

npm run dev

Based on what we have here in this script and let's see what happens, it will tell us this nice error why this happens because here a very, very important folder is missing, which is the node modules folder, which for some reason this is already like it changes a little sometimes between versions of View because I have not really created a project in Vue for a while, that's why, for example, these files were not there, there was only one called welcome or Hello World but I think they are missing here, these are unnecessary. But anyway, it must be that something changed here, now that we launch the application, let's see, but here the node modules folder is also missing, which is not defined, we will see this in the following video to launch our application here I just wanted to explain the structure to you so let's go there.

22-01-2025 - Andrés Cruz

En español

• Category
• /
• Vue
• /
• Project Structure in Vue: Consuming REST API in CodeIgniter 4 - 03