vue cli는 vue.js 로 프로젝트를 구성할때 아주 편리한 도구이다.
vue.js로 프로젝트를 구성하는데 필요한 webpack 설정이나 플러그인 등을 쉽게 연동할수 있어 프로젝트를 생성하기 쉽게 해준다.
vue cli 설치
1 2 3 | npm install -g @vue/cli yarn global add @vue/cli | cs |
npm이나 yarn 중에 선택하여 전역으로 인스톨한다.
프로젝트 생성
1 | vue create my-project | cs |
vue cli 2.0에서 3.0으로 버전이 올라가면서 바뀐점이 몇가지 있는데 프로젝트 생성할때부터 조금 달라진점이 있다.
전에는 webpack이나 browserfy 중에 템플릿을 하나 선택했었는데 아마 디폴트가 webpack으로 선택되어 있는듯하다.
프로젝트를 생성하기전에 옵션을 선택할수 있는데 default를 선택하거나
사용할 플러그인을 직접 선택하여도 된다.
나는 es6문법을 es5로 변환해주는 babel,
페이지 이동을 위한 vue-router ,
vue에서 전역으로 상태관리를 하는 vuex를 선택했다.
개인적으로 그 외에는 선호하지않거나 딱히 필요성을 못느끼겠다.
프로젝트가 생성되면 이런식으로 구성이 되어있는데 vue-cli 2.0 버전과 다른점은
정적 파일을 보관하던 static 폴더가 사라지고 아마 public으로 변경된것 같다.
그리고 중요한 설정파일이 있던 config폴더가 사라져 webpack 설정을 할 수 있는 부분이 없어졌다.
기존에는 config 폴더에서 포트 변경이나 public path를 변경하거나 public assets 디렉토리를 지정하거나 했었는데
설정 폴더가 사라졌다.
vue-cli 3.0 가이드와 레퍼런스 문서를 보니 아마 설정파일을 직접 만들고 추가하는 식으로 변경된것같다.
실행 명령어도 조금 바뀌었다.
1 2 3 4 5 6 7 | // 개발모드로 실행 npm run serve yarn serve // 배포용 빌드 npm run build yarn build | cs |
3.0으로 버전이 올라가면서 조금 낯선부분들이 보이는데
시간 날때마다 기존의 명령어나 기능, 설정법이 어떻게 바뀌었는지 조금씩 찾아보고 적응해야 겠다.