vuetify5 Vuetify (Vue UI Library) 세팅하기 Vuetify란 무엇인가 뷰티파이는 vue 프레임워크를 사용해서 개발할 때 UI를 손쉽게 구성할 수 있도록 도와주는 라이브러리입니다. 개발에서 자주 사용되는 버튼이나 기능들을 손쉽게 찾아 쓸 수 있기 때문에 아직 미숙한 개발자들에게 개발 소요시간을 대폭 단축시킬 수 있다는 장점이 있습니다. 다만 이미 구조화된 UI를 가져다 쓰는 것이기 때문에 디테일한 CSS를 적용하기는 어려울 수 있습니다. 저희는 일단 개발에 익숙해지는 단계이기 때문에 Vuetify를 설치하고 템플릿을 가져다 쓰는 방식으로 개발을 진행해보겠습니다. 먼저 이전 글에서 설명한 것처럼 vuetify를 설치한 후 다음 내용을 진행하시기 바랍니다. https://simsimcoding.com/entry/Vue-%ED%94%84%EB%A1%9C%.. 2022. 9. 20. Backoffice(관리자 페이지) 살펴보기 왜 관리자 페이지인가? 관리자 페이지는 어느 기업에서나 무슨 프로젝트를 하던 필수 불가결한 존재입니다. 게임을 만들더라도, 온라인 쇼핑몰을 하더라도, 캐주얼 앱뿐만 아니라 그냥 평범한 회사 홈페이지를 만들더라도 관리자 페이지는 필요하기 때문입니다. 가장 많이 쓰이며 보편적인 기능을 포함하기 때문에 저희가 도전해 보기 아주 좋은 과제입니다. 난이도 또한 어려운 것은 별로 없습니다. 그럼 Vuetify 마켓에 올라온 샘플 관리자 페이지를 보면서 관리자 페이지가 무엇인지 좀 더 자세히 살펴보겠습니다. 앞으로 프로젝트 진행 시 Google Chrome을 사용합니다. Google Dev Tool(구글 개발 도구)는 웹 개발에 있어 매우 중요한 역할을 하기 때문에 다른 익스플로러를 사용하시는 분들은 지금 꼭 설치하.. 2022. 3. 4. Vue 프로젝트 세팅하기 Vue 프로젝트 생성 시 수동으로 옵션 선택하기 이전에 생성했던 프로젝트는 vue에 대해 알아보기 위하여 자동으로 빠르게 생성하였으나, 이제 앞으로 작업할 방식에 맞게 수동으로 옵션을 선택하여 새로운 프로젝트를 다시 생성할 것입니다. 먼저 VS Code를 닫고 이전에 생성한 폴더로 이동하여 webproject 폴더를 삭제합니다. 저의 경우 D:\dev\New 안에 있던 작업 폴더를 삭제하여 완전히 빈 폴더가 되었습니다. 그리고 다시 VS Code를 열어 New 폴더를 엽니다. 여기에 이전과 같은 명령어로 Vue-CLI를 실행합니다. 새로운 작업 폴더의 이름은 "newproject"로 하였습니다. vue create newproject 처음 나오는 옵션에서 수동으로 피쳐 선택(Manually select .. 2022. 3. 3. Vue 새 프로젝트 구성하기 1. Visual Studio Code 설치 가장 먼저 작업할 코드 편집 툴이 필요합니다. 따로 사용하시는 코드 편집 툴이 없다면 Visual Studio Code(이하 VS Code)를 사용하겠습니다. 다운로드 사이트 링크 주소: https://code.visualstudio.com/ Visual Studio Code - Code Editing. Redefined Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications. Visual Studio Code is free and available on your favorite platform - L.. 2022. 3. 2. 이전 1 2 다음
