본문 바로가기
Frame-Work/Vue-JS

1. vue js 설치, 실행, 프로젝트 생성, IE실행(Vue2, Vue3는 IE실행 안됨)

by 깡돌JS 2021. 4. 23.

1. node js 설치 방법 3가지

첫번째 CDN을 통해서 Vue.js 설치

*CDN 컨텐트 딜리버리 네트워크 = 내 위치에서 가장 까운 IDC서버에 연결 속도 빠름


두번째 NPM을 통해서 Vue.js 설치

*NPM 노드 패키지 관리자

*NPM은 웹 개발에 필요한 라이브러리 사용할때 사용함

nodejs.org/ko/

 

Node.js

Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.

nodejs.org


세번째 Vue CLI를 사용하여 Vue.js 설치

*CLI(커맨드 라인 인터페이스) 명령어를 통해서 설치

Vue CLI는 Vue 프로젝트를 한큐에 설치 할수 있게 도와주는 핫도구

마지막 Node.js를 사용해서 NPM과 Vue Cli를 통해서 Vue js를 설치 할수 있다

 

Node.js

Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.

nodejs.org

 - 안정적 실뢰도 높음버전 다운로드 설치


2. VSCode 설치(IDE 개발도구)

code.visualstudio.com/

 

Visual Studio Code - Code Editing. Redefined

Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications.  Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows.

code.visualstudio.com


3. VSCode 세팅

 - VSCode는 기본적 환경설정 파워쉘로 되어있음 명령프롬프트(일명 CMD) 변경

 - VSCode 7시 방향 톱니바퀴 클릭 

 - setting > Features > Terminal > Integrated › Automation Shell: Windows > Edit in settings.json 클릭

"terminal.integrated.shell.windows": "cmd.exe", 입력(명령이 마지막이면 , 제거)

"terminal.integrated.automationShell.windows": "" 삭제

윈도우 사용자 Windows 클릭(버전별 Shell 지원함)

VSCode cmd 실행

ctlr + shift + `


4. Cmd Vuejs 설치 명령어 입력

 - npm install -g @vue/cli


5. Vue 프로젝트 생성

 - 터미널 vue create 프로젝트 이름

 - Vue3 선택 > 엔터 > 작은기다림 > 설치 및 프로젝트 셋팅 완료 됨


6. 프로젝트 실행

 - cd 현재 프로젝트 이름 이동

 - npm run serve 입력(server r < nono 명령어 잘못 r 까지 치면 실행 안되고 오류남)

 - 해당 cmd 창에 떠있는 url로 접속


부록. VSCode 추천 익스텐션

- Material Icon Theme

 > Material Icon Theme : 소스파일 및 파일이름에 따른 아이콘 변경 
- Material Theme

 > 
- auto renama tag
- HTML to CSS autocompletion
- HTML CSS support
- Autoprefixer
- Bracket Pair Colorizer
- ident-rainbow
- highlight matching tag
- Vetur - Pine Wu
- Vue 2 Snippets
- Vue Peek
- Vue VSCode Snippets
- ESLint
- Prettier - Code formatter
- liveServer


7. IE실행(Vue2, Vue3는 IE실행 안됨)

bable 형님 설치npm install --save @babel/polyfill

현재 프로젝트 main.js에 위에서 설치한 bable 형님들 설정 추가

main.js 
import '@babel/polyfill'


 

댓글