2024.07.03

• https://www.npmjs.com/ : 다양한 자바스크립트 모듈 또는 라이브러리가 등록된 npm repository
• npm CLI(Command Line Interface ) : 명령으로 모듈을 다운하고 관리하는 사이트
  
• npm.exe : 자바스크립트 명령어를 실행하는 도구.
• 설치 방법
  • npm install 대상
  • 예 ) jquery 설치 : npm install jquery
• 설치된 리스트 확인
  • npm list
• 설치된 리스트의 의존성 트리 확인
  • npm list -g -depth=0
    • -g : 설치된 cli명령을 전역적을 어디에서든 사용가능.

Vue CLI설치

• Back-end로 개발할 때 필요
• Vue 프로젝트 생성, 실행, 빌드, 배포등 다양한 명령어를 제공하는 툴.
• 사용법 )
  • npm install -g @Vue/cli
    • -g : 설치된 cli명령을 전역적을 어디에서든 사용가능.
• 확인 )
  • npm list -g

1. vue project 생성 (vue cli명령실행) => cmd를 관리자권한으로 실행
   • vue create 프로젝트명
2. 프로젝트 실행 (프로젝트르 실행하기 위해서 별도의 웹 서버를 설치할 필요가 없다.)
   • 파일 편집 vue app을 편집
3. 서버 실행
   • npm run serve
4. 배포
   4.1 3번서버 중지 : ctrl + c
   4.2 빌드 npm run build
   4.3 dist 디렉토리에 개발된 파일들이 배포
   

실행

• npm run serve >
  
  
• dist : Npm run build에 의해 생성되며 배포파일이 들어가는 디렉토리
• node_modules : Node의 모듈이 들어가는 디렉토리
• public : static 파일이 저장된 위치 /index.html( app entry point )
• static 파일 저장된 위치 / index.html ( app entry point )
• src / main.js ( javascript entry point )
  src / App.vue ( Component entry point )
  src/component/HelloWorld.vue ( component )

1. index.html이 호출된다.
2. javascript entry point로 들어가짐 (main.js)
   
   2.1 Component entry point로 감 (App.vue)
   2.2 Component를 사용하게된다. (HelloWorld.vue)

.vue 파일 구성

• 확장자는 vue로 생성

1. Template 구성요소 ( 화면 구성 )
2. script 구성요소 ( 업무 로직 )
3. style 구성요소 ( 디자인 구성 )

front-end 개발방식 (CDN사용)

1. cdn사용
   

2. HTML 태그 사이에 필요한 코드 작성
   
   2.1 Vue 객체 생성

    $(function{
        new Vue({
        el:"데이터를 적용할 id",
        data : 보여줄 데이터
        })
    })

   2.3 데이터 바인딩

   	<div>
          {{이름}}
       <div>

data-binding

• Vue 객체가 사용하는 값(model)을 타깃에서 보여주기 위해 사용하는 문법.
• 값은 vue객체에 data속성에 들어 있어야 한다.

new Vue({
	el : "적용될ID",
    data : {이름:값,이름:값,,,}
})

1. html body에 직접 출력

   • {{이름}}

   <b>{{이름}}</b>

2. tag사이에 값을 출력

   • v-text="이름"

   <h2 v-text="이름"></h2>

3. value속성 값으로 출력

   • v-bind:value="이름" => v-bind는 생략가능 :value="이름"

     <input type="text" name="" v-bind:value="이름"/>

     ---

4. 프로젝트 생성

• vue create sec_vue

2. 사용할 vue 버전
   

3. 프로젝트 생성
   
4. 디렉토리 이동