TIL(20240726) [프론트 초기세팅 Vue.js]

---

📌 프론트 초기세팅 - Vue.js

1. node,npm을 설치
   • 아래 사이트로 이동하여 다운로드!

node.js설치

1. 설치 후 cmd 창에서 아래 사항을 확인한다.

2. 인텔리제이에서 newproject 생성 후 아래와 같은 설정을 해준다.

3. 터미널 창에서 확인!

**혹시나 마지막에 " Use https://registry.npm.taobao.org for faster installation? (Y/n)"이 나오면 Y를 입력한다.

1. 실행 (vue.js 개발환경은 node js server임. npm은 node package manager의 줄임말로 node js를 설치하면 같이 설치된다.)

1. 터미널 창에서 아래 사항을 확인하고

2. 브라우저에서 http://localhost:8080/ 접속

해당화면이 뜨면 완료!

📌 Vue.js 기본 문법 알아보기

Vue.js

📌 인텔리제이 - ui와 server 디렉토리 분리

1. 터미널 창에서

npm install -g @vue/cli

vue create 디렉토리명

? Please pick a preset: (Use arrow keys)

Default ([Vue 3] babel, eslint) Default ([Vue 2] babel, eslint) Manually select features

선택

서버개발중인 디렉토리에서 vue.js를 설치하려고 하는데 갑자기 되지 않는다.. ㅠ_ㅠ

$ npm install -g @vue/cli
bash: npm: command not found

계속 찾지 못한다..

Git Bash의 환경 변수 설정 파일을 수정하여 Node.js와 npm의 경로를 추가해야 한다.

git bash 창에서

nano ~/.bashrc  # 또는 ~/.bash_profile

export PATH=$PATH:/c/Program\ Files/nodejs

뭐시기뭐시기 뜨면 yes를 해준다..ㅎㅎ;;

변경사항 적용을 위해

source ~/.bashrc  # 또는 ~/.bash_profile

된다.. 😂

다시 vue CLI 설치!

명령어 입력!

http://localhost:8080/ 접속시에 위 vuejs 초기화면이 뜬다!

📌 서버와 Vue.js 연동

npm install axios
npm install cors
npm install vite --save-devcd
npm install vue-router

서버와 프론트가 연결이 된 것 같은데.. 아직 더 공부가 필요할 듯 하다.

어플리케이션을 실행해보면

baseUrl: 'http://localhost:8081',
frontUrl: 'http://localhost:8080

약간 서버포트가 바뀐 이슈가 있는데.. 서버 포트를 8080으로 바꿔야겠따.

Web server failed to start. Port 8080 was already in use.

cmd 창(관리자권한)

netstat -a -o
taskkill /f /pid pid번호

8080포트에서 사용하는 pid번호를 입력해 종료시켜준다.

cmd 포트