본문 바로가기

Frontend/Vue.js

(4)
Vue cli 설치하기 이전 시간에는 cdn을 사용해서 Vue.js를 사용하는 방법을 알아보았는데요, 일일이 cdn을 이용하여 import하지 않아도 vue cli(command line interface)를 설치하면 더 쉽게 Vue.js를 이용할 수 있습니다. 먼저 vue cli를 검색하면 vue 공식 홈페이지가 나옵니다. 화면에 보이는 Vue CLI를 클릭해서 사이트로 접속합니다.홈페이지에 들어가면 vue cli를 설치하는 방법이 나와 있습니다. npm install -g @vue/cli 또는 yarn global add @vue/cli 명령을 통하여 Vue CLI 사용이 가능합니다. global은 전역으로 설치한다는 뜻으로 한 프로젝트가 아닌 전체의 파일에서 사용할 수 있게 적용하는 것입니다.터미널 창에서 npm inst..
Vue Parsing error: No Babel config file detected 해결법 Vue에서 프로젝트를 만들었는데 갑자기 빨간색 표시가 나타나면서 Parsing error: No Bable config file detected ~ 관련 에러가 나타났다. 알고보니 Extension으로 사용하는 Eslint 설정 파일에서 인식하는 문제가 발생한 것이었다.  ESLint에 있는 설정 버튼 아이콘을 누르면 확장 설정이 보이는데 클릭해준다.  Eslint 관련 설정 목록들이 보이는데 중간에 settings.json에서 편집이라는 항목들이 보이면 아무거나 클릭해준다.  여기서 아래와 같은 내용을 추가해주면 문제가 해결된다."eslint.workingDirectories": [    {"mode": "auto"}  ],  이제 오류가 나지 않는 것을 볼 수 있다.  즐거운 시간 보내세요~
Vue.js 시작하기/Vue.js 코드 맛보기 웹 개발에 관심있는 사람이라면 Vue를 한 번쯤은 들어보았을 것입니다. 주로 프론트엔드 개발자들이 많이 사용하는 프레임워크 중에서 React, Vue, Angular가 언급되고는 합니다. 그 중에서도 React와 Vue는 취업 시장에서도 가장 많은 수요를 가진 프레임워크들입니다. Vue.js는 Google에서 근무하였던 중국인 개발자 Evan You에 의해 만들어졌습니다. Evan You는 Angular의 장점만을 뽑아내어 가벼운 프레임워크를 이용하고자 만든 것이 Vue.js입니다. 어쨌거나 Vue.js를 시작해봅시다. Vue.js 개발 환경이 갖추어져 있지 않다면 아래 링크를 참조합시다. 참고로 Vue.js 프레임워크를 사용하기 위해서는 자바스크립트 기초 지식을 갖춘 상태에서 시작해야 합니다.   우선..
Vue.js 개발 환경 설정하기 우선 Vue.js를 사용하기에 앞서서 설치해야 할 것들이 몇 가지가 있습니다. 우선 Vue를 사용할 웹 에디터가 있어야 하는데요, 많은 개발자들이 사용하는 VS Code를 설치해주시면 될 것 같습니다. Visual Studio Code - Code Editing. RedefinedVisual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications.  Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows.code.visualstudio.com  ..