Build a Single Page Time Tracking App with Vue.js, Part II

Vue.js로 전체 단일 페이지 앱을 제작하는 방법에 대해 알아보십시오.


Vue.js에 대한 가장 좋아하는 점 중 하나는 얼마나 친숙한가입니다. 라이브러리를 기존 프로젝트에 드롭하고 셀렉터로 선택한 요소 나 ID를 사용하여 Vue 인스턴스를 만들고 페이지에 반응성을 추가하도록 설정할 수 있습니다. Vue의 몇 가지 기능을 사용하기를 원한다면이 단순성이 유용 할 수 있습니다. 그러나 실제로 사람들이 알지 못하는 라이브러리를 사용하면 훨씬 더 많은 작업을 수행 할 수 있습니다.

Vue.js의 핵심 라이브러리는 풍부한 단일 환경의 페이지 도구를 만들 수있는 도구와 플러그인입니다. Vue는 또한 ES2015를 완벽하게 지원하며 자체 파일 형식 인 .vue 구성 요소를 제공합니다.이 구성 요소는 템플릿, 스크립트 및 스타일을 모두 동일한 파일에 포함 할 수 있기 때문에 유용합니다. 어떤 사람들은 이것이 성가신 일이 될 수 있으며 파일 크기가 커질 수 있다고 말하면서, 이러한 종류의 형식을 사용하여 저장하는 클릭 수와 정신적 인 양 (비록 작을지라도)의 수는 매우 가치 있다고 주장합니다.


이것은 Vue.js를 사용하여 단일 페이지 응용 프로그램을 작성하는 방법을 다룰 일련의 기사에서 두 번째입니다.


Vue 생태계의 여러 라이브러리와 플러그인을 사용하여 다음을 수행 할 것입니다. 

  • 원격 소스의 데이터 작업 방법을 볼 수 있도록 Node.js 백엔드 만들기
  • 단일 페이지 앱 라우팅 구현
  • Node.js 백엔드에 HTTP 호출 구현하기
  • 단방향 데이터 흐름 추가
  • 앞에서 말한 .vue 파일 형식을 사용하면 템플릿, 스크립트 및 스타일을 모두 한 곳에서 볼 수 있습니다.

What are we going to build?

작년부터 시간 추적기 앱 튜토리얼을 개정하는 것이 흥미로울 것이라고 생각했습니다. 이 튜토리얼에서는 Angular 1.x 및 Laravel 5와 함께 (약간 기능이 부족한) 시간 추적기를 만들었습니다. Vue.js와 Node를 사용하여 비슷한 앱을 만드는 것이 두 가지 스택을 비교하는 좋은 방법이 될 것입니다. 종류의 물건.

그러나 우리가 구축 할 앱은 추적 시간이가는 한 매우 단순해질 것입니다. 이는 Vue.js 앱의 모든 조각이 어떻게 서로 잘 어울리 며 실제 시간 추적기를 만드는 데 더 주력하고 싶기 때문입니다.


9b1dc6608a3fa76e9806342143b11bed_1494126950_7074.png

이제 일하러 갑시다. 시간을 들여 챔피언처럼 시간을 기록 할 것입니다.



참고 :이 부분은 2 부입니다.이 자습서 시리즈의 소개 부분 인 1 부

     Vue.js로 단일 페이지 시간 추적 응용 프로그램 만들기 : 소개


Installation

우리가 만든 앱은 모듈 번들링, 전처리 및 핫 모듈 리로딩을 위해 Webpack을 사용할 것입니다. Webpack에 익숙하지 않다면 기본적으로 자동으로 문자열을 묶은 다음 단일 파일에서 다양한 JavaScript 비트를 제공하는 방법을 제공합니다. 이는 다양한 구성 요소 파일에 대해 여러 HTTP 요청을하는 것에 대해 걱정할 필요가 없으므로 프로덕션 환경에 적합합니다. 그러나 여기에는 그 이상이 있습니다 : 우리는 우리의 .vue 파일을 적절하게 처리 할 수 있도록 Webpack이 필요합니다. 파일을 적절한 JavaScript, HTML 및 CSS로 변환하기위한 로더가 없으면 브라우저는 현재 진행중인 작업을 이해할 수 없습니다. 그러나 적절한 Webpack 로더를 사용하면 브라우저에서 이해할 수있는 .vue 파일로 변환됩니다.


핫 모듈 재 로딩은 많은 편의를 제공하는 강력한 기능으로, Vue를 통해 즉시 사용할 수 있습니다. 일반적으로 코드를 변경 한 후 페이지를 새로 고치면 응용 프로그램의 모든 상태가 손실됩니다. 우리가 몇 번의 클릭이 필요하거나 어떤 종류의 상태가 활성화되어야하는 앱의 일부를 작업 할 때 고통 스러울 수 있습니다. 핫 모듈을 다시로드하면 변경되는 코드가 자동으로 교체되고 상태가 보존됩니다.



또한 Vue는 자동으로 CSS 전처리를 사용할 수있게하므로 원하는 경우 일반 CSS 대신 LESS 또는 SASS를 작성할 수 있습니다.

이전에는 적절한 Webpack 설정을 얻기 위해 npm에서 많은 종속성을 설치해야했지만 다행히도 vue-cli를 사용할 수있었습니다. 이는 Vue 생태계에 더할 나위없이 좋은 기회입니다. 왜냐하면 우리가 더 이상 프로젝트를 손으로 비계 할 필요가 없다는 것을 의미하기 때문에 오히려 우리를 위해 매우 빠르게 생성 될 수 있습니다.

먼저 vue-cli를 설치하십시오.

npm install -g vue-cli

그런 다음 새 웹 팩 프로젝트를 만들고이를위한 종속성을 설치하십시오.

vue init webpack vue-time-tracker
cd vue-time-tracker
npm install 

생성 된 응용 프로그램에는 핫 모듈 다시로드로 응용 프로그램을 실행할 수있는 명령이 있습니다.

npm run dev 

이 명령은 build / dev-server.js 노드의 별명이며 scripts 객체의 package.json에 있습니다. 실행되는 dev-server.js 파일은 기본적으로 Webpack이하는 일입니다. 즉, 모든 Webpack 조각을 구성하고 모든 프로젝트 파일을 구문 분석 및 컴파일하며 모든 것을 브라우저에서 볼 수 있도록 제공합니다. 시동기 응용 프로그램을 보려면 localhost : 8080을 살펴보십시오.

9b1dc6608a3fa76e9806342143b11bed_1494127714_8933.png
 








Comments

Category
반응형 구글광고 등
State
  • 현재 접속자 5 명
  • 오늘 방문자 76 명
  • 어제 방문자 282 명
  • 최대 방문자 420 명
  • 전체 방문자 65,851 명
  • 전체 게시물 311 개
  • 전체 댓글수 2 개
  • 전체 회원수 20 명
Facebook Twitter GooglePlus KakaoStory NaverBand