Nuxt 프로젝트 생성하기

Nuxt 프로젝트 생성 과정

proj01 프로젝트 생성

npx nuxi@latest init proj01

 

프로젝트로 이동

cd proj01

pnpm 설치

npm i -g pnpm

필요 라이브러리 설치

pnpm add -D @unocss/nuxt

pnpm i @pinia/nuxt

nuxt.config.ts

export default defineNuxtConfig({
  devtools: { enabled: true },
  modules: [
    '@unocss/nuxt',
    ['@pinia/nuxt', { autoImports: ['defineStore', 'acceptHMRUpdate'] }],
  ],
  components: {
    dirs: ['pages', 'components'],
  },

  imports: {
    dirs: ['stores'],
  },
  css: [
    '~/assets/css/_global.css'
  ],
})

uno.config.ts

먼저, 필요한 라이브러리들을 설치해주자!

pnpm i unocss-preset-scrollbar
pnpm i animated-unocss

아래 코드는 해당 Uno 사이트에서 가져왔다~

 

// uno.config.ts
import {
  defineConfig,
  presetAttributify,
  presetIcons,
  presetTypography,
  presetUno,
  presetWebFonts,
  transformerDirectives,
  transformerVariantGroup
} from 'unocss'

export default defineConfig({
  shortcuts: [
    // ...
  ],
  theme: {
    colors: {
      // ...
    }
  },
  presets: [
    presetUno(),
    presetAttributify(),
    presetIcons(),
    presetTypography(),
    presetWebFonts({
      fonts: {
        // ...
      },
    }),
  ],
  transformers: [
    transformerDirectives(),
    transformerVariantGroup(),
  ],
})

_global.css로 초기 margin 없애기

assets/css/_global.css

body{
  margin: 0;
}

이외에 reset css 검색해서 붙혀두면 좋음

 

프로젝트 열기

pnpm run dev