본문 바로가기

반응형

Vue3

(4)
[Vue3] Vite Project 생성하기(Vite 서버 실행 속도 비교) 1. Vite Project 생성하기vite project생성 명령어 실행y 입력 후 엔터로 vite pakages 설치❯ npm create vite@leastNeed to install the following packages: create-vite@5.2.3Ok to proceed? (y) y  project name 입력✔ Project name: … vite-project  vite를 사용할 framework 선택 (vue)? Select a framework: › - Use arrow-keys. Return to submit. Vanilla❯ Vue React Preact Lit Svelte Solid Qwik Others  사용할 스크립터 언어..
[Vue3] Vite란? 무엇이며, 사용해야하는 이유 1. Vite란?빠르고 간결한 모던 웹 프로젝트 개발 경험에 초점을 맞춰 탄생한 빌드 도구이며, 두 가지 컨셉을 중심으로 하고 있습니다.첫 번째, 개발 시 네이티브 ES Module을 넘어 더욱 다양한 기능을 제공합니다. 가령, Hot Module Replacement(HMR)두 번째, 번들링 시, Rollup 기반의 다양한 빌드 커맨드를 사용하여 높은 수준으로 최적화된 정적(Static) 리소스들을 배포할 수 있게끔 하며, 미리 정의된 설정(Pre-configured)을 제공합니다.vanilla, reat, vue 등에서 사용 가능 2. 기존 번들러 기반 도구의 문제점JavaScript 기반의 도구는 성능 병목 현상이 발생 및 개발 서버를 가동하는 데 비합리적으로 오랜 시간을 기다려야함.HMR을 사용하..
[Vue3] Typescript 설정하기 터미널에서 Typescript를 적용할 프로젝트로 이동Typescript 추가 명령어 실행❯ vue add typescript  필요한 옵션 선택(Yes/No)? Use class-style component syntax? Yes? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? Yes? Convert all .js files to .ts? Yes? Allow .js files to be compiled? No? Skip type checking of all declaration files (recommended for apps)? YesUse class-style comp..
[Vue3] 1. 환경 설정 및 프로젝트 생성하기 1. 환경 설정nodejs 설치https://nodejs.org/en Node.js — Run JavaScript EverywhereNode.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.nodejs.orgnode 버전 확인❯ node -vv16.20.0  vue cli 설치❯ npm install -g @vue/cli  vue 버전 확인❯ vue -V@vue/cli 5.0.8   2. vue 프로젝트 생성vue create {프로젝트이름} 실행❯ vue create vue-test-project  Vue3 선택Vue CLI v5.0.8? Please pick a preset: (Use arrow keys)❯ Default ([Vu..

반응형