1.웹개발/VUE (7) 썸네일형 리스트형 netlify deploy 간단 배포하기 - Vue 프로젝트 작업환경 운영체제 : window 필요 준비물 1. vue 프로젝트 2. github 계정 3. netlify 계정 vue 프로젝트 만드는 법 -> https://hbsowo58.tistory.com/479?category=938110 Vue 프로젝트 만들기 환경 운영체제 : window 10 RAM : 8.00 GB 프로세서 : Intel(R) Core(TM) i5-8265U CPU @ 1.60GHz 1.80 GHz 설치 npm i -g @vue/cli vue --version boilerplate 설치 vue create 프로젝트명 Linter는 제거 (경고.. hbsowo58.tistory.com github 회원가입 https://github.com/ GitHub: Where the world b.. v-if v-show 디렉티브 차이 vue 프레임워크에 조건부 렌더링 디렉티브에는 v-if, v-show 두 가지가 있습니다. 차이는 존재는 하나 보이지 않는 것(display:none)과 존재 자체를 지우는 차이(주석 처리)입니다. (개발자 도구 참조) v-show를 사용하게 되면 작성하지 않은 diplay:none속성이 적용되어있습니다. 화면에만 존재하지 않기 위한 목적입니다. v-if를 사용하게 되면, 존재 자체가 사라지게 됩니다. 주석 처리 한 것과 같습니다. '눈에만 보이지 않는 것과', '존재하지 않는 것' 두 가지 차이로 구분하는 것입니다. 어떤 경우에 사용하게 될까요? v-if는 로그인 / 로그아웃 버튼에 사용합니다. 로그인을 하게 되면, 로그인 버튼은 필요하지 않기 때문입니다 v-show는 dialog 창에 사용합니다. 사.. vue & 인스턴스 인스턴스 뷰로 개발할 떄 필수로 생성해야 하는 코드 (객체지향 프로그래밍에서 클래스 구조로 할당된 실체) new Vue(); const vm = new Vue(); console.log(vm); 생성자 함수(대문자 암묵적동의) function Person(name,job){ this.name = name; this.job = job; } const p = new Person('heo', 'developer') console.log(p) 뷰를 생성자 함수로 찍어내는 이유 api와 속성들을 미리 넣어둠 인스턴스에서 사용할 수 있는 속성 & API el, template, data,methods,created,watch [vue-router] Duplicate named routes definition 해결 번역기 결과 : 중복 명명된 경로 정의 라우터 정의에서 네임이 중복됬다는 경고로 추측 name속성을 살펴보니 중복된 내용발견 //src/router/~~~.js { name: "hello wolrd" ... }, ... { name: "hello wolrd" ... } ... name 속성을 변경 apexcharts/vue git 사용하기 프로젝트 생성 git clone https://github.com/apexcharts/vue-apexcharts.git 폴더 변경 및 node_module폴더 생성 및 serve 명령어 수행(내부적으로 웹팩 개발 서버인 webpack-dev-server를 사용) -> 코드변경분이 새로고침 없이 반영가능 cd vue-apexcharts/example & npm i & npm run serve 참고자료 github.com/apexcharts/vue-apexcharts apexcharts/vue-apexcharts 📊 Vue.js component for ApexCharts. Contribute to apexcharts/vue-apexcharts development by creating an account .. APEXCHARTS 라이브러리 사용하기 (vue) 환경 운영체제 : window 10 RAM : 8.00 GB 프로세서 : Intel(R) Core(TM) i5-8265U CPU @ 1.60 GHz 1.80 GHz 프로젝트 만들기 (링크참조) hbsowo58.tistory.com/479 Vue 프로젝트 만들기 환경 운영체제 : window 10 RAM : 8.00 GB 프로세서 : Intel(R) Core(TM) i5-8265U CPU @ 1.60GHz 1.80 GHz 설치 npm i -g @vue/cli vue --version boilerplate 설치 vue create 프로젝트명 Linter는 제거 (경고.. hbsowo58.tistory.com apexcharts & vue-apexcharts 설치 npm install --save apexch.. Vue 프로젝트 만들기 환경 운영체제 : window 10 RAM : 8.00 GB 프로세서 : Intel(R) Core(TM) i5-8265U CPU @ 1.60 GHz 1.80 GHz 설치 npm i -g @vue/cli vue --version boilerplate 설치 vue create 프로젝트명 Linter는 제거 (경고 & 에러때문에 프로젝트 진행에 시간 많이 소요) + Router, Vuex 추가 2.x 버전선택 나머지 default cd 프로젝트명 npm run serve 이전 1 다음
