Chapter 1: In the Beginning: The Creation of the Project

Introduction

In a realm where the lines between code and creation blur, where divinity and technology coexist in harmony, a developer of unparalleled prowess reigns. His identity remains shrouded in mystery, known to the masses only by his extraordinary skills and the masterpieces he conjures from lines of code. Whispers of his talents spread through the digital cosmos, telling of a creator who shapes universes with mere keystrokes. This is the story of one such creation, a tale of a world birthed from the mind of this great, omniscient developer.

The Spark of Creation

In a distant epoch woven into the fabric of time, the omniscient one sat upon his mighty workstation throne, gazing into ethereal multi-screens with unparalleled curiosity. In an instant, a thought illuminated his mind—a thought so profound that it set the gears of creation in motion. He saw the vision of a world, not just any world, but one where every element, every interaction, was crafted with precision and purpose. The creation of this world would be etched in eternity using the holy scripture known as Vue. In this sacred text, everything that is to be created will be written.

What is Vue?

Vue, pronounced as vju, is a sacred scripture for crafting celestial user interfaces. Based on JavaScript, the Old Testament of the frontend realm, Vue transcends standard HTML, CSS, and JavaScript to offer a clear, component-based way to create interfaces. Despite the vast variations among the entities that reside on the great Web, Vue ecosystem is designed to cover all common features required for frontend development, being both flexible and incrementally adaptable. Its core, centered on the view layer, facilitates effortless integration with other celestial libraries and projects. Furthermore, the knowledge of Vue is something that comes easy to both a commoner just starting out and a divine developer with years of experience, as it possesses mystical properties to grow and adapt according to one's needs.

The Choice of Vue

The developer, with his vast knowledge and experience, chose Vue for several reasons. Vue’s gentle learning curve and comprehensive documentation made it an ideal tool for building a complex world from scratch. Vue also possesses the ability to unify code written in ancient languages such as HTML, CSS, and JavaScript within a single-file component, a method endorsed by the elders of the universe. However, there exist two distinct styles in which a component can be written: Options API and Composition API. The former follows the way of object-oriented programming, while the latter relies heavily on reactivity. The omniscient one considered Composition API worthy for his world, as its free-form and flexible nature enables the creation of powerful and complex patterns for organizing and reusing divine logic.

A Glimpse of The Chosen Way

<script setup>
import { ref, onMounted } from 'vue'

// reactive state
const atoms = ref(0)

// functions that mutate state and trigger updates
function create() {
  atoms.value++
}

// lifecycle hooks
onMounted(() => {
  console.log(`There was ${atoms.value} of everything in the beginning.`)
})
</script>

<template>
  <button @click="create">Atoms in existence: {{ atoms }}</button>
</template>

The Role of NPM

To manifest his vision, the developer turned to Node.js, a foundational platform for executing JavaScript code outside of a web browser. Leveraging Node.js, he accessed npm, a mystical tool revered as the Node Package Manager within the JavaScript ecosystem. NPM serves as the heart of this ecosystem, granting access to a vast repository of packages and libraries. It empowers developers to effortlessly manage dependencies, scripts, and configurations. For the developer, npm became the gateway to initializing and managing his Vue project, facilitating the seamless creation and local execution of his visionary application.

Creating the Project: Eden

With a clear vision and the power of Vue and npm at his fingertips, the developer embarked on his journey of creation. He named his project Eden, a place of perfect harmony and endless possibilities. Here are the steps he took to bring Eden to life:

1) Initialization: The developer opened his sacred terminal and invoked the command to create a new Vue project.

npm create vue@latest

2) Project Setup: Guided by npm’s wisdom, he followed the prompts to set up the project. He named it Eden, choosing the default configuration to lay a solid foundation.

✔ Project name: … eden
✔ Add TypeScript? … No / Yes
✔ Add JSX Support? … No / Yes
✔ Add Vue Router for Single Page Application development? … No / Yes
✔ Add Pinia for state management? … No / Yes
✔ Add Vitest for Unit Testing? … No / Yes
✔ Add Cypress for both Unit and End-to-End Testing? … No / Yes
✔ Add ESLint for code quality? … No / Yes

3) Navigating to Eden: With the project initialized, he navigated into the newly created Eden directory.

cd eden

4) Installing Dependencies: He then summoned npm to install the necessary dependencies.

npm install

5) Launching the Project: Finally, the developer commanded the project to start, breathing life into Eden for the first time.

npm run dev

With these steps, the foundation of Eden was laid. The developer gazed upon his creation, a blank canvas ready to be filled with life, interactivity, and endless possibilities. The journey of creation had begun, and the digital universe of Eden started to take shape, line by line, component by component.