백엔드와 다르게 프론트엔드 프로젝트의 셋업은 크게 어렵지 않습니다. Vue-CLI가 설정을 알아서 다 해주기 때문에 CLI만 사용할 줄 알면 됩니다.
Vue-CLI 설치
Npm을 이용해 글로벌하게 설치해줍니다. 물론 yarn을 써도 상관 없습니다.
npm install -g @vue/cli설치가 성공적으로 이뤄졌으면 아래 명령어를 통해 확인할 수 있습니다.
vue --version프로젝트 생성
vue create명령어를 사용하면 프로젝트를 생성할 수 있습니다. 만약 Windows에서 git bash를 사용하면 아래 명령어 대신 winpty vue.cmd create <프로젝트 이름>을 사용해야합니다.
vue create <프로젝트 이름>그러면 프리셋 설정 중 하나를 선택하거나 옵션들을 수동으로 선택할 수 있습니다. Manually select features를 선택해주면 여러가지 선택지들이 나올텐데 Typescript와 Unit Testing, CSS pre-processor를 선택해줍니다(space를 사용합니다). 그 외에 옵션들은 필요에 따라 선택해줍니다. 저는 Router를 추가로 선택했습니다.
그러면 이제 각 옵션에 대한 세부 옵션을 물어볼텐데 아래대로 선택해줍니다. 이 외에 설치한 것들이 있으면 원하는 옵션을 선택해주면 됩니다.
버전: 3.x
class-style component syntax? N
Use Babel alongside TypeScript? Y
Use history mode for router(Router 선택시)? Y
Pick a CSS pre-processor: Sass/SCSS (with dart-sass)
Pick a unit testing solution: Jest
Where do you prefer placing config for Babel, ESLint, etc? In dedicated config files그러면 선택한 옵션대로 프로젝트를 파일을 생성해줍니다.
Bootstrap 5 사용
우선 bootstrap을 설치해줍니다. 생성된 프로젝트 폴더 안에서 아래 스크립트를 실행해줍니다.
npm install bootstrap그리고 src/App.vue파일을 열고 아래쪽의 <style lang="scss">바로 아랫줄에 bootstrap.scss파일을 임포트해주면 모든 파일에서 bootstrap클래스를 사용할 수 있습니다.
@import 'bootstrap/scss/bootstrap';