[핵심만 골라 배우는 Vue.js by 수코딩] 1. VSCode, vue 생성하기

실전을 위한 요약

1. vue 사용시 npm 을 계속 사용 >> node.js 설치 필수 
     node -v
2. vue.js 폴더로 이동 의존성 패키지 설치 
     npm install 
3. 개발 폴더 실행 
    npm run dev
4. 배포시
  npm run build

   

 

 

 

비쥬얼 스튜디오 코드	왼쪽 상단		익스플로러 검색 버전관리 디버깅 익스텐션 (=플러그인)    - Material Theme => 기본기능으로 변경 테마 선택    - Material Icon Theme => 기본기능으로 변경 아이콘 선택   - Auto Rename Tag : html 의 뒤 태그를 자동으로 같이변경   - HTML to CSS autocompletion : html을 css에서 찾기쉽게   - HTML CSS Support : css 를 HTML 에서 찾기쉽게   - CSS Peek : 윈도우 ctrl 누르면 해당 css 바로이동   - Autoprefixer : css3 속성 + setting > command 팔레트  autoprefixer 사용시 젠더 프릭픽서가 자동으로 붙음   - bracket pair colorizer2 => 기본기능으로 변경   - indent-rainbow : 들여쓰기 공간 컬러플하게   - live server : html 변경내용이 새로고침 안해도 되게                   setting > command 팔레트  > live server : open with live server   - prettier - code fomatter : 코드 정렬               setting > default formatter > prettier
	왼쪽 하단		사용자 셋팅 - command 팔레트 : 비주얼 스튜디오 명령어 바로실행  - settings : 폰트 외 환경
	작업폴더 지정		익스플로러 > open folder
	HTML 기본 작성		! + tab
	자동정렬		익스텐션 prettier - code fomatter :설치 setting > tab size 2 setting > default formatter  prettier setting > format on save  선택 backup and sync settings 클릭
	vue 사용설정	익스텐션	Vue (Official) ,Vue VSCode Snippets(코드조각) 설치
		상단메뉴 터미널 > new 터미널	1. vue cli 다운 npm install -g @vue/cli       ... 맥은 sudo 앞에 추가.  2. npm 설치 확인 (node 설치시 설치됨,  node 16버전이상) > npm -v  11.0.0 > node -v v22.13.0

 

 

CDN	Content Delivery Network		https://ko.vuejs.org/  문서 > 빠른시작     <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>     <div id="app">{{ message }}</div>     <script>       const { createApp, ref } = Vue;       createApp({         setup() {           const message = ref("Hello vue!");           return {             message,           };         },       }).mount("#app");     </script>
	장점		1. script로 쉽게 라이브러리 설치 2. 라이브러리 웹캐시로 다음방문시 빠름
	단점		1. 라이브러리 버전관리 어려움 , 의존성관리 어려움 2. CDN 서버 다운되면 , 뷰 js 애플리케이션도 사용불가 3. HTML 파일과 함께 작성되어 규모가 크면 어려움
NPM	Node Package Manager		npm init vue@latest    // vue js 프로젝트 스캣폴딩 프로젝트명 "." 입력시 현재폴더이름 패키지이름 폴더이름 같게 권장  npm install     // package.json 써있는것 node_modules 에 설치 npm run dev
	장점		1. 패키지 설치 관리 쉬움 2. SFC 사용 SPA 구현 수비다.  3. 뷰 공식 권장
	단점		기본설치 파일이 있어 작은규모 불필요
Vue CLI	Command Line Interface		npm install -g @vue/cli vue --version vue create vue-cli       //  vue create .      << 현재폴더 설치 vue 버전 선택 설치 가능.
			더이상사용안함  NPM 방법으로 사용할것.  2.x 버전일때 많이 사용된 설치방법