반응형 개발자 :-)/Vue.js6 [Vue] CLI로 생성한 프로젝트 폴더 구조 확인 1. npm run serve 란 npm run serve : package.json 에 정의된 script 이며 프로젝트를 실행 npm run serve = vue-cli-service serve 2. public/index.html 1) 가 기본으로 정의되어있음 2) build된 파일들이 자동으로 추가될것이다. (src 에 있는 파일들이 종합해서 하나의 파일로 변환하여 주입된다는 의미) - webpack 3. main.js 여기서 new Vue(~~)는 그동안 실습했던 아래 소스와 같다(render:h => h(App), 을 제외한다면) new Vue({ el: '#app' }) render 는 App(./App.vue) 이라는 컴포넌트의 내용을 불러와서 Vue 객체에서 사용하겠다는 의미 4. .vu.. 2023. 2. 9. [Vue] CLI 설치와 2.x, 3.x버전 차이, 프로젝트 생성하기 CLI 란 명령어를 통해 특정 액션을 수행하는 도구 Vue CLI 설치 1. 공식사이트 접속 https://cli.vuejs.org/ Vue CLI cli.vuejs.org 1) vsCode 에서 상단에 터미널 새로 open (ctrl + shift + `) 2) node -v 명령어로 node 버전 확인하기 (v10 이상으로 맞춰야 이후 실습과 동일하게 진행할 수 있다) * node : 'node' 용어가 cmdlet, 함수, 스크립트 파일 또는 실행할 수 있는 프로그램 이름으로 인식 되지 않습니다. 이름이 정확한지 확인하고 경로가 포함된 경우 경로가 올바른지 검증한 다음 다시 시도하십시오. 설치했는데도 위와 같은 에러가 발생하면, VSCode 가 실행중일 때 설치된 것으로 node.js 를 인식 못할.. 2023. 2. 8. [Vue] 뷰의 템플릿 문법 뷰의 템플릿 문법이란 뷰로 화면을 조작하는 방법을 의미한다. 템플릿 문법은 크게 데이터 바인딩과 디렉티브로 나뉜다. 데이터 바인딩 뷰 인스턴스에 정의한 속성들을 화면에 표시하는 방법 {{ message }} new Vue({ data: { message: 'Hello Vue.js' } }) 디렉티브 디렉티브는 뷰로 화면의 요소를 더 쉽게 조작하기 위한 문법이다. "v-"가 붙는 표현들 Hello Vue.js new Vue({ data: { show: false } }) 2023. 2. 7. [Vue] 뷰 액시오스(Axios) Ajax란 비동기적인 웹 애플리케이션의 제작 -> single page application 개발이 더 쉬워짐 axios https://github.com/axios/axios GitHub - axios/axios: Promise based HTTP client for the browser and node.js Promise based HTTP client for the browser and node.js - GitHub - axios/axios: Promise based HTTP client for the browser and node.js github.com Promise(javascript 의 비동기 처리패턴) 기반의 HTTP 통신 라이브러리 javascript 의 비동기 처리패턴 2023. 2. 2. 이전 1 2 다음 728x90 반응형
