Vue+Vuetify+Vue-Router 시작하기 - 1
Vuetify는 현재 vue 3 버전에서 동작하지 않아 부득이하게 vue 2 버전으로 시작해야함.
"The current version of Vuetify does not support Vue 3. Support for Vue 3 will come with the release of Vuetify v3. When creating a new project, please ensure you selected Vue 2 from the Vue CLI prompts, or that you are installing to an existing Vue 2 project."
Vue 3 기반으로 Vue를 배운터라 시작부터 어려움이 많았기에 다시 정리해서 적어본다.
Vue만 있으면 뭐든 다 할 수 있을 줄 알았는데, 역시 디자인의 영역은 배운 사람들이나 하는 것이라는 것을 CSS 만져보면서 느꼈다.
뭔짓을 해도 이쁘지가 않아 시밤.. transition으로 애니메이션도 줘보고 클래스 바인딩도 해보고 별 짓 다해봤는데, 누가봐도 아마추어가 만든 웹 같았다. 그래서 테일윈드 CSS나 이것저것 들쑤시다가 그냥 뷰랑 쀼인 뷰티파이를 선택했다. 뭐든지 궁합이 중요하니까.
1. 프로젝트 생성.
Vue-cli를 통해 간편하게 프로젝트를 만들고자 한다.
터미널에서
vue create 프로젝트명
그러면 선택지가 주어질 텐데 위에서 언급했듯이 3에서는 뷰티파이를 정상적으로 쓰기 어렵다. 그렇기 때문에 2 버전을 선택함. vue 2 바벨 뭐 어쩌구 써있을거임.
생성된 프로젝트를 VC에서 open folder 후,
npm run serve
이렇게 하면 생성된 프로젝트가 로컬포트에서 열린다.
2. Vue-router 설치
방법은 여러가지가 있는데 그냥 내가 해본것은 두가지정도
2-1 직접 다운로드 / CDN
https://unpkg.com/vue-router/dist/vue-router.js
<script src="/path/to/vue.js"></script>
<script src="/path/to/vue-router.js"></script>
위와 같이 import 시키는 방법.
2-2 npm install
터미널에서 다음과 같이 입력한다.
npm install vue-router
npm으로 라우터모듈 설치가 끝나면 package.json에
"dependencies": {
"core-js": "^3.6.5",
"vue": "^2.6.11",
"vue-router": "^3.5.2"
},
위와같이 적혀있다. 그럼 라우터 설치 잘된거 ㅇㅇ
그 후 router.js(이름은 맘대로 지어도됨 import만 제대로 시켜주면 된다.) 파일을 생성하여 다음과 같은 내용을 삽입한다.
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
번역 >
"Vue에서 VueRouter 갖다 쓸거임"
이렇게 하면 일단 내가 시작할 프로젝트를 라우터를 갖다 써서 만들 수 있다.
아직 vuetify는 시작도 안함 ..
*해당 내용중 Vue cli, Vue-Router, Vuetify 설치방법은 대체로 공식문서를 보면 자세히 나와있다.
Author And Source
이 문제에 관하여(Vue+Vuetify+Vue-Router 시작하기 - 1), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@ghoon3911/VueVuetifyVue-Router-시작하기-1저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)