Vue3+TS+Vite 개발 기술: Vue3+TS+Vite 개발 환경을 빠르게 구축하는 방법

Vue3+TS+Vite 개발 기술: Vue3+TS+Vite 개발 환경을 빠르게 구축하는 방법

현대 웹 개발에서 Vue.js는 가장 인기 있는 프런트 엔드 프레임워크 중 하나입니다. Vue.js의 최신 버전인 Vue3은 더 많은 기능과 성능 향상을 제공합니다. TypeScript는 정적으로 유형이 지정된 JavaScript의 상위 집합으로 더욱 강력한 개발 도구와 유형 검사 기능을 제공합니다. Vite는 개발 환경에 중점을 두고 Vue3+TS 프로젝트를 위한 개발 환경을 신속하게 구축하는 데 도움을 주는 매우 빠른 구성 도구입니다. 이 기사에서는 Vite를 사용하여 Vue3+TS 개발 환경을 구축하는 방법을 소개하고 몇 가지 개발 팁과 코드 예제를 제공합니다.

준비

시작하기 전에 최신 버전의 Node.js 및 npm이 설치되어 있는지 확인하세요.

Vite를 사용하여 프로젝트 초기화

먼저 Vite의 명령줄 도구를 전역적으로 설치해야 합니다. 터미널을 열고 다음 명령을 실행합니다.

npm install -g create-vite

설치가 완료되면 create-vite 명령을 사용하여 새 프로젝트를 생성합니다. 터미널에서 다음 명령을 실행하세요:

create-vite my-vue3-project --template vue-ts

위 명령은 my-vue3-project라는 Vue3+TS 프로젝트를 생성하고 일부 기본 구성과 파일을 자동으로 초기화합니다.

프로젝트 디렉토리 입력:

cd my-vue3-project

프로젝트 종속성 설치:

npm install

프로젝트 시작:

npm run dev

브라우저에서 http://localhost:3000을 열면 기본 Vue3+TS 애플리케이션이 실행되는 것을 볼 수 있습니다.

Vuex 및 Vue Router 추가

많은 실제 프로젝트에서 Vuex를 상태 관리 라이브러리로 사용하고 Vue Router를 라우팅 관리로 사용하는 경우가 많습니다. 아래에서는 Vue3+TS 프로젝트에 추가하는 방법을 소개합니다.

먼저 Vuex 및 Vue Router를 설치합니다.

npm install vuex@next vue-router@next

src 디렉터리 아래에 저장소 디렉터리를 만들고 그 안에 index.ts 파일을 만들어 Vuex를 초기화합니다. 샘플 코드는 다음과 같습니다.

import { createStore } from 'vuex'

// 创建一个基本的store
const store = createStore({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++
    },
    decrement(state) {
      state.count--
    }
  }
})

export default store

src 디렉토리에 라우터 디렉토리를 생성하고 그 안에 index.ts 파일을 생성하여 Vue Router를 초기화합니다. 샘플 코드는 다음과 같습니다.

import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router

이제 main.ts 파일에 store와 router를 소개하고 사용해야 합니다. 샘플 코드는 다음과 같습니다.

import { createApp } from 'vue'
import App from './App.vue'
import store from './store'
import router from './router'

const app = createApp(App)

app.use(store)
app.use(router)

app.mount('#app')

TypeScript 구성

TypeScript가 제대로 작동하려면 프로젝트 루트 디렉터리에 tsconfig.json 파일을 추가하고 몇 가지 기본 구성을 수행해야 합니다.

프로젝트 루트 디렉토리에 tsconfig.json 파일을 생성하고 다음 내용을 추가합니다.

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "importHelpers": true,
    "moduleResolution": "node",
    "esModuleInterop": true,
    "experimentalDecorators": true,
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "typeRoots": ["./node_modules/@types", "./src/types"],
    "types": ["vite/client"]
  }
}

이로써 Vue3+TS+Vite 프로젝트의 초기화 및 기본 구성이 완료되었습니다. 이제 실제 요구 사항에 따라 개발하고 Vue3 및 TypeScript에서 제공하는 기능과 도구를 활용하여 개발 효율성을 높일 수 있습니다.

요약

이 글에서는 Vue3+TS+Vite 개발 환경을 빠르게 구축하는 방법을 소개하고, 몇 가지 샘플 코드와 개발 팁을 제공합니다. Vite를 사용하면 현대적인 Vue3+TS 프로젝트 환경을 빠르게 만들 수 있습니다. TypeScript를 사용하면 더욱 강력한 개발 도구와 유형 검사 기능을 제공할 수 있어 더욱 안정적이고 유지 관리가 쉬운 코드를 작성하는 데 도움이 됩니다. 이 팁이 Vue3+TS 프로젝트의 개발 효율성과 품질을 향상시키는 데 도움이 되기를 바랍니다.

위 내용은 Vue3+TS+Vite 개발 기술: Vue3+TS+Vite 개발 환경을 빠르게 구축하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!