본문 바로가기

Vue.js/[인프런]Vue.js제대로 배워볼래?4

Ch.03 Vue 프로젝트 생성 - 사용자 옵션으로 생성하기 2. 사용자 선택(Manually select features) 옵션으로 Vue 프로젝트 생성하기 vue create vue-manually 새 프로젝트를 생성한다. 맨 아래의 Manually select features를 선택하고 엔터. 이렇게 선택창이 뜨면 위의 네 가지를 스페이스로 체크하도록 한다 Babel : Es6 버전이나 TypeScript로 코딩할 경우에 브라우저 버전에 상관 없이 범용적인 Es 파일으로 자동전환 지원을 해줌 TypeScript : Vue에서 TypeScript로 코딩을 하는 경우 지원해주는 기능 Progressive Web App : Web App 개발을 지원해주는 기능 Router : (다음 강의에서 자세히 설명을 할 예정) Vue Router 를 위한 기능 Vuex : .. 2023. 3. 14.
Ch.03 Vue 프로젝트 생성 - Default 옵션으로 생성하기 1.Default 옵션으로 Vue 프로젝트 생성하기 vue create 프로젝트명 프로젝트명까지 적고 엔터를 치고 나면 이렇게 프리셋을 설정할 수 있도록 선택할 수 있는 창이 뜬다 Default값의 Vue3 최신 버전으로 다운을 받도록 하겠다 (폴더, 파일, 설정 등이 자동으로 생성된다) 이렇게 다운로드가 완료되었다면 cd vue-default npm run serve 입력하도록 한다 완료되었다면 http://localhost:8080/ 으로 들어가본다 정상적으로 실행된 모습을 볼 수 있다 위의 모습은 vue프로젝트 설치하면 처음에 뜨는 기본적인 화면이다. 따라서 위의 화면이 보인다면 정상적으로 모두 설치가 완료됐다는 뜻이다. 어떤 파일이 설치되었는지 살펴보자 node 프로젝트 해 본 사람들은 알겠지만 .. 2023. 3. 14.
Ch.03 Vue 프로젝트 생성 - Vue CLI 설치하기 Vue CLI 설치하기 - Vue 프로젝트를 생성하고, 관리하고, 빌드하는 제공을 제공해 준다. -Vue 프로젝트의 폴더 구조, 필요한 파일들, 기본 설정 옵션을 명령어를 통해 자동으로 만들어 준다. npm install -g @vue/cli 명령어 입력하기 (윈도우의 경우 admin 계정으로 로그인 해 사용중이라면 sudo 없이 그대로 명령어 입력해도 되지만, admin계정이 아니거나 os일 경우에는 맨 앞에 sudo를 붙여 입력해야 한다) -g란 global이라는 뜻이다. 지금 설치하는 플러그인은 어떤 하나의 프로젝트에 종속되어 사용하는 것이 아니고, 앞으로 어떤 프로젝트를 만들더라도 이 플러그인을 사용할 수 있도록 전역적으로 이 패키지를 설치하겠다는 의미.) Vue CLI를 이용해서 프로젝트 만들기.. 2023. 3. 5.
Ch.02 개발환경 구성 -Visual Studio Code 설치 더보기 검색해보고 설치가 안 되어있다면 따라하기 설치가 되어있다면 넘어가기 google에서 VS Code를 검색 후 첫번째 클릭 자신의 OS에 맞는 다운로드 화면이 뜬다 -맥은 설치형 파일이 아니라 실행 파일이 다운로드 됨 윈도우의 경우 파일을 다운로드 받은 후 설치를 누른다 동의합니다 > 다음 맨 아래 체크박스만 체크 후 다운로드 설치 체크박스에 체크 후 종료 까지 누르고 나면 쨘 - Node.js 설치 더보기 node.js 검색 후 Node.js클릭 자신의 OS에 맞는 다운로드 버전이 나와있다. 현재 버전 : 가장 최신 버전 LTS : 지금까지 나온 버전들 중 많은 사람들이 사용하면서 나온 버그들을 패치하여 가장 안정적인 버전 원하는 버전 다운로드 (원하는 버.. 2023. 2. 22.