Vue CLI 3에서 Hello-World하기

Vue CLI 3 설치

npm에서 3.0 이상의 vue를 설치합니다.

$ npm install -g @vue/cli

버전 확인

$ vue --version

프로젝트 작성 (명령 행)

$ vue create hello-world

먼저 병아리를 만들 때 그대로 "Enter"를 누르면 dafault로 설치됩니다.

$ cd hello-world
$ yarn serve

브라우저에서 http://localhost-8080.com/에 액세스하면 샘플이 표시됩니다.

소스 편집

src/App.vue의 편집

App.vue

<template>
  <div>
    <p>
      Hello World
    </p>
  </div>
</template>
...

다시 http://localhost-8080.com/
방문하면 Hello World로 변경되었습니다.

실제로 움직이는 소스를 확인하려면 다음 명령을 사용하여 소스를 생성합니다.

$ yarn build

프로젝트 생성 (Vue CLI UI 편)

Vue CLI UI는 결국, 소스 코드는 브라우저가 아니라 에디터로 편집하기 때문에 어디까지나 보조적인 툴일까.... 우선 프로젝트 작성까지.

Vue 프로젝트 매니저

디렉토리를 선택하여 프로젝트를 만듭니다.

새 프로젝트 만들기

프로젝트 폴더 이름을 입력하고 다음


기본 프리셋을 선택합니다.


프로젝트가 생성되었습니다.
화면 오른쪽 상단에 있는 [DevTools 설치]에서 DevTools를 설치하면 뒤집습니다.


Google 크롬의 경우 F12에서 디버그 콘솔 (Vue DevTools) 시작.


Hello-World를 하려면 에디터에서 위와 같이 App.vue를 편집하고 화면 왼쪽의 태스크 → 서버 → 태스크 실행 버튼을 누릅니다.
화면 오른쪽 상단의 출력 버튼을 누르면 앱이 실행중인 주소가 표시되므로 클릭하면 Hello-World가 표시됩니다.


이상입니다.

기타 시작하기 메모

App.vue 대신 index.vue로 만들고 싶습니다.

src/main.js를 열고 두 번째 줄을 아래와 같이 변경하면 index.vue를 읽을 수 있습니다.
Vue라는 디렉토리를 만들고,

main.js

2: // import App from './App.vue'
3: import App from './index.vue'

로드 할 vu 파일 (로컬 구성 요소)을 추가하고 싶습니다.

스크립트 태그 내에서 다음과 같이 설명을 추가하면 읽을 수 있습니다.

<script>
import MyComponent from './MyComponent.vue'
export default {
  components: {
    MyComponent
  },
  hoge() {
    return {
      ○○: xxx
    }
  }
}
</script>

한 번의 클릭으로 시작하고 싶습니다.

html5와 javascript로 만든 콘텐츠는 index.html을 클릭하면 시작되지만,
vue로 만든 경우 index.html을 클릭해도 아무 것도 표시되지 않습니다.
일일이 yarn serve하고 로컬 액세스하는 것이 귀찮기 때문에,
electron을 도입했습니다.
Vue Cli 3 plugin for Electron 소개