! 제품 버전을 정확하게 입력해 주세요.
제품 버전이 정확하게 기재되어 있지 않은 경우,
최신 버전을 기준으로 안내 드리므로
더욱 빠르고 명확한 안내를 위해
제품 버전을 정확하게 입력해 주세요!

Wijmo 및 새로운 Vue CLI 3.0으로 Vue 앱을 빌드하는 방법 > 블로그 & Tips

본문 바로가기

Wijmo 및 새로운 Vue CLI 3.0으로 Vue 앱을 빌드하는 방법

페이지 정보

작성자 GrapeCity 작성일 2020-08-27 14:34 조회 6,763회 댓글 0건

본문

이 시리즈에서는 NPM 및 Webpack 과 함께 Wijmo를 사용하여 가장 인기있는 JavaScript 애플리케이션 프레임워크를 대상으로 애플리케이션을 만드는 방법을 보여줍니다이 포스팅에서는 라이브러리와 모든 기능을 갖춘 프레임워크 사이에서 확장되는 생태계인 Vue.js에 초점을 맞추고 있습니다. Vue.js는 이 목록에서 가장 작은 프레임 워크입니다. HTML, JS 및 CSS를 결합하여 캡슐화되어 재사용 가능한 구성 요소를 만들어 기존 HTML 및 JavaScript 또는 "vue"파일을 작성할 수 있습니다.


블로그 시리즈


1. NPM 및 Wijmo 소개



2. React



3. Vue.js



4. AngularJS



구축을 위해 Wijmo 평가판을 다운로드 해보세요 



이 튜토리얼에서는 NPM, Webpack 또는 Vue.js 자체에 대해 자세히 다루지 않을 것입니다. 이러한 모든 도구는 매우 인기가 있고 철저하게 문서화되어 있으며, 좋은 개요를 위해 프레임 워크에 대한 e-book 읽을 수 있습니다. 대신 Vue.js로 작성된 간단한 애플리케이션에 Wijmo를 추가하는 작업에 중점을 둘 것입니다.


애플리케이션을 만들고 유지하는 기본 단계는 모든 프레임워크에서 동일합니다.


  • 적절한 CLI (Command-Line Interface utility)를 설치하여 응용 프로그램을 생성, 실행, 유지 관리 및 배포합니다.

  • CLI를 사용하여 애플리케이션을 만듭니다.

  • NPM을 사용하여 Wijmo를 애플리케이션에 추가합니다.

  • 사용할 구성 요소를 가져오고 적절한 마크업을 추가합니다.


최신 Vue CLI 3.0은 다양하고 뛰어난 기능을 제공합니다. 모든 인기있는 도구에 대한 기본 지원을 통해 개발자는 도구를 모두 스스로 배울 필요가 없습니다. 또한 다양한 도구에 대한 수천 가지 옵션을 기억할 필요없이 프로젝트를 쉽게 편집 할 수 있는 그래픽 사용자 인터페이스 가 있습니다.


다음은 새 VueJS 앱을 만들고 실행하는 데 필요한 업데이트된 단계입니다.


1 단계 새 Vue.js 앱 만들기


단계명령
Vue CLI 3.0 설치npm install -g @ vue / cli
앱 만들기vue create my-vue-app-3
앱 폴더로 이동cd my-vue-app-3
앱에 Wijmo 추가npm install @grapecity/wijmo.vue2.all
GUI 시작vue ui


2 단계


다음 단계는 GUI를 사용하여 Vue의 런타임 컴파일러를 활성화하는 것입니다. 런타임 컴파일러는 현재 버전의 Wijmo Vue interop에서 필요합니다 (Wijmo의 Vue interop의 다음 버전에서는 필요하지 않음).


Vue.js 앱


런타임 컴파일러를 활성화 한 후 "변경 사항 저장(Save Changes)"버튼을 클릭하는 것을 잊지 마십시오. 이제 아래와 같이 GUI에서 앱을 실행할 수 있습니다.


Vue.js 앱


이는 커맨드 라인에서 앱을 실행하는 것과 동일한 효과가 있습니다.


npm run serve


브라우저에서 실행중인 앱이 표시되어야 합니다. 앱 편집을 시작하겠습니다. 변경 사항을 저장할 때마다 브라우저가 자동으로 앱을 다시 로드합니다.


VueJS 프로젝트는 일반적으로 "vue" 확장자를 가진 파일의 구성 요소를 정의합니다. 이러한 파일에는 구성 요소에 대한 HTML, JavaScript 및 CSS가 포함되어 있습니다. 이것은 마크업과 스크립트가 JSX 파일에 번들된 React와 같습니다.


샘플 앱에는 App 및 HelloWorld의 두 가지 컴포넌트가 있습니다. 첫 번째는 메인 컴포넌트입니다. 아래에 VueJS 로고와 HelloWorld 컴포넌트가 표시됩니다.


