[Vue3] Vue + Vite + Typescript 초기세팅

 

vite 를 사용하여 프로젝트 생성

npm create vite@latest

 

- 프로젝트명 입력하고 프레임워크는 vue, variants 는 typescript 로 세팅 

해당 폴더로 cd 이동 후 npm 설치

npm install

 

 

이외 필요한 라이브러리도 설치한다.

vue-router

npm install vue-router@4

https://next.router.vuejs.org/installation.html

 

vuex

npm install vuex@next --save

https://next.vuex.vuejs.org/installation.html

 

@types/node

npm install --save @types/node

 

 

 

vite-env.d.ts 파일에 아래 내용 추가

/// <reference types="vite/client" />

declare module "*.vue" {
  import type { DefineComponent } from "vue";
  const component: DefineComponent<{}, {}, any>;
  export default component;
}

 

vite.config.ts 파일에 @설정 추가

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import * as path from 'path' // 라이브러리 : @types/node

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@/': path.resolve(__dirname, './src') + '/'
    }
  }
})

 

혹시라도 vetur 익스텐션 때문에 에러가 난다면 프로젝트 바로 아래 vetur.config.js 파일을 추가해서 설정을 false 로 모두 변경한다.

// vetur.config.js
module.exports = {
  settings: {
    "vetur.completion.autoImport": false,
    "vetur.experimental.templateInterpolationService": false,
    "vetur.validation.interpolation": false,
    "vetur.validation.template": false,
    "vetur.validation.templateProps": false,
    "vetur.validation.style": false,
    "vetur.validation.script": false,
    "vetur.format.enable": false,
    "vetur.ignoreProjectWarning": true,
    "vetur.languageFeatures.codeActions": false,
    "vetur.languageFeatures.semanticTokens": false,
    "vetur.languageFeatures.updateImportOnFileMove": false,
    "vetur.trace.server": "off",
    "vetur.underline.refValue": false,
  },
};

 

 

 

이제 실행 시, 5173 포트로 초기화면을 볼 수 있다.

npm run dev