WSL Ubuntu에서 Vue.js 앱을 로컬호스트로 올리고 코드 수정하기

1. Vue.js 앱을 로컬호스트로 올리기

(1) Ubuntu 설치

2025.02.28 - [데이터 분석] - Windows에서 WSL2와 Ubuntu 설치 및 Docker 사용하기

(2) Node.js 설치

sudo apt update
sudo apt install nodejs npm

 

(3) Vue CLI 설치

npm install -g @vue/cli

 

(4) 새로운 Vue 프로젝트 생성

vue create my-vue-app

 

(5) Vue 앱 실행

cd my-vue-app
npm run serve

 

`http://localhost:8080`로 접속하여 Vue 앱이 정상적으로 실행되고 있는지 확인

 

 

2. 코드 수정하기

(1) Vim 사용

cd my-vue-app
vim src/App.vue

- `i` 키로 편집 모드

- 코드 수정 후 `Esc` 누르고 `:wq` 입력 → `Enter`로 저장 후 종료

 

별도 편집기를 설치할 필요 없다는 장점은 있지만 가독성이 떨어지고 접근성과 활용성이 낮아 추천하지는 않는다.

 

(2) VS Code 이용

cd my-vue-app
code .

윈도우에 VS Code가 설치되어 있다면 Ubuntu 내에서 별도 설치할 필요 없이 VS Code를 `code .`으로 간단하게 실행할 수 있다.