-
[Vue] BootStrap 5 템플릿 적용하기개발일기 2021. 12. 2. 00:37
1. 프로젝트를 수행하면서..
Vue와 SpringBoot으로 프로젝트를 진행하기 시작할 무렵, 디자인에 대한 고민이 있었습니다.
초기에는, 그리드로 웹 영역을 나누어 스스로 만들어보았지만 결과물이 형편 없어서 BootStrap 5 템플릿을 적용해보기로 하였습니다. 이 글은 타인이 만든 BootStrap 5 템플릿을 Vue에 적용시키는 방법에 대한 팁으로서,
추후에 다른 템플릿을 더 적용해보면서 개선해 나갈 예정입니다.
적용 템플릿 : https://github.com/zuramai/voler
GitHub - zuramai/voler: The first Bootstrap 5 admin dashboard template
The first Bootstrap 5 admin dashboard template. Contribute to zuramai/voler development by creating an account on GitHub.
github.com
위의 템플릿을 적용한 이유
위의 템플릿을 적용한 이유는 BootStrap 5과 연관이 깊다. 대부분 인터넷에서 html 템플릿을 검색하면, BootStrap 4 버전의 템플릿을 다수 확인할 수 있습니다. 하지만, Jquery와 Javascript 버전에 예민한 BootStrap4는 실행해보면, 에러가 나는 경우도 빈번이 일어나고, 제대로 관리가 되지 않은 경우도 많습니다. 반면에 위의 템플릿은 BootStrap 5를 기반으로 제작되었으며, admin dashboard를 지원하여 여러가지 컴포넌트를 하나의 디자인으로 제작할 수 있게 지원해줍니다.
개인적으로, admin dashboard를 포함한 템플릿을 사용하여 홈페이지를 일관적으로 디자인하는 것을 추천합니다.
2. 깃허브 자료를 이용하여 Vue에 적용해보자
링크의 자료는 위와 같이 구성되어있습니다. 중요한 package.json 이외에도, 제작자가 설정한 기타 파일들을
Vue 프로젝트의 루트 폴더에 옮겨주기로 합시다! 또한, 템플릿의 package.json파일을 열어서
아래와 같이 scripts, dependencies, devDependencies를 기존 vue package.json에 내용을 추가합니다.
※ 혹시 모를 에러를 위해서 내용 전부를 추가하는 것을 추천함.
"scripts": { "test": "echo \"Error: no test specified\" && exit 1", "dev": "npm run development", ... }, "keywords": [], "author": "", "license": "ISC", "devDependencies": { "bootstrap": "^5.0.0", "laravel-mix": "^6.0.31", "laravel-mix-nunjucks": "^1.1.0", ... }, "dependencies": { "@popperjs/core": "^2.6.0", "apexcharts": "^3.19.3", "chart.js": "^2.9.4", ... }cli에 npm install로 종속성 설치를 완료하고 나면, Vue public폴더에서 사용할 css파일을 추가해줍니다.
참고로, npm run으로 프로젝트를 실행할 때, index.html을 진입점으로 실행되기 때문에 index.html파일에 필요한 css스타일을 적용하면 프로젝트 전체에 해당 스타일을 적용할 수 있습니다. 템플릿에서 제공해주는 assets 및 fonts 폴더를 public 폴더 밑으로 이동하면, 이제 자신이 원하는 css 스타일을 적용하는 과정만 남았습니다.
마지막..
대부분의 템플릿은 다음과 같이 여러개의 html파일에 자신의 템플릿 예제를 나누어서 제공하고 있습니다.
즉, html파일은 각각 다른 css링크와 자바스크립트 js를 포함하고 있기 때문에, 온전히 템플릿을 이용하고 싶으면, 자신이 필요한 부분(테이블, 리스트, navBar ...)에 해당하는 html파일에서 css링크와 자바스크립트 js를 복사하여, 자신의 index.html 파일에 전부 추가해주면 됩니다.
Index.html 코드 <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <link rel="icon" href="<%= BASE_URL %>favicon.ico"> <title><%= htmlWebpackPlugin.options.title %></title> <link rel="stylesheet" href="assets/css/bootstrap.css"> <link rel="stylesheet" href="assets/vendors/chartjs/Chart.min.css"> <link rel="stylesheet" href="assets/vendors/perfect-scrollbar/perfect-scrollbar.css"> <link rel="stylesheet" href="assets/css/app.css"> <link rel="shortcut icon" href="assets/images/favicon.svg" type="image/x-icon"> </head> <body> ... </body> <script src="assets/js/feather-icons/feather.min.js"></script> <script src="assets/vendors/perfect-scrollbar/perfect-scrollbar.min.js"></script> <script src="assets/vendors/chartjs/Chart.min.js"></script> <script src="assets/vendors/apexcharts/apexcharts.min.js"></script> <script src="assets/js/pages/dashboard.js"></script> <script src="assets/js/app.js"></script> <script src="assets/js/main.js"></script>실행화면
실행화면
끝으로
처음 작성한 게시물이라 다소 두서없이 진행된 것 같네요 ㅠㅠ. 하지만, 이렇게 작업 결과를 공유하면서 배운 것을 복습할 뿐 아니라, 나와같이 프론트엔드 디자인 제작에 어려움을 격는 많은 백엔드 개발자들에게 도움이 되었으면 합니다!
'개발일기' 카테고리의 다른 글
[Vue, SpringBoot] Naver SENS & Redis를 이용한 문자인증 서비스 (0) 2022.03.14