Vue.js 3.0 프로젝트 생성 및 구조

Vue.js 프로젝트 생성 및 구조

 

2020년도 맛보기로만 경험했던 Vue.js를 다시 공부해보려 합니다. 벌써 Vue3 버전까지 업데이트 되었고 아마 이전 버전에서 CDN으로만 스크립트를 추가해 배웠던 기억이 나는데요. 새로 추가된 기능도 있고 알아보니 3.0 버전이라고 이 버전만 배우면 되는게 아니더라구요. 2.0 부터 다시  처음부터 다시 배워야합니다.

 

 

아마 학원에서는 Todo List를 맛보기로 구현해보고 저는 바로 리액트로 갈아탔습니다. 로고 때문인지, 처음 느껴보는 라이브러리 때문인지는 모르겠지만 Vue.js도 나름 독특한 매력이 느껴졌습니다.

 

 

지금 뷰3의 경우 공식문서 한글화가 안되어 있어 조금은 불편하지만 2.0 부터 다시 시작하면서 진행해보겠습니다.

 

 

1. Vue-CLI 설치

---

> sudo su
> password 입력
> npm install -g @vue/cli

 

리액트의 CRA(create-react-app) 처럼 CLI 환경에서 뷰 프로젝트를 만들 수 있도록 글로벌 옵션으로 Vue-CLI를 설치해줍니다.

 

Vue CLI는 Vue.js Core에서 공식 제공하는 CLI로 프로젝트의 구성을 도와주는 역할을 하며, Vue 생태계 표준 툴 기준을 목표로 하고 있습니다. 굳이 CLI를 사용하지 않더라도 Vue.js를 사용하는데 무리 없는 선택사항이라고 합니다.

 

하지만 프로젝트의 폴더 구조 설정과 오픈 소스 사용, webpack 설정 등에 대한 고민을 덜어주기 때문에 저는 꼭! 사용하도록 하겠습니다.

 

 

간혹 root 계정으로 설치하지 않아 'zsh: command not found: vue' 에러가 생길 수 있으므로 한 번 확인이 필요합니다.

 

 

2. Vue 프로젝트 생성

---

> vue create <프로젝트 이름>

 

Vue CLI v5.0.1
? Please pick a preset: 
  Default ([Vue 3] babel, eslint) 
  Default ([Vue 2] babel, eslint) 
❯ Manually select features

 

- Default : babel과 eslint가 자동으로 설치된다.

- Manually select features : vuex, vue-router 등 선택적으로 몇 가지 더 설치 가능하다.

 

> Manually select features 를 선택해준다.

 

 

? Check the features needed for your project: (Press <space> to select, <a> to t
oggle all, <i> to invert selection, and <enter> to proceed)
❯◉ Babel
 ◯ TypeScript
 ◯ Progressive Web App (PWA) Support
 ◉ Router
 ◉ Vuex
 ◉ CSS Pre-processors
 ◉ Linter / Formatter
 ◯ Unit Testing
 ◯ E2E Testing

해당 글에서는 Babel, Router, Vuex, CSS pre-processors, Linter/Formatter를 선택해 프로젝트를 구성할 것이고 Unit Testing은 제외합니다. 키보드 화살표키와 스페이스바로 선택해주고 엔터키로 넘어가줍니다.

 

• babel : 자바스크립트 최신 문법의 코드를 호환 가능한 현재 하위 문법으로 자동 변환(ES2015)
• eslint : 자바스크립트 문법이나 코딩 스타일을 체크해서 알려준다.

 

? Choose a version of Vue.js that you want to start the project with 
❯ 3.x 
  2.x

뷰 버전은 3.0 버전으로 선택해줍니다.

 

? Use history mode for router? (Requires proper server setup for index fallback 
in production) (Y/n)

Y 선택

 

? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported 
by default): (Use arrow keys)
❯ Sass/SCSS (with dart-sass) 
  Less 
  Stylus

본인이 사용하는 CSS 전처리기 모듈을 선택해줍니다. 제 경우 기존 CSS가 편하므로 Sass/SCSS를 선택했습니다.

 

? Pick a linter / formatter config: (Use arrow keys)
❯ ESLint with error prevention only 
  ESLint + Airbnb config 
  ESLint + Standard config 
  ESLint + Prettier

ESLint 와 관련한 항목입니다. 어떤 항목을 선택해도 ESLint는 설치되나 어떤 룰을 적용할지 선택하는 항목입니다. Standard config를 선택했습니다.

 

? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i
> to invert selection, and <enter> to proceed)
❯◉ Lint on save
 ◯ Lint and fix on commit
 
 
 ? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
  In dedicated config files 
❯ In package.json 
  
  
  ? Save this as a preset for future projects? (y/N) N
  
  Use Yarn 
❯ Use NPM

나머지는 대략 위 처럼 선택해주었고 프로젝트 생성을 마무리합니다.

 

> npm run serve

프로젝트 서버 실행을 위해 명령어를 입력해주고 localhost:8080 으로 접속하면 아래와 같이 페이지가 표시됩니다.

 

 

vue.js study

 

Vue.js 프로젝트 구조

---

VUE_PROJECT
 ㄴ node_modules    //npm 패키지들의 저장 위치
 ㄴ public          //정적 파일 저장 위치 또는 배포버전 빌드시 필요한 파일이 저장 된다.  
 ㄴ src             //대표적인 코드 작성 위치
     ㄴ assets      //font, icon, images etc..
     ㄴ components  
     ㄴ router
     ㄴ store
     ㄴ views       
     ㄴ App.vue
     ㄴ main.js      
 ㄴ .editorconfig
 ㄴ babel.config.js
 ㄴ jsconfig.json
 ㄴ package.json
 ㄴ vue.config.js
 ㄴ dist             //빌드한 결과물이 저장됨

 

 

참고

---

[Vue.JS] Vue-CLI 3 시작하기

Vue JS 이해 및 환경설정