반응형 뷰js7 vue.js 실습) 프로젝트 생성 및 분석 주저리 앞서 지난 시간에 vue.js 많은 이론들에 대해서 살펴보다가 말았다ㅋㅋ 이제는 Back-End 개발자들을 위해 하나의 프로젝트를 생성해보면서 vuejs 아키텍처 가이드를 만들어보자! :) 바로 실습 들어가자! 위의 스크린캡쳐는 여러가지 정보를 담고 있다. 모르는 부분이 있다면 한번씩 검색해서 찾아보도록 하자. 1. npm node package manager의 약자로 node.js의 모듈 관리를 하기 위해 사용 - install : package를 설치할 때 사용 예) npm install 패키지명 package.json에 포함된 의존성 패키지들이 일괄적으로 설치 됩니다. - init : 프로젝트를 초기화 해주는 명령어로 package.json file을 만들어줍니다. npm init --hel.. 2022. 11. 16. Vue.js : SyntaxError: Cannot use import statement outside a module 간만에 앞단을 해보는데 오류가 발생! 오류내용 /usr/local/bin/npm run serve > kong-ui@0.0.0 serve /Users/terrypark/Project/kong-ui > vite preview /Users/terrypark/Project/kong-ui/node_modules/vite/bin/vite.js:2 import { performance } from 'node:perf_hooks' ^^^^^^ SyntaxError: Cannot use import statement outside a module at Module._compile (internal/modules/cjs/loader.js:892:18) at Object.Module._extensions..js (inte.. 2022. 10. 18. 제 4장 Vue.js 기초 이론 2021.08.17 - [Front/Vue.js] - 제 3장 Vue.js 둘러보며 친해지기! 저번 시간에 이래저래 필요한 것들에 대해서 알아보았다. 이제는 조금 더 파고 들어서 관련 내용들을 이해할 수 있도록 공부해보자. Vue.js는 SPA(Single Page Application) Framework Vue Instance는 MVVM패턴의 View Model에 해당 var vm = new Vue({ /* options */ }) 형태 참고 형태(View, Model) View는 vm.$el // The View 형태 vm.$data // The Model 형태 View(DOM)와 MOdel(Javascript Object) 사이의 통신을 가능하게 해주는 역할. binder를 가지고 있어 View와 .. 2021. 9. 7. 제 3장 Vue.js 둘러보며 친해지기! 2021.08.14 - [Front/Vue.js] - 제1장 - Vue.JS 환경설정과 프로젝트 생성 2021.08.14 - [Front/Vue.js] - 제 2장 Vue.js 프로젝트를 github과 연동 1장과 2장에서는 환경설정 -> 프로젝트 생성 -> github연동 3장에서는 더욱 더 친해지기 단계 입니다. 구조를 익히고 필요한것을 찾아보는 단계 아키텍처, 프로젝트 구조, vue.js에 필요한 것들에 대해서 더욱 더 나아가 소스 코딩도 해보고 github 명령어 사용도 해보고! add, commit, push, pull 등등 vue.js는 javascript framework이다. 즉, 개발자가 개발을 잘하도록 구조도 잡아주고 도와주는 친구다. 저번 시간에 우리는 vue/cli로 프로젝트를 만들.. 2021. 8. 17. 제 2장 Vue.js 프로젝트를 github과 연동 2021.08.14 - [Front/Vue.js] - 제1장 - Vue.JS 환경설정과 프로젝트 생성 제1장 - Vue.JS 환경설정과 프로젝트 생성 Vue.js 이녀석...찍먹만 하고 제대로 안했더니 이도저도 아닌게 되버렸다. 아래는 ace-t의 찍먹 현장 입니다 ㅋㅋ 2018.09.10 - [Front/Vue.js] - Vue.js 맛보기 2019.05.31 - [Front/Vue.js] - [acet-#1] Vue.js.. acet.pe.kr 저번 스터디에서는 로컬 개발환경 셋팅 및 프로젝트를 생성해보았습니다. 오늘은 만들었던 프로젝트를 github에 연동하는 것을 해보도록 하겠습니다. 다들 아시겠지만..! github은 소스를 관리해주는 녀석 입니다. 아~주 오래전 호랑이 담배피던 시절 githu.. 2021. 8. 14. 제1장 - Vue.JS 환경설정과 프로젝트 생성 Vue.js 이녀석...찍먹만 하고 제대로 안했더니 이도저도 아닌게 되버렸다. 아래는 ace-t의 찍먹 현장 입니다 ㅋㅋ 2018.09.10 - [Front/Vue.js] - Vue.js 맛보기 2019.05.31 - [Front/Vue.js] - [acet-#1] Vue.js 무작정 해보기(기본-Vue.js? 좋은거? 먹는거?) 2019.06.04 - [Front/Vue.js] - [acet-#2] Vue.js 무작정 해보기(용어 등 훝어보기!) 2019.06.12 - [Front/Vue.js] - const definitions are not supported by current javascript version 2019.06.18 - [OpenSource/Spring Boot] - VueJS를 연동.. 2021. 8. 14. Vue.js 맛보기 vue-cli 설치terrypark@localhost ~ sudo npm install vue-cli -gPassword:npm WARN deprecated coffee-script@1.12.7: CoffeeScript on NPM has moved to "coffeescript" (no hyphen)⸨░░░░░░░░░░░░░░░░░░⸩ ⠴ fetchMetadata: WARN deprecated coffee-script@1.12.7: CoffeeScript on NPM has moved to "coffeescript" (no hyphen)/usr/local/bin/vue -> /usr/local/lib/node_modules/vue-cli/bin/vue/usr/local/bin/vue-list -.. 2018. 9. 10. 이전 1 다음 반응형
