16. Vue JS/Vue 3

01. Vue CLI 3 - 기본

THE HEYDAZE 2020. 9. 10. 00:00
OS Windows 10 Home 64bit 버전 1903 (OS 빌드 18362.836)
Vue CLI 3.0.0

 

#1. npm 설치

npm 설치

 

#2. Vue CLI 설치
npm install -g @vue/cli
# OR
yarn global add @vue/cli

기존에 npm install -g vue-cli 에서 npm install -g @vue/cli 로 변경되었다

[출처] 공식 홈페이지

 

이 버전에서는 vue ui 를 제공하여 빠르고 쉽게 프로젝트를 만들 수 있게 돕는다

 vue ui

 

#3. Project 생성
vue create my-project
# OR
vue ui

 

#4. 플러그인 설치
Sass · Less · Stylus  Loader 
# Sass
npm install -D sass-loader sass

# Less
npm install -D less-loader less

# Stylus
npm install -D stylus-loader stylus

 

Vuex
vue add vuex

 

Vue Router 
vue add router

 

Axois
npm install axios
# OR
npm install --save axios
 

Axios | Cracking Vue.js

액시오스 뷰에서 권고하는 HTTP 통신 라이브러리는 액시오스(Axios)입니다. Promise 기반의 HTTP 통신 라이브러리이며 상대적으로 다른 HTTP 통신 라이브러리들에 비해 문서화가 잘되어 있고 API가 다양

joshua1988.github.io

import axios from 'axios'

axios.get('/home')
        .then(response => {
            console.log(res.data)
        })

 

Babel
vue add babel

 

eslint
vue add eslint

 

nightwatch
vue add e2e-nightwatch

 

Vue loader (자동 리로드)
$ npm install vue-loader vue-template-compiler -D​

인텔리제이는 vue 파일 수정 후  ctrl + s 저장을 할 경우 페이지가 업데이트 된다

 

'16. Vue JS > Vue 3' 카테고리의 다른 글

04. Vue CLI 3 - Component 메모  (0) 2020.09.10
00. 인텔리제이 (Intellij IDEA) - Vue JS 플러그인  (0) 2020.09.10
03. Vue 2 - Vue Router  (0) 2020.09.10
02. Vue CLI 3 - Vuex  (0) 2020.09.10