[Vue.js] Vue 초기 프로젝트 생성 관련 명령어(feat.vite)

https://codepen.io/jangka44/live/KKNWBVQ

### 1. node 설치 ###

 - 설치확인

cmd에서 node -v

 - npm 버전확인

npm -v

 - npm 업데이트 명령어

npm install -g npm

 

### 2. vite로 새 프로젝트 생성 ###

 - 프로젝트 생성

cmd에서 mkdir c:\work && mkdir c:\work\vite_projects


cd c:\work\vite_projects


npm init @vitejs/app
- 프로젝트명 : 프로젝트명
- 템플릿 : 선택

 - 생성된 프로젝트로 이동

cd 프로젝트명

 - 의존성 설치

npm i

 - 프로젝트 개발용으로 실행

npm run dev


브라우저에서 http://localhost:3000 접속

 

### 3. 테일윈드 적용 ###

 - 의존성 설치

cmd에서 npm install -D tailwindcss@latest postcss@latest autoprefixer@latest


npx tailwindcss init -p


tailwind.config.js에서 아래 코드 삽입

        purge: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],

 

### 4. 라우터 적용 ###

 - 의존성 설치

cmd에서 npm install vue-router@4