Vue | 1. npm으로 설치하기

|

요약

뷰(Vue) 는 프론트엔드 영역에서 많이 사용되는 자바스크립트 프레임워크입니다.
설치 환경 세팅도 하고 Developer Tools 을 통해 테스트 환경을 구축하는 방법을 소개합니다.

설치

npm init vue@latest

폴더를 생성한 후 위의 명령어를 입력합니다.
어떤 옵션으로 설치할지 선택합니다

Vue Developer Tools

image 124
Vue | 1. npm으로 설치하기 5
sudo npm install @vue/devtools@latest --location=global

맥의 경우 -13 에러가 뜰 수 있습니다. 아래의 체크사항을 확인해보세요

  • 명령어 앞에 sudo가 포함되어 있는지 확인
    npm을 global로 설치했기 때문에 관리자 권한으로 설치해야함
  • npm 버전과 맞는지 확인
    @vue/devtools@latest 로 설치하는 것을 권장

실행

vue-devtools

터미널에 명령어를 입력하여 실행합니다

파이어폭스로 설치하기

다운로드 : 바로가기

최신버전의 vue_devtools_beta…..xpi 를 설치하면 됩니다.

크롬 엣지 설치하기

image 125
Vue | 1. npm으로 설치하기 6

image 126
Vue | 1. npm으로 설치하기 7

부트스트랩 설치하기

sudo npm i bootstrap-next

bootstrap-next – npm (npmjs.com)

popperjs 설치

sudo npm i @popperjs/core

@popperjs/core – npm (npmjs.com)

VS Code 설정

image 127
Vue | 1. npm으로 설치하기 8

CDN 가상환경 설치

<script src="https://unpkg.com/vue@next"></script>

코드를 추가하여 임시로 Vue 의 가상환경을 만들 수 있습니다.

설치하기

npm install vue@next

서버 사이드 렌더링

외부에서 SEO를 적용하기 위해서는 서버사이드 렌더링 작업이 필요합니다.

터미널 종료하기

맥 : fn (정라잇 기준 control) + command + z

답글 남기기

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다

클릭하여 복사