소개

Vue.js를 지금부터 공부하려고 하는 분, 초보자 쪽이 보고 있다고 생각합니다.
자신이 도중까지 학습하고 망설인 점을 중심으로 쓰고 있으므로 읽어 주시면 기쁩니다.
Vue.js 츠요 츠요 엔지니어는 부드러운 느낌으로보세요.

Vue 사용할 수 있게 된 지금 생각하면 Nuxt.js 를 사용하는 편이 간단할지도 모릅니다 (2019/11/05

1.Vue 설치 등

※앞으로 Node.js(&npm)가 인스톨 되고 있는 것을 전제로 이야기를 진행합니다, 아직 인스톨이 끝나고 있지 않으면 공식 사이트 로부터 인스톨하고 나서 진행해 주세요.

Vue-cli 설치

vue-cli 는 vue 를 개발하는데 편리한 물건이 막혀 있습니다.
적절한 폴더를 만들고 그 안에 아래와 같이 입력하십시오.

npm install -g @vue/cli

용량이 꽤 있기 때문에 조금 시간이 걸릴지도 모릅니다.

Vue 프로젝트 만들기

cli가 들어갔다고 생각하기 때문에 커맨드로 프로젝트를 작성합니다. UI를 사용해 봅시다.

vue ui

를 입력합니다.Vue プロジェクトマネージャー 라는 것이 브라우저에서 기동했다고 생각합니다.
중간에 있는 作成 -> ここにプロジェクトを作成する
이러한 페이지가 되면 OK 입니다, 프로젝트 폴더에 이름을 넣고 다음으로 진행하십시오.
다음도 특별히 설정할 필요가 없기 때문에 디폴트를 선택해 작성에 진행해 주세요. 조금 시간이 걸립니다.

이것으로 Vue 프로젝트를 만들었습니다.

Vue 실행

여전히 UI를 사용하고 왼쪽 작업을 선택하십시오.serve 아래의 태스크를 실행하고 조금 기다리십시오.


이미지처럼 오른쪽 원에 체크 마크가 붙으면 완료입니다.

앱 열기를 누르면 첫 번째 Vue 페이지가 표시됩니다.

Vue 편집

그럼 당신이 만든 Vue 폴더를보십시오.src 라는 폴더를 찾을 수 있습니까?

그 중 우리가 메인으로 편집하여 사이트 등의 내용물을 만드는 것입니다.

App.vue

이 파일을 찾으면 열어보세요.

Vue.js의 기본 파일입니다. HTML로 사이트를 만든 사람이라면 알겠다고 생각합니다만 index.html에 해당합니다. (진짜 index.html은 public 폴더에 있습니다)

3개의 큰 덩어리가 있다고 생각합니다.template/script/style 의 3개입니다, HTML의 경험 있는 사람은 대체로 알고 있다고 생각합니다만 template 는 body에 해당합니다.

그럼 편집해 갑시다.

<HelloWorld msg="Welcome to Your Vue.js App" />

msg=의 뒤를 좋아하게 변경해 주세요.

방금 열었던 페이지를 보면 변경한 내용으로 바뀌고 있다고 생각합니다.

HelloWorld.vue

component 폴더에 있습니다.
이쪽도 조금 전과 같고 3개의 덩어리가 있네요.

설명은 별로 없으므로 다시 써 봅시다.template 의 div 안은 다시 작성해도 문제 일어나지 않으므로 좋아하게 바꾸어 주세요.

페이지를 보고 생각했던 것처럼 나오면 완성입니다.

결론

초보자가 초보자 나름대로 몇 가지 문제를 근거로 써 주셨습니다.
이번은 간단하게 하기 위해 v-계의 설명 등은 생략했습니다.

Vue 학습하고 이틀 만에 작성한 페이지와 소스 코드를 둡니다.

페이지

소스 코드

참고 : Vue.js 공식 사이트