- Vue 인스턴스
- 템플릿 문법
- Computed Properties and Watchers
- 클래스 / 스타일 바인딩
- Conditional Rendering
- 리스트 뿌리기
- 이벤트 핸들링
- 폼 입력 바인딩
- 반응성에 대해 좀 더 깊이 알아보기
- 트렌지션 효과
- Transitioning State
- Render 함수
- 사용자 정의 디렉티브(directive:명령어)
- 컴포넌트를 파일(뷰 파일) 하나로 작성하기
- Production 으로 디플로이 하기
- 상태 관리
- 유닛 테스트
- 서버 사이드 렌더링
- Migration from Vue 1.x
- Migration from Vue Router 0.7.x
- Migration from Vuex 0.6.x to 1.0
- 다른 프레임워크와의 비교
- Join the Vue.js Community!
Production 으로 디플로이 하기
The minified standalone build of Vue has already stripped out all the warnings for you for a smaller file size, but when you are using tools like Webpack or Browserify, you will need some additional configuration to achieve this.
Use Webpack’s DefinePlugin to indicate a production environment, so that warning blocks can be automatically dropped by UglifyJS during minification. Example config:
- Run your bundling command with
"production". This tells
vueifyto avoid including hot-reload and development related code.
- Apply a global envify transform to your bundle. This allows the minifier to strip out all the warnings in Vue’s source code wrapped in env variable conditional blocks. For example:
- To extract styles to a separate css file use a extract-css plugin which is included in vueify.
If a runtime error occurs during a component’s render, it will be passed to the global
Vue.config.errorHandler config function if it has been set. It might be a good idea to leverage this hook together with an error-tracking service like Sentry, which provides an official integration for Vue.
When using Single-File Components, the
<style> tags are injected dynamically at runtime during development. In production you may want to extract the styles across all components into a single CSS file. For details on how to achieve this, consult the respective documentation for vue-loader and vueify.
webpack template from
vue-cli has this already configured out of the box.