Vue From The TOP — Vue CLI 3
Welcome to Vue From The Top. A series where we go through the fundamentals of Vue JS. In the previous post, we saw what are front-end frameworks and what differentiates Vue from other frameworks.
We also looked at how to integrate Vue into existing projects and a simple example for Two-Way Data Binding.
Today we will look into creating Vue apps using the Vue CLI. Before installing the Vue CLI, you need to make sure, you have node installed on your working laptop/desktop.
Install Node through -https://nodejs.org/en/
Once you have Node installed, we are ready to go!
Open your terminal or cmd prompt and type the following command.
npm install -g @vue/cli( if you are using yarn ) — Optional
yarn add global @vue/cliNote: If you have worked previously, with Vue CLI 2, there are a lot of things that have changed in this version. In this article I'm assuming, you haven't worked with the CLI yet and moving forward.
Now that the CLI has been installed, we can go ahead and start creating our Vue projects.
In the terminal/cmd prompt type in the command:
vue create <project-name>
After you have entered the command, you will be greeted with these options. These are “presets”.
Presets are a set of packages that go with your application.
To understand things much better, let us select the manual option.
Let’s look at each feature in brief:
Babel — Helpful for backward compatibility of JavaScript
TypeScript — TypeScript support for your Vue Project
PWA — Progressive Web app support.
Router — Adding Vue-Router to your project. — Used for navigation within the app.
Vuex — State Management for your Vue project
CSS Pre-Processors — LESS, SASS support.
Linter — ESLint support
Unit and E2E Testing — Adding testing tools to your Vue Project.
Vue concepts such as Router and Vuex, will be discussed in much more detail in upcoming posts.
For the sake of our project, I will select Babel and CSS pre-processors.
Press Enter and That’s it. You have created your first Vue Project! 🥳
In my case, I'm using yarn. If you have used NPM, you will need to run
npm run serveThe project will automatically open up a local development server, running your Vue Application.
Enjoying the article? Leave a Clap and a comment and let me know.
Let’s open the project in VS Code and look at the project structure.
The node_modules folder consists of all the packages we have installed.
The public has the index.html of our project. We will not have any more HTML files since ours is a single page application.
The src, consists of assets folder containing all the images we use in our project and a components folder, to store our Vue Components.
Then the App.vue and main.js files.
The App.vue is the main component of our project and everything is based on that first instance.
The main.js is where we first initialize Vue. Rest of the files are config files, which we will discuss later.
.vue Files
Vue has its own type for its components — .vue. These .vue files have their own structure to organize the template, styling and the script.
Here is how the standard boilerplate of the .vue file looks like.
Inside the template, we add all of the HTML, you must know that the template only allows one div per component. Meaning you can have multiple divs inside it but the template is allowed to have only one main div.
The script consists of all the JavaScript or TypeScript that you need for your components.
The script tag, as we discussed in the previous post consists of multiple properties such as data, methods, computed, etc.
The style tag is used to host all the styling of that component.
Note: You need to add “scoped” to the styling tag so that the styling implies only to that component and not on a global sense.
<style scoped></style>
Organization of Files
If we have a look into main.js, we will find something like this.
Here, we are importing the Vue Library and the App component. And like we saw in the previous post, we need to create a Vue instance and link it to the div, that we want Vue to work with right?
But, here instead of “el”, we have this render and $mount stuff.
What this means is that we are mounting a component onto our app, the render function of Vue makes sure that the app component is mounted onto our index.html file and then rendered. Vue takes care of all that under the hood and you don't need to worry about that.
Now that the App component is mounted, let's look at its code.
On first glance, we can see that the structure is exactly as we discussed, the template, then the script and the style tags. Simple.
The Template
The template has an id of “#app” indicating that this is the root element. Next, there is an img tag, after that, we have this custom tag named
HelloWorld and it is taking in a property named msg.
These are the components. We can import other components and we can use them as elements in our app. In our project structure, we have a component named HelloWorld.vue. That is being imported here in the script section.
Once the component is imported, we are registering it as a component by declaring it under the components property inside the script.
Now we can use it as a normal element in our App component.
We will be doing this a lot more as we progress, so if it is a little bit confusing, don't worry, it will get much clearer.
The components property is similar to the data property that we saw in the previous post.
For the basics of Vue CLI, this should be sufficient. In the next post, we will look into implementing computed properties and methods for our vue components.
If you enjoyed the article, consider checking out my Vue Js Fundamentals course for beginners on Cynohub:
