Pinia Crash Course #2 - Project Setup

Summary

This tutorial walks you through the process of setting up a Vue project from scratch, including how to install Pina for state management. The video covers initializing the project with npm, cleaning up the starter files, and setting up the basic structure in Visual Studio Code. Key steps include installing dependencies, removing unnecessary components, and customizing the app's template with a clean layout and some CSS. The tutorial concludes with running the project locally, setting the stage for the next lesson on installing Pina and creating the first Pina store.

Takeaways

• 😀 Initialize a new Vue project with `npm init vue@latest` and set up basic configurations.
• 😀 Choose to exclude TypeScript, JSX, Vue Router, and Pina during initial setup to start from scratch.
• 😀 Navigate into the project directory and open it in Visual Studio Code using `code .` for an organized development environment.
• 😀 Install the necessary dependencies by running `npm install` to prepare the project for development.
• 😀 Clean up the project by removing unnecessary starter components and styles in the `app.vue` file.
• 😀 Delete unused files such as the `icons` folder and `logo.svg` in the `assets` folder to keep the project tidy.
• 😀 Add the Material Icons font to `index.html` for future use in UI components.
• 😀 Import the Pina logo (`pina-logo.svg`) to the `assets` folder for displaying the logo in the header section.
• 😀 Use VS Code extension `Vue VS Code Snippets` to quickly generate template boilerplate code in `app.vue`.
• 😀 Style the page using a minimal CSS approach: set background color, use Flexbox for header layout, and adjust logo size with a slight rotation.
• 😀 Run the development server with `npm run dev` to preview the basic layout of the project in the browser.

Q & A

What is the first step in setting up the Vue project?

The first step is to use npm to initialize the Vue project by running `npm init vue@latest`. This will generate a new Vue project and prompt you to answer a few setup questions.

What is the purpose of choosing 'no' for Pina during the Vue project setup?

By selecting 'no' for Pina during the setup, you avoid importing unnecessary boilerplate code. This allows you to install and set up Pina from scratch later, giving you more control over the configuration.

What is the command used to install the project dependencies?

The command used to install the project dependencies is `npm install` in the project directory. This installs all the dependencies listed in the `package.json` file.

Why is it recommended to clean up the starter project?

Cleaning up the starter project removes unnecessary components, styles, and files that are not required for the task at hand. This helps to create a leaner, more focused project setup, ready for customization.

What does the template for `App.vue` include after using the VS Code Snippets extension?

After using the `vbase-ns` snippet from the VS Code extension, the template includes a `<main>` tag with a basic structure. It includes a `<header>` with an image tag for the Pina logo and an `<h1>` displaying 'Pina tasks'.

What additional external resource is added to the `index.html` file?

The `index.html` file includes a link to the Material Icons font from Google. This is added to allow the use of various icons in components later on.

How is the Pina logo included in the project?

The Pina logo is placed inside the `assets` folder of the project, and the `<img>` tag in the `App.vue` template references the logo file (Pina-logo.svg) with an alt description 'Pina logo'.

What font is applied to the entire page, and where is it imported from?

The `Popins` font is applied to the entire page, and it is imported from Google Fonts in the `App.vue` component's CSS.

What effect does the CSS have on the header and image in the `App.vue` component?

The CSS styles the header with a centered layout using Flexbox. It also applies a rotation to the image (Pina logo) with a `transform: rotate(-10deg)` and sets the image's maximum width to 60px.

What command is used to start the development server and preview the app in the browser?

The development server is started with the command `npm run dev`, which spins up a local server, allowing you to preview the app in the browser.