vue, vue cli 설치하고 버전 확인 #12

국회도서관 자료검색 서비스를 위한 프런트엔드 웹 환경 구성

작업 환경

• 작업폴더명
  • public_data/pubd_web
• 프로젝트 명
  • pubdweb
• OS
  • macOS sonoma v 14.5

☞ vue cli 의 가이드는 아래 URL에서 자세히 다루고 있다.

https://cli.vuejs.org/

 

vue cli 는 vue.js 프레임워크를 포함하고 있어, 별도 vue.js 설치를 안 해도 된다.

• vue.js 프로젝트 생성 시 vue version 선택가능

vue cli 설치

• pubd_web 폴더로 이동하여 설치
  • npm install -g @vue/cli
  • vue cli 는 전역으로 설치되기 때문에 이전에 설치한 이력이 있으면 vue project로 바로 진행하면 된다.

pubd_web % npm install -g @vue/cli

Vue project 설치

• vue create pubdweb
  • vue 2 버전으로 선택한다.

vue version 선택

• Successfully created project pubdweb. 나오면 성공

Vue Project 설치 확인

• pubdweb 작업폴더 이동
• 서버 실행
  • npm run serve

pubd_web % cd pubdweb   
pubdweb % ls
README.md    jsconfig.json    package-lock.json    public    vue.config.js
babel.config.js	  node_modules    package.json    src
pubdweb % npm run serve

vue cli 서버 실행

• http://localhost:8080/ 이동

vue project 서버 실행

vue 버전 확인

• vue cli 버전 확인 ( 5.0.8 )
  • vue --version
• vue.js 버전 확인 ( 2.7.16 )
  • npm list vue

pubdweb % vue --version
@vue/cli 5.0.8
pubdweb % npm list vue
pubdweb@0.1.0 ~~/public_data/pubd_web/pubdweb
├─┬ @vue/cli-plugin-babel@5.0.8
│ └─┬ @vue/babel-preset-app@5.0.8
│   ├─┬ @vue/babel-preset-jsx@1.4.0
│   │ └── vue@2.7.16 deduped
│   └── vue@2.7.16 deduped
└── vue@2.7.16

마무리

vue cli 설치 완료되어 front-end 개발을 시작하기 위한 조건이 완성되었다.

다음에는 페이지간 이동을 위해 필요한 vue router 설치하고,

vue 를 이쁘게 꾸며줄 수 있는 vuetify를 설치해 본다.