Vue.js

JavaScript 프레임워크를 시작합니다.

라이센스는 MIT 라이센스입니다.

을 점진식 프레임워크사이트 제목라고 부른다.

점진식은'진보적','진행적','진행적','점진적','점진적','연속적'등을 뜻하는 영어로 여기에서'조금씩 적용하기 위해'라는 뜻을 담은 틀이라는 뜻으로 사용된 것 같다.

핵심인 라이브러리는 뷰레이어에만 초점을 맞추기 때문에 다른 라이브러리에 비해 가져오기가 간단합니다.

가벼운 프레임워크이기 때문에 새로운 도입도, 기존 프로젝트 도입도, SPA(단일 응용 프로그램) 구축도 간단하다

개발자는 Evan You입니다."Angular가 정말 좋아하는 부분을 뽑아낼 수 있다면 쓸데없는 개념 없이 정말 가벼운 것을 만들어 보는 건 어떨까요?"Vue를 고려하여js를 개발했다고 합니다.

1. 설치하기

1.1. 다운로드 및 사용

GitHub 다운로드.

2020/4/2 현재 최신 안정 버전은 2.6.11입니다.

다운로드 후 스크립트 탭으로 읽습니다.

1.2. CDN용

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

상술한 기재는 최신 버전이 적용되기 때문에 생산 환경에서 주의해야 한다.최신 버전의 응용에 따라 의외의 행동이 있을 수 있으므로 버전 번호, 구축 번호

를 명확하게 쓰는 것을 권장합니다

    <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>

이 컴퓨터의 ES Modules를 사용하는 경우 ES Modules 호환 구성을 사용할 수 있습니다.ES Modules에 대해서는 참조를 허용합니다웹 사이트 축소 이미지.

    <script type="module">
      import Vue from 'https://unpkg.com/[email protected]/dist/vue.esm.browser.min.js';
      new Vue({
        ...  
      });
    </script>

Vue도 unpkg이나 cdnjs에서 사용할 수 있다.

1.3. npm 설치

대형 응용 프로그램을 구축할 때 npm로 설치하는 것을 권장합니다.npm은 Node입니다.js의 패키지 관리 도구입니다.

    $ npm install vue

패키지 관리 도구를 사용하여 웹 팩, Browserify 등 모듈 반델라를 조합하여 사용할 수 있다.Webpack 및 Vue그룹 js의 강좌로서 참고할 수 있도록 허락해 주십시오이 문장.

1.3.1. npm에 설치된 구축 파일 정보

dist/디렉터리에 있는 구축 파일(공식 사이트에서 온 것)

1.4. CLI를 통한 환경 구축

Vue.CLI를 사용하여 js의 개발 환경을 신속하게 구축할 수 있을 것 같습니다.대형 응용 환경에서 매우 편리한 것 같다.

공식 사이트는 당신이 구축 도구에 대해 선각적이라고 가정합니다.

CLI는 Node입니다.js와 관련 구축 작업에 대해 초보적인 이해를 가지고 있다고 가정하십시오.Vue 또는 프런트엔드 빌드 도구를 처음 사용하는 경우 CLI를 사용하기 전에 빌드 도구가 아닌 지침을 참조하는 것이 좋습니다.

디버그 도구

는 Vue Devtools를 제공합니다.사용 방법은 참조하였습니다이 문장.

도움말 세계 만들기

2.1. 전제 조건

Vue.js의 script 태그는 CDN으로 읽습니다.Vue.js를 다운로드하여 가져오려면 1.1. 다운로드 및 사용 을 참조하십시오.

2.2. 단계

index.html

만들기

head에서 script 태그 정의

버전 개발 시

<!-- 開発バージョン、便利なコンソールの警告が含まれています -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

운영 버전

<!-- 本番バージョン、サイズと速度のために最適化されています -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

바디에서 "Hello World"문장을 출력하는 div 태그를 정의합니다.

<div id="app">
    {{ message }}
</div>

index.html 파일에서 JS 정의

var app = new Vue({
    el: '#app',
    data: {
        message: 'Hello World!'
    }
})

2.3. 완성 계열의 index.html

<html lang='ja'>
    <head>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>

    <body>
        <div id="app">
            {{ message }}
        </div>

        <script>
            var app = new Vue({
                el: '#app',
                data: {
                    message: 'Hello World!'
                }
            })
        </script>
    </body>
</html>

2.4. 결과 내보내기

웹 페이지 정보

사이트 제목
vue.js developers New in Vue: ES Module Browser Build
Wikipedia-Vue.js
Webpack으로 Vue를 시작합니다.js

Reference

이 문제에 관하여([Vue.js] 요약부터 Hello World 출력까지.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/yut-nagase/items/8b43763a042eca41a416

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

[Vue.js] 요약부터 Hello World 출력까지.