[Vue] MAC에서 Vue.js 설치하기 + Vuetify 사용하기

hwwwa·2023년 2월 12일

개발환경

Intel Chip Macbook Pro (2019)
MacOS Monterey 12.6.2

Prerequisites

Node.js 설치

Node.js 공식 홈페이지: https://nodejs.org/en/download/

$ brew install node

$ node -v
v18.14.0

$ npm -v
9.3.1

Yarn 설치

$ brew install yarn

$ yarn -v
1.22.19

Vue-Cli 설치

Vue CLI란?
- Vue 개발을 편하게 시작할 수 있도록 프로젝트를 구성해주는 도구
- 초기 프로젝트 구성을 해주므로 폴더구조, lint, build, webpack 설정에 대한 고민 없이 쉽게 프로젝트 구성 가능
Vue CLI 공식 홈페이지 참고: https://cli.vuejs.org/

$ npm install -g @vue/cli
# OR
$ yarn global add @vue/cli

권한 관련 오류가 발생한다면 명령어 앞에 sudo 를 붙여서 실행해주면 된다

$ vue --version
@vue/cli 5.0.8

visual studio에서 vetur를 설치해주면 Vue를 편리하게 사용 가능

프로젝트 생성

$ vue create <프로젝트 이름>

Vue CLI v5.0.8
?  Please pick a preset:  Default  ([Vue  3] babel, eslint)  
?  Pick the package manager to use  when installing dependencies:  Yarn


$ cd <프로젝트 이름>
$ yarn serve

Vue Router 설치

$ npm install -S vue-router

Vue CLI 프로젝트 Preset 생성하기

$ vue create <프로젝트 이름>

vue create 명령어 실행 후 Manually select features 선택

?  Please pick a preset:  Manually select features
?  Check the features needed for your project:
	Babel
	Router
	Vuex
	Linter / Formatter
? Choose a version of Vue.js that you want to start the project with: 3.x
? Use history mode for router? Y
? Pick a linter / formatter config:
	ESLint + Standard config 
? Pick additional lint features:
	Lint on save
? Where do you prefer placing config for Babel, ESLint, etc.?
	In package.json 
? Save this as a preset for future projects? Y
? Save preset as: 원하는 이름 입력