# Introduction & Project setup

## How to setup project

## Vue3 + VITE

<https://vuejs.org/guide/quick-start.html#quick-start> 를 참고해 Vue3 프로젝트를 생성합니다.

> Let's say you already have Vite + Vue3 project.&#x20;
>
> 새로운 Vue3 프로젝트를 생성하세요. Vite를 사용하지 않을 이유가 없으니 꼭 Vite를 사용해 프로젝트를 생성합니다.  이미 생성한 Vue3 프로젝트가 있다면 스킵합니다.

### \[optional] node 버전은 18.16.1

```
nvm use 18.16.1
```

#### Storybook 설치

```sh
pnpm dlx storybook@latest init
```

#### \[참고] package.json의 storybook dependencies&#x20;

```json
"@storybook/addon-essentials": "^7.5.3",
"@storybook/addon-interactions": "^7.5.3",
"@storybook/addon-links": "^7.5.3",
"@storybook/blocks": "^7.5.3",
"@storybook/testing-library": "^0.2.2",
"@storybook/vue3": "^7.5.3",
"@storybook/vue3-vite": "^7.5.3",
"storybook": "^7.5.3"
```

####

#### 개발 서버 실행&#x20;

```
pnpm storybook
```

### Storybook 설정

<figure><img src="/files/8qaT20rArihKHjCNcTOv" alt=""><figcaption><p>ui-test folder has *.vue and *.stories.js</p></figcaption></figure>

기본 포트가 6006, localhost:6006으로 접속시 아래와 같이 스토리들이 생깁니다.&#x20;

<figure><img src="/files/AlFhMLJlsjmSkpDIxoQq" alt=""><figcaption></figcaption></figure>

생성한 컴포넌트를 스토리북에서 테스트하기 위해서는 두 가지 파일을 함께 생성해야 합니다.

#### SFC (뷰 컴포넌트)

```html
<template>
  <div class="flex items-center p-2 bg-white rounded-lg shadow-sm hover:bg-gray-100">
    <img 
      v-if="userData && userData.avatar"
      :src="userData.avatar" 
      alt="User Avatar" 
      class="w-8 h-8 rounded-full"
    />
    <span v-if="userData" class="ml-3 text-sm font-medium text-gray-700">
      {{ userData.name }}
    </span>
    <span v-if="userData.loading" class="ml-3 text-sm font-medium text-gray-700">
      Loading...
    </span>
  </div>
</template>

<script setup>
import { storeToRefs } from 'pinia';
import { useUserStore } from '../../stores/user'
const userStore = useUserStore();
const { userData } = storeToRefs(userStore);
</script>

```

#### story

```javascript
import UserProfile from './UserProfile.vue';
import { useUserStore } from '@/stores/user';

export const Base = {
  render: (args) => ({
    components: { UserProfile },
    setup() {
      const userStore = useUserStore();
      userStore.userData = {
        name: "John Doe",
        email: "john@example.com",
        id: 53,
        avatar: "https://api.dicebear.com/7.x/fun-emoji/svg"
      }
      return { args }
    },
    template: /* html */`
      <UserProfile 
        v-bind="args"
      />
    `,
  }),
  args: {
    alt: "storybook Profile"
  }
}

export default {
  component: UserProfile
}
```

### 같이 설치하면 좋을 vscode extension&#x20;

<figure><img src="/files/fwYa181VJwtr3avHrhaj" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/Kgc886cl7GYZ5g6ptNao" alt=""><figcaption></figcaption></figure>

주석 사용시 마크업 하이라이팅이 되게 해줍니다.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://pinia.chocopam.com/introduction/why-pinia/introduction-and-project-setup.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.