20240321 - Vue 프로젝트 생성하기

 

1. node 설치

node -v

npm -v

 

2. vue 설치

npm install -g @vue/cli

 

3. 설치 확인

vue -V

 

4. 프로젝트 생성

vue create 프로젝트명

vue3 or vue2 로 생성할지 선택이 나온다.

최신 vue3 로 프로젝트 생성

 

---

- axios 

javascript 어플리케이션에 서버 통신을 하기 위한 HTTP 통신 라이브러리.

프로젝트폴더에서 npm install axios

 

- vue

vue2 에서 vue3 으로 넘어오면서,

import Vue from 'vue'

이런식의 전역으로  인스턴스 생성이 불가능한 것으로 보인다.

함수단위로 변경해야 된다.

import { createApp } from 'vue'

import { createRouter } from 'vue-reouter'

필요한 함수를 꺼내써야 되는 요건이 발생한다.

그리고..

js 에 작성된 문법 또한 변경된다.

new Vue(App) 이런 형태에서

const app = createApp(App);

app.use(xxx)

app.component('ccc', ccc)

이런식...

 

- import { fnc } from '@/api/xxx'

@는 src 이다.

 

- stompjs

node.js 어플리케이션, 웹 브라우져를 위한 웹소켓 클라이언트 라이브러리

 

- vuex

vue 상태 관리 패턴 + 라이브러리

* mutations : Vuex 저장소에서 상태를 변경하는 유일한 방법으로 커밋을 통해서 변경한다.

* actions : Vuex 비동기 처리.

mutations 는 상태값에 변경에 주안을 준다.

 

- laxy-loading

spa 단점 보완, 사용자가 진입하면 리소스를 받도록 한다.

 

export default(name) => () => import('../views/' + name)