◆ VueJS_npm 사용법
1. Node.js 다운로드
https://nodejs.org/ko 사이트에 방문하기.
18.16.0 LTS 버전 설치.
(npm 9.5.1 버전, 다운시 자동으로 같이 다운됩니다.)
2. VSCode 애플리케이션 에서 vue-cli 설치
- Vue-cli를 설치하는 목적은 Vue.js 프로젝트를 시작하는 데 필요한 기본 구조와 설정을 제공하는 것입니다.
- Vue-cli는 프로젝트에 필요한 다양한 플러그인을 추가로 설치할 수 있는 기능을 제공하여 개발자가 보다 빠르고 효율적으로 Vue.js 애플리케이션을 개발할 수 있도록 도와줍니다.
- VSCode 애플리케이션 에서 프로젝트 우클릭.
- Open In Integrated Terminal 클릭.
- 기본으로 powershell(관리자 권한이 있어야 사용 가능)이 열리는데 이것을 사용하지 않는다.
- 오른쪽 하단 플러스 옆의 아래 화살표 아이콘 클릭.
- Command prompt 선택.
- cmd 창이 열린다.
//하위 vue-cli 폴더로 이동
cd vue-cli
//@vue/cli 5.0.8 버전 설치
npm install @vue/cli --location=global
//demo01 폴더 생성
vue create demo01
Default ([Vue 3] babel, eslint) 을 Enterce
//하위 demo01 폴더로 이동
cd demo01
//npm 서버 실행
npm run serve//Local과 Network 주소 생성됨.
- App running at:
Local: http://test:8081/
Network: http://192.test.39:8081/// 배포 - 실행 시 배포할 dist 폴더 생성된다.
npm run build
cls : 화면 초기화
//npm의 server가 실행 중인 cmd창 작업 종료 단축키
ctrl + c//상위 폴더로 이동
cd ..
scripts:{}의 들어 있는 요소
serve : 기초
build : 배포 파일 생성
link : 문법 검사
dependencies와 devDependencies
- 의존성(dependencies)
: 프로젝트가 실행되기 위해 필요한 외부 라이브러리나 패키지를 의미합니다.- 개발 의존성(devDependencies)
1) 개발 과정에서만 필요한 패키지를 말합니다.
2) 이는 주로 테스트, 번들링, 코드 스타일링 등의 작업을 수행하기 위한 패키지입니다.
3) 따라서, 프로덕션 환경에서는 필요하지 않은 패키지들이며, 개발자가 개발환경에서만 사용할 수 있습니다.
src(중요도 0순위)
vue.comfig.js - 메인(중요도 1순위)
jsconfig.json(중요도 2순위)
babel.js
: 최신 자바스크립트 문법을 사용한 코드를 구 버전 브라우저에서도 실행 가능한 코드로 변환할 수 있습니다.
props
1) 상위 폴더에서 하위 폴더로 데이터를 전달하는 기능을 말합니다.
2) props를 통해 자식 컴포넌트에서 전달받은 데이터는 변경할 수 없으며, 단방향 데이터 흐름을 따릅니다.
서버에서 데이터를 가져와야 하는 경우 Rest api와 ajax를 사용해야 합니다.
Node.js NPM 패키지는 화면 구성만을 담당합니다.
화면을 디자인하기 위해서는 CSS를 사용해야 합니다.
noCheck - 중복 검사 결과
noValid - 형식 검사 결과
