1. node js 설치 방법 3가지
첫번째 CDN을 통해서 Vue.js 설치
*CDN 컨텐트 딜리버리 네트워크 = 내 위치에서 가장 까운 IDC서버에 연결 속도 빠름
두번째 NPM을 통해서 Vue.js 설치
*NPM 노드 패키지 관리자
*NPM은 웹 개발에 필요한 라이브러리 사용할때 사용함
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 개발도구)
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'
'Frame-Work > Vue-JS' 카테고리의 다른 글
5. Vue js - v-if(조건식) (0) | 2021.05.27 |
---|---|
4. Vue js - 이벤트 핸들러 (0) | 2021.04.28 |
3. Vue js - v-for 반복문 - 리스트 렌더링 (0) | 2021.04.27 |
2. Vue js - HTML 태그 안에 데이터 바인딩 (0) | 2021.04.23 |
https://kr.vuejs.org/ (0) | 2021.04.22 |
댓글