VS Code에서 src/components/HelloWorld.vue 파일을 열고 파일의 HTML 부분을 편집하여 시작합니다.


<template>  
  <div class="hello">  
    <h1></h1>  
    <h2>Here are some Wijmo controls for you to get started:</h2>  
    <div class="App-panel">  
      <wj-flex-grid  
        :itemsSource="data">  
      </wj-flex-grid>  
      <wj-flex-chart  
        :itemsSource="data"  
        bindingX="country">  
        <wj-flex-chart-series name="Sales" binding="sales">  
        </wj-flex-chart-series>  
        <wj-flex-chart-series name="Expenses" binding="expenses">  
        </wj-flex-chart-series>  
        <wj-flex-chart-series name="Downloads" binding="downloads">  
        </wj-flex-chart-series>  
      </wj-flex-chart>  
    </div>  
  </div>  
</template>  


마크업은 Angular와 매우 비슷합니다. 지시문은 Wijmo 컨트롤 또는 클래스에 해당하고 속성(attribute)은 속성(property)에 해당합니다.


3 단계 Wijmo 컨트롤 및 해당 데이터 추가


이제 HTML 바로 아래에있는 코드의 JavaScript 부분을 살펴 보겠습니다.


<script>  
  //  Wijmo 가져오기
  import '@grapecity/wijmo.vue2.grid';  
  import '@grapecity/wijmo.vue2.chart';  
  import { CollectionView } from '@grapecity/wijmo';  
// Wijmo 라이선스 키 적용(만약 가지고 있다면) //import { setLicenseKey } from '@grapecity/wijmo';
//setLicenseKey('your key goes here'); function getData() { var countries = 'US,Germany,UK,Japan,Italy,Greece'.split(','), data = []; for (var i = 0; i < countries.length; i++) { data.push({ country: countries[i], sales: Math.random() * 10000, expenses: Math.random() * 5000, downloads: Math.round(Math.random() * 20000), }); } return new CollectionView(data); } export default { name: 'HelloWorld', data: function() { return { msg: 'Welcome to Your Vue.js App', data: getData() } } } </script>


이 코드는 Wijmo 스타일과 컴포넌트를 가져온 다음 화면에 표시할 메시지와 컨트롤에 표시할 데이터가 포함된 객체를 내 보냅니다.


4 단계. 스타일 시트 업데이트


파일은 몇 가지 CSS 규칙으로 끝납니다.
 


<!-- "scoped" 속성 추가 -->  
<style scoped>  
  .App-panel {  
    margin: 0 48pt;  
  }  
  .App-panel .wj-control {  
    display: inline-block;  
    vertical-align: top;  
    width: 400px;  
    height: 300px;  
  }  
</style>  


ctrl + S를 눌러 변경 사항을 저장합니다.


완료하려면 VS Code에서 'src/App.vue'파일을 열고 Wijmo의 css 파일을 가져올 줄을 추가합니다.


<script>
import HelloWorld from "./components/HelloWorld.vue";
import "@grapecity/wijmo.styles/wijmo.css";
export default {
  name: "App",
  components: {
    HelloWorld,
  },
};
</script>


ctrl + S를 눌러 파일을 저장하고 브라우저로 전환하여 변경 결과를 확인합니다.


Vue.js 앱


 

그리드와 차트가 동일한 CollectionView에 바인딩되어 있기 때문에 그리드 의 데이터에 대한 변경 사항은 자동으로 차트에 반영됩니다. 예를 들어 열 머리글을 클릭하여 데이터를 정렬하거나 키보드를 사용하여 일부 값을 편집 할 수 있습니다.


Usimg Wijmo 및 최신 JavaScript 애플리케이션


Wijmo를 최신 JavaScript 애플리케이션에 통합하는 것은 NPM과 함께 설치하고 라이브러리에서 원하는 컴포넌트를 가져 오기만 하면 됩니다. 


서로 다른 프레임워크에서 똑같은 UI 구성 요소를 사용할 수 있으며 여러 프레임워크로 작업하거나 나중에 프레임워크를 전환 할 수 있다고 생각하는 경우 작업이 더 쉬워집니다.


  • 페이스북으로 공유
  • 트위터로  공유
  • 링크 복사
  • 카카오톡으로 보내기

댓글목록

등록된 댓글이 없습니다.

메시어스 홈페이지를 통해 제품에 대해서 더 자세히 알아 보세요!
홈페이지 바로가기

태그1

인기글

더보기
  • 인기 게시물이 없습니다.
메시어스 홈페이지를 통해 제품에 대해서 더 자세히 알아 보세요!
홈페이지 바로가기
이메일 : sales-kor@mescius.com | 전화 : 1670-0583 | 경기도 과천시 과천대로 7길 33, 디테크타워 B동 1107호 메시어스(주) 대표자 : 허경명 | 사업자등록번호 : 123-84-00981 | 통신판매업신고번호 : 2013-경기안양-00331 ⓒ 2024 MESCIUS inc. All rights reserved.