Vue 프로젝트 시작하기 w. Vite

1
npm i -D eslint @eslint/js globals eslint-plugin-vue prettier eslint-config-prettier eslint-plugin-prettier

1
npm i -D eslint @eslint/js eslint-plugin-vue @vue/eslint-config-typescript prettier eslint-config-prettier eslint-plugin-prettier

1
2
3
4
5
6
7
8
9
10
11
12
13
14
import js from '@eslint/js'
import globals from 'globals'
import pluginVue from 'eslint-plugin-vue'
import prettierRecommended from 'eslint-plugin-prettier/recommended'
import { defineConfig, globalIgnores } from 'eslint/config'

export default defineConfig([
  { files: ['**/*.{vue,js,mjs,jsx}'] },
  globalIgnores(['**/dist/**']),
  { languageOptions: { globals: globals.browser } },
  js.configs.recommended,
  pluginVue.configs['flat/recommended'],
  prettierRecommended
])

1
2
3
4
5
6
7
8
9
10
11
12
13
14
import js from '@eslint/js'
import pluginVue from 'eslint-plugin-vue'
import { defineConfigWithVueTs, vueTsConfigs } from '@vue/eslint-config-typescript'
import prettierRecommended from 'eslint-plugin-prettier/recommended'
import { globalIgnores } from 'eslint/config'

export default defineConfigWithVueTs(
  { files: ['**/*.{vue,ts,mts,tsx}'] },
  globalIgnores(['**/dist/**']),
  js.configs.recommended,
  pluginVue.configs['flat/recommended'],
  vueTsConfigs.recommended,
  prettierRecommended
)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
// ...

export default defineConfigWithVueTs(
  // ...
  {
    rules: {
      'vue/html-closing-bracket-newline': ['error', {
        singleline: 'never',
        multiline: 'never'
      }],
      'vue/html-self-closing': ['error', {
        html: {
          void: 'always',
          normal: 'never',
          component: 'always'
        },
        svg: 'always',
        math: 'always'
      }],
      'vue/comment-directive': 'off',
      'vue/no-v-html': 'off'
    }
  }
)

1
2
3
4
5
6
7
8
9
10
{
  "semi": false,
  "singleQuote": true,
  "singleAttributePerLine": true,
  "bracketSameLine": true,
  "endOfLine": "auto",
  "trailingComma": "none",
  "arrowParens": "avoid",
  "printWidth": 100
}

1
2
3
4
{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode"
}

1
2
3
4
5
6
7
8
9
10
11
12
13
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vite.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: [
      { find: '@', replacement: '/src' },
      { find: 'node_modules', replacement: '/node_modules' }
    ]
  }
})

1
2
3
4
5
6
7
8
9
<script setup lang="ts">
// import { useMovieStore } from '../../../../store/movie'
import { useMovieStore } from '@/store/movie'
</script>

<style>
@import 'node_modules/swiper/swiper.css';
@import 'node_modules/swiper/modules/navigation.css';
</style>

1
2
3
4
5
6
7
8
9
{
  "compilerOptions": {
    // ...
    "paths": {
      "@/*": ["./src/*"],
      "node_modules/*": ["./node_modules/*"]
    }
  }
}

1
2
3
4
5
6
7
8
9
10
{
  "compilerOptions": {
    // ...
    "baseUrl": "./",
    "paths": {
      "@/*": ["./src/*"],
      "node_modules/*": ["./node_modules/*"]
    }
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# 현재 경로에 프로젝트 폴더 생성 및 구성
npm create vite@latest <프로젝트_폴더_이름>

  Select a framework: Vue
  Select a variant: Official Vue Starter ↗

  Use TypeScript? Yes 혹은 No
  Select features to include in your project:
    JSX Support
    Router (SPA development)
    Pinia (state management)
    Vitest (unit testing)
    End-to-End Testing
    Linter (error prevention)
    Prettier (code formatting)

1
2
3
cd <프로젝트_폴더_이름>
npm i
npm run dev

1
2
3
4
5
6
7
8
{
  "scripts": {
    "lint": "run-s \"lint:*\"",
    "lint:oxlint": "oxlint . --fix",
    "lint:eslint": "eslint . --fix --cache",
    "format": "prettier --write --experimental-cli src/"
  }
}

1
2
3
4
5
6
7
8
9
10
11
{
  "$schema": "https://json.schemastore.org/prettierrc",
  "semi": false,
  "singleQuote": true,
  "singleAttributePerLine": true,
  "bracketSameLine": true,
  "endOfLine": "auto",
  "trailingComma": "none",
  "arrowParens": "avoid",
  "printWidth": 100
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
import { globalIgnores } from 'eslint/config'
import { defineConfigWithVueTs, vueTsConfigs } from '@vue/eslint-config-typescript'
import pluginVue from 'eslint-plugin-vue'
import pluginOxlint from 'eslint-plugin-oxlint'
import skipFormatting from 'eslint-config-prettier/flat'

export default defineConfigWithVueTs(
  { files: ['**/*.{vue,ts,mts,tsx}'] },
  globalIgnores(['**/dist/**', '**/dist-ssr/**', '**/coverage/**']),
  ...pluginVue.configs['flat/essential'],
  vueTsConfigs.recommended,
  ...pluginOxlint.buildFromOxlintConfigFile('.oxlintrc.json'),
  skipFormatting
)

1
2
3
4
npm error code ERESOLVE
npm error Found: oxlint@1.74.0
npm error Could not resolve dependency:
npm error peer oxlint@"~1.73.0" from eslint-plugin-oxlint@1.73.0

1
2
3
4
5
6
{
  "devDependencies": {
    "eslint-plugin-oxlint": "~1.73.0",
    "oxlint": "~1.73.0"
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
{
  "explorer.fileNesting.enabled": true,
  "explorer.fileNesting.patterns": {
    "tsconfig.json": "tsconfig.*.json, env.d.ts, typed-router.d.ts",
    "vite.config.*": "jsconfig*, vitest.config.*, cypress.config.*, playwright.config.*",
    "package.json": "package-lock.json, pnpm*, .yarnrc*, yarn*, .eslint*, eslint*, .oxlint*, oxlint*, .oxfmt*, .prettier*, prettier*, .editorconfig, bun.lock, nub.lock"
  },
  "editor.codeActionsOnSave": {
    "source.fixAll": "explicit"
  },
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode"
}

1
2
3
{
  "explorer.fileNesting.enabled": false
}

1
npm i -D sass-embedded

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<template>
  <div class="card">
    <h2 class="title">제목</h2>
  </div>
</template>

<style lang="scss" scoped>
.card {
  padding: 20px;
  .title {
    color: #2f6fed;
  }
}
</style>

1
2
3
4
5
6
import { createApp } from 'vue'
import './style.css'
import './style.scss'
import App from './App.vue'

createApp(App).mount('#app')

1
2
3
4
5
6
7
8
$color-primary: #2f6fed;
$breakpoint-tablet: 768px;

@mixin flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vite.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: [
      { find: '@', replacement: '/src' },
      { find: 'node_modules', replacement: '/node_modules' }
    ]
  },
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: '@use "@/assets/scss/variables" as *;'
      }
    }
  }
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<style lang="scss" scoped>
.card {
  @include flex-center;
  padding: 20px;
  .title {
    color: $color-primary;
  }
}

@media (min-width: $breakpoint-tablet) {
  .card {
    padding: 40px;
  }
}
</style>