vue router, vuetify 설치하기 #13

vue router ?

페이지간 이동을 위해 필요한 vue router 설치.

Vue.js의 공식 라우터로 Vue.js 코어와 긴밀히 통합되어 Vue.js로 단일 페이지 애플리케이션을 쉽게 구축할 수 있게 해 준다.

☞ 공식 사이트

https://router.vuejs.org/installation.html

vuetify ?

자바스크립트 프레임워크로 개발자들에게 필요한 기능들을 제공하는 개발 프레임워크이다.

☞ 공식 사이트

https://v15.vuetifyjs.com/ko/getting-started/quick-start

vue router 설치

• vue 설치 디렉터리로 이동한다.
• npm install vue-router@3  로 설치
  • vue2 버전을 설치했기 때문에 vue router 도 3으로 설치한다.
  • vue3 인 경우에는 vue router 4로 설치

pubdweb % ls
README.md    jsconfig.json    package-lock.json    public    vue.config.js
babel.config.js    node_modules    package.json    src
pubdweb % npm install vue-router@3 

added 1 package, and audited 964 packages in 2s

112 packages are looking for funding
  run `npm fund` for details

9 moderate severity vulnerabilities

To address issues that do not require attention, run:
  npm audit fix

To address all issues (including breaking changes), run:
  npm audit fix --force

Run `npm audit` for details.
pubdweb %

vue router 설치 버전 확인

• 프로젝트 폴더에서 package.json 파일의 dependencies에서 확인 가능
  • vue-router 3.6.5

vue 프로젝트 package.json

vuetify 설치

• vue cli 설치 디렉터리 pubdweb으로 이동한다.
• vue add vuetify로 설치한다.
• Vuetify 2 - Vue CLI (recommended)로 선택

vuetify install

vuetify 설치 버전 확인

• 프로젝트 폴더에서 package.json 파일의 dependencies에서 확인 가능
  • vuetify 2.6.0

vue 프로젝트 package.json

마무리

vue router, vuetify 설치 마무리되었고,

이제 vue.js로 개발될 화면들을 그려본다.