[Vue] 설치 방법

HOU·2022년 6월 20일
0

Vue

목록 보기
2/5
post-thumbnail

Vue 설치하기


  1. node 설치 (url)
    • 최신 or 최신 LTS 버전 아니면 에러남
    • 윈도우/맥 똑같이 설치하면 됨
    • 다른 경로에 설치 하면 안됨
  2. vscode 검색 후 설치
  3. vscode에서 새 터미널을 열어준다.
  4. 터미널에 npm install -g @vue/cli를 입력한다.
    • 버전을 정해서 입력하고 싶다면 npm install -g @vue/cli@버전명을 입력하면 된다.

젠장 설치가 제대로 되지 않는다..


해결방법

  1. node.js 제거 후 최신버전으로 설치 16 버전에서 18버전 최신으로 변경

    실패
  2. yarn으로 설치해 보기 yarn 1.22 버전
  3. vscode터미널이 아니라, 직접 관리자 모드로 터미널 실행
    vue create [프로젝트이름]

    이 앞에도 설정하는 화면이 있었는데 캡쳐하지 못했다, 2버전쓸건지 3버전쓸건지 물어봐서 3버전을 사용한다고 선택했다.

해결

vscode를 실행할때 프롬프트에서 code라고 실행해서 권한에 문제가 있었나보다.. 그냥 관리자 모드에서 실행하니 바로 수월하게 진행되었다.

뷰 실행방법!

4.npm run serve 명령어를 터미널에서 사용하여 제대로 나오는 지 확인하자!

  1. 로컬에 있는 url에 들어가보면 app.vue 파일에 있는 내용이 잘 출력된다.

6.사실 app.vue 브라우저에서 해석하지 못해서 실제로는 index.html 을 보는거고 app.vue가 랜더링 되서 index.html에 보이는 것이다.

  1. 부가기능 설치
    1. vetur : vue 하이라이트 위해 설치!
    2. vue 3 snippets : vue 자동 완성 도구
    3. html css : html 문서에 적용되어 있는 css를 추천해 주는 기능!
profile
하루 한 걸음 성장하는 개발자

0개의 댓글