generally refers to the process of expanding the size or capacity of something, whether it’s a business, a technology system, or a project. It involves increasing resources, improving efficiency, and adapting to handle greater demands. In business, scaling up might mean hiring more staff, expanding into new markets, or investing in new technology. In technology, it might mean adding more servers, optimizing algorithms, or implementing distributed systems. Scaling up is often a crucial step for organizations to achieve growth and continued success.
Our Initially Developed SFC Website
To create our first SFC web page from scratch, we will start by setting up a clean Vue project, writing code in the App.vue file, and observing how the web page updates automatically during development. Finally, we will build the page for production.
Develop a Clean Project
The next step is to construct our own basic Vue web page by deleting all of the material from the sample project we created on the previous page.
Get rid of everything that is inside the <template>, <script>, and <style> tags, as well as any characteristics like “setup” or “scoped” before we begin writing code.
You should now see the following in your ‘App.vue’ file:
App.vue:
<script></script>
<template></template>
<style></style>The ‘assets’ and ‘components’ folders within the ‘src‘ folder should also be deleted.
The ‘main.js’ file should look like this after removing the line where assets are imported:
main.js:
import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')At this point, we have no project to work on.
Add code to ‘App.vue’
Add a header within the template tag now that the project is tidy, like this:
<template>
<h1>Hello World!</h1>
</template>
<script></script>
<style></style>To access your browser, save the ‘App.vue’ file and use the terminal’s localhost link. Can you see the outcome? It should no longer be necessary to manually refresh the browser each time you save a modification in Visual Studio Code.
Let’s now examine a little larger example in Vue:
Example
App.vue:
<template>
<h1>{{ message }}</h1>
</template>
<script>
export default {
data() {
return {
message: 'This is some text'
};
}
};
</script>
<style></style>The export default statement in the example allows main.js to import and use the App component from App.vue, mounting it within the <div id="app"> element in index.html.
Increasing Scale Vue Components
The components in Vue allow us to break down our webpage into manageable chunks.
A Vue component has its own logic and content, and we may interact with it separately from the rest of the page. A web page frequently has a lot of Vue components.
Define components
The purpose of components is to create scalable and easier to maintain Vue applications by encapsulating a particular portion of the user interface in reusable, self-contained code.
We may either create our own components in Vue or utilize pre-built components, such as or , which we shall study later. We will concentrate on parts that we manufacture ourselves here.
Making a Component
Vue Components is a really strong feature since it makes our website more scalable and makes managing larger projects easier.
For our project, let’s create a component.
1. Make a new components folder inside the src folder.
2. Create a new file called FoodItem.vue inside the components folder. The PascalCase naming convention, which eliminates spaces and requires all new words to begin with a capital letter, including the initial word, is frequently used to identify components.
3. The FoodItem.vue file should look like this:
The code within the FoodItem.vue component is as follows:
<template>
<div>
<h2>{{ name }}</h2>
<p>{{ message }}</p>
</div>
</template>
<script>
export default {
data() {
return {
name: 'Apples',
message: 'I like apples'
}
}
};
</script>
<style></style>Similar to our main App.vue file, components also have template, script, and style tags, as shown in the sample above.
Including the Component
The <script> tag in the aforementioned example begins with export default, as you can see. This implies that the object with the data attributes can be imported, or received, in a different file. With the help of the main.js file, we will import the FoodItem.vue component into our current project.
First, change the final line in your original main.js file to two lines:
main.js
import { createApp } from 'vue'
import App from './App.vue'
const app = createApp(App)
app.mount('#app')In the main.js file, add the FoodItem.vue component by adding lines 4 and 7:
main.js
import { createApp } from 'vue'
import App from './App.vue'
import FoodItem from './components/FoodItem.vue'
const app = createApp(App)
app.component('food-item', FoodItem)
app.mount('#app')Line 7 adds the component so that we can utilize it as a custom tag inside our App.vue file’s
App.vue
<template>
<h1>Food</h1>
<food-item/>
<food-item/>
<food-item/>
</template>
<script></script>
<style></style>In the App.vue file, let’s also add some styling inside the
Example
App.vue:
<template>
<h1>Food</h1>
<food-item/>
<food-item/>
<food-item/>
</template>
<script></script>
<style>
#app > div {
border: dashed black 1px;
display: inline-block;
margin: 10px;
padding: 10px;
background-color: lightgreen;
}
</style>Development mode: By executing the following code line in the terminal, you may keep your Vue projects in development mode at all times while working on them:
Separate Components
The ability to control component behavior in Vue is a really helpful and potent feature. Unlike with simple JavaScript, we don’t need to mark elements with unique IDs. Vue automatically ensures that every component is handled separately.
When we click on the <div> elements, let’s make them count.
The sole addition to our main application file, App.vue, is a CSS change that makes the cursor appear to be pointing like a hand when hovered over, suggesting that there is click capability of some kind.
CSS code added to the <style> tag in App.vue:
#app > div:hover {
cursor: pointer;
}A data property count, a click listener to the <div> element, a function to execute when a click occurs to increment the counter, and text interpolation {{}} to display the count must all be added to our component file FoodItem.vue.
Example
FoodItem.vue:
<template>
<div v-on:click="countClicks">
<h2>{{ name }}</h2>
<p>{{ message }}</p>
<p id="red">You have clicked me {{ clicks }} times.</p>
</div>
</template>
<script>
export default {
data() {
return {
name: 'Apples',
message: 'I like apples',
clicks: 0
}
},
methods: {
countClicks() {
this.clicks++;
}
}
}
</script>
<style>
#red {
font-weight: bold ;
color: rgb(144, 12, 12);
}
</style>Vue handles the counting for each <div> element automatically; we don’t need to establish unique IDs or perform any additional effort.
However, the content of the <div> components remains the same, with the exception of the various counter values. To use components in a more logical way, we will learn more about them on the next page. It would be more logical, for instance, to present several types of food in each <div> element.