Vue CLI 설치
Node.js는 기본적으로 설치되어있다는 가정 하에 설치를 진행한다.
Node.js 버전은 16.14.1이고, npm 버전은 8.5.0이다.
yarn이 아닌 npm을 사용하여 설치를 진행한다.
Vue CLI 홈페이지
https://cli.vuejs.org/guide/installation.html
Installation | Vue CLI
Installation Warning regarding Previous Versions The package name changed from vue-cli to @vue/cli. If you have the previous vue-cli (1.x or 2.x) package installed globally, you need to uninstall it first with npm uninstall vue-cli -g or yarn global remove
cli.vuejs.org
위 사이트에 접속하면 Vue CLI를 설치하는 npm과 yarn 명령어가 있다.
둘 중 사용하는 프로그램을 이용하여 Vue CLI를 설치하도록 한다.
설치하기
npm install -g @vue/cli명령어를 입력해주면 시간이 좀 걸린 뒤 설치가 완료된다.
Vue CLI 2.x VS 3.x
Vue CLI 2.x
vue init '프로젝트 템플릿 유형' '프로젝트 폴더 위치'
vue init webpack-simple '프로젝트 폴더 위치'
Vue CLI 3.x
vue create '프로젝트 폴더 위치'Vue CLI 2.x 버전에 비해 3.x 버전이 훨씬 간략해졌다.
Vue 프로젝트 생성
VScode를 사용하여 Vue 프로젝트를 생성해본다.
vue create 명령어 실행 시 오류가 발생한다면 아래 글을 참고한다.
[Vue.js] vue create 시 파일을 로드할 수 없는 문제
Vue CLI를 사용하여 Vue 프로젝트 생성 시도 중 오류가 발생하였다. vue : 이 시스템에서 스크립트를 실행할 수 없으므로 파일을 vue.ps1 파일을 로드할 수 없습니다. 자세한 내용은 about_Execution_Policies(
mimah.tistory.com
vue.cmd vue create vue-cli
vue.cmd 명령어를 사용하여 vue-cli라는 Vue 프로젝트 폴더를 생성하였다.
위와 같은 과정이 터미널 창에 뜨게 된다.
(과정 중간 yarn과 NPM 중 사용할 패키지 매니저를 선택하라고 한다. 본인에게 편한 것을 선택하면 되고, 필자는 NPM을 사용하였다.)
프로젝트 폴더가 생성되고 나면 위와 같은 파일들이 자동으로 생성된다.
터미널 창에서 생성한 Vue 프로젝트 폴더로 이동한 뒤, npm run serve를 통해 프로젝트를 실행시킨다.
cd vue-cli
npm run servenpm run serve를 실행하면 Vue 프로젝트 내에 있는 package.json 파일에 담긴 내용을 따라 서버를 실행시키겠다는 뜻이다. 해당 파일을 살펴보면 scripts: {} 부분에 serve가 있는데, npm run serve가 실제로는 vue-cli-service serve 명령어를 수행하는 것이다.
npm run serve를 통해 실행시키는 파일은 Vue 프로젝트 폴더 > public > index.html이다.
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>해당 파일을 살펴보면 위처럼 코드가 작성되어 있는데 <div> 태그 내에 위치한 주석 처리가 중요한 역할을 한다. 빌드된 파일들이 주석 위치에 존재한다는 것이다.
Vue 프로젝트 폴더 내 src 폴더에 있는 파일들을 종합해서 최소한의 파일로 변환하여 처리해준다.
프로젝트가 실행되면 위와 같은 내용이 출력된다.
직접 Local URL을 입력하여 페이지에 접속해도 되고, 위 링크를 Ctrl + 마우스 왼쪽 클릭하여 접속하여도 된다.
8080 포트가 사용 중이 아니라면 기본으로 8080 포트로 지정된다.
