Vue Why, How and Setup
It makes sense for our Vue project to use *.vue files because:
- Managing bigger projects is made simpler by using components and templates.
- Through the https protocol, we are able to view and test our project just as users would see the page.
- When modifications are saved, the page refreshes instantly and doesn’t need to be reloaded.
- This is how actual Vue web pages are constructed.
- That’s the way developers operate.
Why?
As we saw on the page before regarding Vue’s templates and components, we now need to operate in a different manner because we wish to:
- possess more ambitious initiatives
- assemble all Vue-related code into one location.
- utilize Vue’s component system (we’ll get to this soon)
- possess the editor’s support for auto-completion and highlighting
- automatically refresh the browser
And we have to go to *.vue files in order to make all of this happen.
How?
*.vue files, also known as SFCs (Single File Components), are simpler to work with but cannot be executed directly in a browser. To enable our browser to run our Vue application, we must configure our computer to compile our *.vue files into *.html, *.css, and *.js files.
We utilize a program called Vite as the build tool to create our SFC-based webpage, and we write our code in the Visual Studio Code editor using the Volar extension for Vue 3 language capabilities.
Setup
Installing the prerequisites for using Vue SFC apps on your PC is as simple as following the three steps shown below.
- The “VS Code” Editor
For Vue projects, there are numerous editors available. The editor we use is VS Code. Install VS Code after downloading it.
2. The VS Code “Volar” Extension
Open Visual Studio Code and select “Extensions” from the menu on the left to enable highlighting and auto-completion for *.vue files in the editor. Install the plugin that has had the most downloads and has the description “Language support for Vue 3” after searching for “Volar”.
3. Node.js
The Vue build tool “Vite” operates on top of the most recent version of Node.js, so download and install it first.
An open-source server-side JavaScript runtime environment is called Node.js.
Create The Default Example Project
To create the default Vue example project on your PC, follow the steps listed below.
4. Create a folder for your Vue projects on your computer.
5. In VS Code, open a terminal by choosing Terminal -> New Terminal from the menu:
6. To access the Vue folder you just created, use the terminal and type commands like cd <folder-name>, cd.., ls (Mac/Linux), and dir (Windows). See our introduction to the Command Line Interface (CLI) here if you are unfamiliar with typing commands in the terminal.
7. Once you’ve opened the terminal and found your Vue folder, type:
8. Make your first project, referring to it as “firstsfc”:
9. Select “No” for each question:
10. Currently, your terminal ought to show you this:
11. Now, we’ll execute the commands as previously advised.
To navigate to your new project inside the ‘firstsfc’ folder, run the following command:
12. Install every dependency needed for the Vue project to function:
13. Launch the server for development:
14. Now, the terminal window ought to seem like this:
Additionally, the example project ought to open in your browser automatically:
Use the URL from the terminal if you are unable to locate the example project in the browser. The address in the screenshot above may not match the address of the link you discover in your terminal window.
The Vite build tool is currently executing the example project in development mode on your computer.
The Project Files
There are numerous files in the automatically generated sample project; we will briefly examine a few of them.
main.js
Locate the “main.js” file in the “src” folder by opening your Vue project in the VS Code editor:
The “main.js” file instructs Vite on how to construct the Vue project using the “App.vue” file. This is comparable to how we mounted the Vue instance to the <div id=”app”> tag and provided a CDN link with the script tag to instruct the browser on how to execute our Vue code.
App.vue
Locate and open the “App.vue” file from the same example project folder. “App.vue” is composed of three sections, just like any other *.vue file: a <script> part, a <template> part, and a <style> portion.
App.vue:
<script setup>
import HelloWorld from './components/HelloWorld.vue'
import TheWelcome from './components/TheWelcome.vue'
</script>
<template>
<header>
<img decoding="async" alt="Vue Logo" class="logo" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20125%20125'%3E%3C/svg%3E" width="125" height="125" title="Vue Why, How And Setup 15" data-lazy-src="./assets/logo.svg"><noscript><img loading="lazy" decoding="async" alt="Vue Logo" class="logo" src="./assets/logo.svg" width="125" height="125" title="Vue Why, How And Setup 15"></noscript>
<div class="wrapper">
<HelloWorld msg="You did it!" />
</div>
</header>
<main>
<TheWelcome />
</main>
</template>
<style scoped>
header {
line-height: 1.5;
}
.logo {
display: block;
margin: 0 auto 2rem;
}
@media (min-width: 1024px) {
header {
display: flex;
place-items: center;
padding-right: calc(var(--section-gap) / 2);
}
.logo {
margin: 0 2rem 0 0;
}
header .wrapper {
display: flex;
place-items: flex-start;
flex-wrap: wrap;
}
}
</style>
As you can see, other *.vue files—called “components” and kept in the “components” folder—are mentioned in the script section of “App.vue.” <HelloWorld> and <TheWelcome> are two tags that are not typical HTML tags that can be found in the ‘template’ section of the ‘App.vue’ file. The terms for the components are as follows. Apps within apps are what components are like. Soon, we will discover more about components.
