Vue CLI
-
플러그인과 프리셋 (Plugins and Presets)Vue CLI 2020. 1. 5. 23:43
Plugins Vue CLI는 플러그인 기반 아키텍처를 사용합니다. 새로 생성된 프로젝트의 package.json 파일을 살펴보면, @vue/cli-plugin- 으로 시작하는 디펜던시를 찾을 수 있을 것입니다. 플러그인은 내부 웹팩 설정을 수정할 수 있고 vue-cli-service 에 명령을 추가할 수 있습니다. 플러그인 기반의 아키텍처는 Vue CLI를 더 유연하고 확장성 있게 해줍니다. 직접 플러그인을 개발할 수도 있으니 관심있는 분들은 Plugin Development Guide 참고하세요. 기존 프로젝트에 플러그인 설치하기 각각의 CLI 플러그인에는 generator와 runtime plugin으로 구성됩니다. generator는 파일을 생성하는 역할을 하고 runtime plugin은 코어 ..
-
*.vue 파일 하나만 즉시 프로토타이핑 하기 (Instant Prototyping)Vue CLI 2019. 12. 31. 00:06
이번에 소개할 기능은 Vue CLI를 통해서 전체 프로젝트 구조를 갖추지 않고 *.vue 파일 하나, 즉 하나의 싱글 파일 컴포넌트를 브라우저를 통해서 즉시 확인할 수 있는 기능입니다. 싱글 파일 컴포넌트를 만들어서 브라우저로 빠르게 확인해보는 등의 작업에 활용할 수 있습니다. vue serve, vue build 실행 환경 준비하기 vue serve, vue build는 @vue/cli-service-global 패키지가 제공하는 기능이므로 설치가 필요합니다. > npm install -g @vue/cli-service-global 참고로 vue serve는 전역에 설치되어 있는 디펜던시에 의존한다는 한계가 있어서 컴퓨터에 설치된 버전에 따라 다른 결과가 나올 수 있습니다. 따라서 이 기능은 빠른 프로..
-
Vue CLI란?Vue CLI 2019. 12. 18. 01:06
@vue/cli를 사용하면 커맨드 창을 통해서 별다른 설정 없이 빠르게 기본 골격을 갖춘 프로젝트를 생성할 수 있습니다. 따라서 복잡한 설정에 신경쓰지 않고 바로 앱 개발에 집중할 수 있는 환경이 만들어지죠. 별도의 설정을 할 때도 기존 설정을 제거 없이 변경이 가능합니다. Vue CLI 3.0 이상 버전은 @vue/cli 패키지명을 사용하고 있습니다. Vue CLI의 컴포넌트들 Vue.js의 vue-cli 깃헙 저장소(source code)를 살펴보면 여러 패키지들이 있습니다. 다 Vue CLI의 컴포넌트들입니다. 하나씩 자세히 살펴보겠습니다. CLI ( @vue/cli ) CLI는 전역으로 설치되는 npm 패키지로 터미널에서 vue 명령어를 사용할 수 있게 합니다. 'vue create' 명령어를 통..
-
Webpack 설정 어떻게 되어 있는지 확인하기 (inspect 명령어 살펴보기)Vue CLI 2019. 12. 16. 00:31
@vue/cli-service로 생성한 프로젝트는 웹팩 설정이 어떻게 되어 있는지 파일로 바로 확인할 수 없습니다. 따라서 변경하려고 할 때 어떻게 변경해야 할지 난감합니다. 따라서 vue-cli-service는 적용된 웹팩 설정을 면밀하게 보여주는 inspect 명령어를 제공합니다. global vue binary 또한 inspect 명령을 지원하기 때문에 여러분의 프로젝트 안에서 vue-cli-service inspect를 수행해 줄 수 있습니다. inspect 명령어는 적용되어 있는 웹팩 설정 내용을 콘솔에 출력해주고 체이닝을 통해서 규칙과 플러그인을 변경할 때 어떻게 해야 하는지 힌트를 줍니다. inpect 명령어를 사용해보기에 앞서 vue-cli로 프로젝트를 생성합니다. 이제 default로 생..
-
Vue CLI 3 웹팩(Webpack) 설정 작업하기Vue CLI 2019. 12. 13. 01:10
Vue-cli 3로 생성한 프로젝트에 vue.config.js 파일이 없습니다. 아래 설정을 하려면 해당 파일을 프로젝트 폴더에 생성하면 됩니다. 혹시 반드시 webpack.config.js에 설정해야 하는 상황이면 제일 하단부 '웹팩 설정 파일 접근하기'를 참고하세요 :) 간단한 설정 가장 간단하게 웹팩 설정을 할 수 있는 방법은 vue.config.js 파일에 configureWebpack 옵션을 추가하는 것입니다. // vue.config.js module.exports = { configureWebpack: { plugins: [ new MyAwesomeWebpackPlugin() ] } } 이 객체는 최종적으로 웹팩 설정에 합쳐집니다. 이 때 webpack-merge가 사용됩니다. 경고 vue...