Vscode 설치
Vscode - Vetur 설치
- .vue 파일 초기 구성 생성(template, script, style)
1. node.js 설치
- 프로젝트를 내려받거나 할 때는 버전 확인 필수 : node -v
- 노드 버전 변경 필요 시 nvm 설치 후 nvm list 확인하여 변경: nvm use 사용할 버전
- 또는 노드.js 공식홈페이지에서 다운로드
2. npm install vue 뷰 설치
- vue 버전 확인: npm vue -v
3. npm install -g @vue/cli 설치
-
vue cli: vue Command Line Interface
-
npm 버전 확인: npm -v
-
vue/cli: 기본 vue 개발 환경을 설정해주는 도구
-
vue cli 버전 확인 : vue --version
-
npm 최신버전 업데이트: npm install -g npm@latest
-
뷰 생성: vue create 파일이름
-
뷰 파일 실행: npm run serve
4. Vue.js devtools - chrome 확장 프로그램 설치
5. Vscode - HTML CSS Support 설치 (선택)
- HTML 요소의 class에서 css선택자 요소를 쓸때 자동 완성 기능을 지원
APP.vue
- 메인페이지
- template : HTML (하나 이상의 div 필요)
- script : js, 메서드 등
- style scoped: 해당 template의 css 적용
npm : Node.js Package Manager
- 각종 웹개발 라이브러리 설치 도우미
node_modules
- 프로젝트에 쓰는 라이브러리들
- 프로젝트를 내려받을 경우 root로 이동하여 npm install or npm i 하여 패키지와 패키지가 의존하는 package.json 에 포함된 의존성 패키지를 설치
package.json
- 라이브러리 버전, 프로젝트 설정 기록
뷰 파일 실행
- 뷰 파일까지 이동
- npm run serve
뷰 라우터 설치
- npm install vue-router
