Vue.js는 전단 개발 프레임워크다.2020년 9월, Vue3.0이 공개됐다.
이 기사에서 Vue.간단한 부분부터 js를 사용하여 정식으로 사용하는 순서를 천천히 기록합니다.먼저, Vue.js의 가져오기.Vue.js를 사용하여 간단한 웹 응용 프로그램을 제작하고 GiitHub Pages가 디자인한 곳에서 만듭니다.
Vue.나는 js가 무엇을 만들 때 폭발 속도로 그 기초를 준비할 수 있다고 생각한다.

Vue.js 소개

Vue.js에서는'Progressive Framework'의 특징이 있고 jQuery를 사용한 사람은 단계적으로 가져올 수 있다.
그래서 처음으로 최신 전단 개발에 착수한 사람에게는 좋은 느낌이다.
아니면 내가.

Vue.js
https://v3.ja.vuejs.org/

학습 과정

나 같은 사람이 그래,Vue.나는 js를 공부할 때 두 가지 중요한 점이 있다고 생각한다.

1. 단계적 도입 이해

먼저 앞서 언급한'Progressive Framework'입니다.그림에서 보듯이 단계적으로 가져올 수 있다.Vue.js의 기능은 이 단계에 맞추어 전개됩니다.

Vue.js : The Progressive Framework by Evan You ※ 일본어 주석은 필자
예를 들어, 첫 번째 선언은 HTML 태그 및 JavatScript 변수 1대1을 사용하는 jQuery와 같은 용도로 나타납니다.이 일대는 QitaVue.js Progressive Framework의 글을 상세하게 해설했다.
강좌도 이 단계를 따르기 때문에 이걸 이해하면 지금 내가 어느 단계에서 쉽게 파악할 수 있을 것 같아.

2. Vue CLI 사용

또 하나 요점은 초기 단계에서 구축 시스템을 사용하면 이해하기 쉽다는 것이다.
Vue.js의 기능이 상응하는 것이 많기 때문에 사용 단계가 발전함에 따라 별로 좋지 않다.따라서 구축 시스템을 초기 단계부터 활용할 수 있도록 Vue CLI를 사용하는 것이 좋다고 생각한다.이 도구는 Webpack과browserify를 사용할 수 있고 각종 라이브러리에 편입할 수 있습니다.
Vue CLI 로 제작된 애플리케이션의 초기 모델에 단계적으로 기능을 추가합니다.이것은 학습에 있어서 매우 이해하기 쉽다.

Vue CLI

다만, Vue CLI, Vue.js와 다른 프로젝트인 것 같아서 Vue.js의 공식 사이트와 튜토리얼만 보면 정보가 별로 없어요.사이트 제목보시면 됩니다.

Vue.js 튜토리얼 진행

Vue.기존 사이트에 js를 끼워서 사용할 수 있습니다.이게 제일 쉽죠?공식 강좌를 진행하면 기본적인 인코딩 기법을 체험할 수 있을 것 같다.브라우저에서 실행할 수 있기 때문에 간단합니다.

기본용법.js 3.0
https://v3.ja.vuejs.org/guide/introduction.html

Vue-CAL에서 응용 프로그램 만들기

그런 다음 Vue CLI, Vue를 사용합니다.js에 따라 웹 응용 프로그램을 만듭니다.

vue-cli 설치

Vue-CAI를 사용합니다.

Vue CLI
https://cli.vuejs.org/

설치하다.

$ npm install -g @vue/cli
$ vue --version

vue-cli에서 응용 프로그램 만들기

응용 프로그램을 만듭니다.

$ vue create vue-app

이것밖에 없어요.
어느 환경에서 만들지 메뉴로 선택할 수 있기 때문에 순서대로 대답한다.처음에는 기본 옵션을 선택하면 되잖아요.

동작 확인

로컬 환경에서 완성된 프로그램을 시작해 보십시오.

$ cd vue-app
$ yarn serve
|
| App running at:
| - Local:   http://localhost:8080/
| - Network: http://192.168.1.4:8080/
|
| Note that the development build is not optimized.
| To create a production build, run yarn build.

브라우저에서 http://localhost:8080/에 액세스하면 이렇게 표시됩니다.

GiitHub에서 창고를 만들어 vue-app 디렉터리를 저장합니다.

양방향 바인딩

아까 공식 홈페이지 강좌에도 있는 양방향 귀속을 해보세요.예를 들어 사용자 입력 제어의 두 번째 예는 텍스트에 창의 입력 내용을 반영한다.
/src/components/Hello World입니다.다음과 같이 vue를 수정합니다.'

{msg}

'아래에''를 추가했습니다.
/src/components/HelloWorld.vue

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <input v-model="msg" />
    <p>
      For a guide and recipes on how to configure / customize this project,<br>
      check out the
      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
    </p>
// ...

로컬 환경에서 입력 테이블의 문자를 수정하면 바로 위 머리글에 반영됩니다.

GiitHub Pages로 설계

그러면 웹 애플리케이션을 정적 사이트로 만들어 GiitHub Pages에 공개한다.GiitHub Pages에는 개인 사용자 계정의 링크 페이지와 저장소로 링크된 페이지가 있습니다.이번에 창고를 만들면

구축

GiitHub Pages 출력 docs 디렉토리 또는 gh-pages 분기 파일이번에는 docs 디렉터리의 내용을 보여 줍니다.따라서 창고의 메인 디렉터리에서vue.config.js라는 파일을 만듭니다. 다음과 같이 씁니다.
vue.config.js

module.exports = {
  outputDir: 'docs',
  assetsDir: './',
  publicPath: './',
}

그런 다음 표시할 파일을 구성합니다.

$ yarn build
| DONE  Compiled successfully in 22541ms                                                                         20:06:29
| 
|  File                                 Size                                   Gzipped
|
| docs\js\chunk-vendors.ff672a17.js    89.66 KiB                              32.14 KiB
| docs\js\app.225fd15b.js              4.58 KiB                               1.63 KiB
| docs\css\app.fb0c6e1c.css            0.33 KiB                               0.23 KiB
|
| Images and other types of assets omitted.
| 
| DONE  Build complete. The docs directory is ready to be deployed.
| INFO  Check out deployment instructions at https://cli.vuejs.org/guide/deployment.html
| 
| Done in 31.22s.

이렇게 하면 docs 디렉터리에 정적 파일이 생성됩니다.
각 docs 디렉토리는 GiitHub에 제출됩니다.

GiitHub Pages 설정

GiitHub 액세스 대상 웨어하우스 활용

위쪽 "Settings"

를 클릭

Pages 태그 선택

마스터 분기의 docs 디렉토리를 Source

로 선택

Save 버튼

클릭

공개 애플리케이션

이렇게GiitHub Pages를 통해 js에서 만든 응용 프로그램을 공개할 수 있습니다.

프레젠테이션 페이지(GiitHub Pages)
https://ycatch.github.io/vue-app/

소스 코드(GiitHub)
https://github.com/ycatch/vue-app

참조 페이지

Vue.js의 "The Progressive Framework"의 디자인 사상은 나를 깊이 찔렀다
https://snowlong.hatenablog.com/entry/2017/03/27/190715

첫 번째 줄별 프레임 Vue.js:Vue.js 시작 - 가장 빠른 웹 응용 프로그램
https://gihyo.jp/dev/serial/01/vuejs/0001

Vue.js Progressive Framework - Qiita
https://qiita.com/mikakane/items/3bd6af69259f5af6fecb

Modern Frontend Development with Vue.js
https://docs.google.com/presentation/d/1WnYsxRMiNEArT3xz7xXHdKeH1C-jT92VxmptghJb5Es