ReadMe 추가
This commit is contained in:
이진기
parent
d84a3313e3
commit
69d84c4706
116
nuxt/README.md
116
nuxt/README.md
|
|
@ -1,75 +1,71 @@
|
||||||
# Nuxt Minimal Starter
|
### 기본 환경
|
||||||
|
- vue 3.x(5.0.8)
|
||||||
|
- node (v20.17.0)
|
||||||
|
- vue-router(최신)
|
||||||
|
- pinia(최신) - store
|
||||||
|
- Nuxt(최신) - 프레임워크
|
||||||
|
- antd 4.x - UI/UX
|
||||||
|
- yarn (1.22.22)
|
||||||
|
- 추후 환경은 변경될 수 있음
|
||||||
|
|
||||||
Look at the [Nuxt documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.
|
## 최초 세팅
|
||||||
|
- terminal(혹은 command창): yarn install
|
||||||
|
- 실행 시 yarn dev
|
||||||
|
|
||||||
## Setup
|
## 개발 시 중요 사항
|
||||||
|
- 모든 파일은 업무 기준으로 작성됨(예: 사용자 > user)
|
||||||
|
- 공통사항으로 적용되는 경우 utils 사용할 것!
|
||||||
|
- 모든 네이밍은 명확한 단어로 사용할 것!
|
||||||
|
- 반드시 저장할 경우 Eslint, Prettier 적용
|
||||||
|
|
||||||
Make sure to install dependencies:
|
## 공통 단어 주의사항
|
||||||
|
- 비즈니스 로직은 공통이 아님(불허)
|
||||||
|
- 공통은 언제든지 사용할 수 있는 라이브러리성을 말하는 것임
|
||||||
|
|
||||||
```bash
|
## Commit 금지 파일 및 디렉토리
|
||||||
# npm
|
- /node_modules/
|
||||||
npm install
|
- 기타 IDE 환경 파일(.classpath 등등)
|
||||||
|
|
||||||
# pnpm
|
### 페이지 작성
|
||||||
pnpm install
|
- pages/도메인/index.vue
|
||||||
|
- 페이지는 controller와 같은 역할을 함
|
||||||
|
- useHead를 이용하여 html head 영역을 설정함
|
||||||
|
|
||||||
# yarn
|
### 페이지 내 컴포넌트
|
||||||
yarn install
|
- /src/components/도메인/컴포넌트명.vue
|
||||||
|
|
||||||
# bun
|
### store 작성 위치
|
||||||
bun install
|
- 디렉토리: /src/stores/도메인/index.ts
|
||||||
|
|
||||||
|
### api 작성 위치
|
||||||
|
- 디렉토리: /src/apis/도메인/index.ts
|
||||||
|
|
||||||
|
### Type 지정
|
||||||
|
- type 및 interface로 타입을 지정하는 경우가 많음
|
||||||
|
- 법률구조공단은 type으로 모든 객체의 타입을 지정하는 것을 원칙으로 함
|
||||||
|
- 최대한 undefined를 사용하지 않는 선으로 개발할 것
|
||||||
|
- 예로 userId: string의 경우 빈값을 표현할 때 userId: '' 형식으로 사용할 것!
|
||||||
|
- 타입 import 시 아래와 같이 type을 지정해야 함
|
||||||
|
```
|
||||||
|
import type {UserItemType} from 'types'
|
||||||
```
|
```
|
||||||
|
|
||||||
## Development Server
|
|
||||||
|
|
||||||
Start the development server on `http://localhost:3000`:
|
### Toast UI Calendar
|
||||||
|
```
|
||||||
|
// ES MODULE
|
||||||
|
import Calendar from '@toast-ui/calendar';
|
||||||
|
|
||||||
```bash
|
// CSS 적용
|
||||||
# npm
|
import '@toast-ui/calendar/dist/toastui-calendar.min.css';
|
||||||
npm run dev
|
|
||||||
|
|
||||||
# pnpm
|
|
||||||
pnpm dev
|
|
||||||
|
|
||||||
# yarn
|
|
||||||
yarn dev
|
|
||||||
|
|
||||||
# bun
|
|
||||||
bun run dev
|
|
||||||
```
|
```
|
||||||
|
|
||||||
## Production
|
### Toast UI Grid
|
||||||
|
|
||||||
Build the application for production:
|
|
||||||
|
|
||||||
```bash
|
|
||||||
# npm
|
|
||||||
npm run build
|
|
||||||
|
|
||||||
# pnpm
|
|
||||||
pnpm build
|
|
||||||
|
|
||||||
# yarn
|
|
||||||
yarn build
|
|
||||||
|
|
||||||
# bun
|
|
||||||
bun run build
|
|
||||||
```
|
```
|
||||||
|
// ES MODULE
|
||||||
|
import 'tui-grid/dist/tui-grid.css';
|
||||||
|
import 'tui-date-picker/dist/tui-date-picker.min.css';
|
||||||
|
|
||||||
Locally preview production build:
|
// CSS 적용
|
||||||
|
import Grid from 'tui-grid';
|
||||||
```bash
|
```
|
||||||
# npm
|
|
||||||
npm run preview
|
|
||||||
|
|
||||||
# pnpm
|
|
||||||
pnpm preview
|
|
||||||
|
|
||||||
# yarn
|
|
||||||
yarn preview
|
|
||||||
|
|
||||||
# bun
|
|
||||||
bun run preview
|
|
||||||
```
|
|
||||||
|
|
||||||
Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.
|
|
||||||
Loading…
Reference in New Issue