[Vue] nuxt.js 프로젝트 시작하기
Vue-CLI : Vue Command Line Interface로서 ui인터페이스를 통해 뷰프로젝트를 쉽게 생성하고 관리하게 해준다
Vue-CLI, Vue-CLI-init설치
|
1
2
|
$ npm i -g @vue/cli
$ npm i -g @vue/cli-init
|
|
cli-init은 templet을 가져오기 위한 vue init 기능을 제공한다
|
1
|
$ vue --version
|
|
정상적으로 설치되었다면 vue --version 명령을 통해 vue의 버전을 확인 할 수 있다
Vue 프로젝트 생성(nuxt.js)
|
1
2
3
|
$ vue init nuxt-community/starter-template myvueapp
$ cd myvueapp
$ npm i
|
|
nuxt.js를 사용한 vue프로젝트를 생성하고 npm 모듈들을 설치해준다
프로젝트 이름에 대문자는 사용될수 없는것 같다(뭐라하더라)
npm install 까지 완료되면 이런 메세지를 볼수있다
이와같은 구조를 가진 nuxt vue 프로젝트가 생성된다
readme를 확인해보면 개발시에는 npm run dev를 통해 구동하라고 한다(수정사항이 바로적용되는 등의 기능을 사용할 수 있다)
사용되고 있지 않은 포트를 사용하도록 package.json의 scripts > dev 부분을 수정해주고(현재 9099로 지정)
|
1
|
$ npm run dev
|
|
명령으로 프로젝트를 실행해 볼 수 있다
지정해준 포트대로 http://localhost:9099에 접속해보면 예쁜 기본페이지를 확인할 수 있다
Axios/Proxy 설정
api통신을 사용하기 위해서는 Axios와 로컬에서의 CORS문제 해결을 위한 Proxy를 설정해주어야한다
|
1
2
|
$ npm i @nuxtjs/axios
$ npm i @nuxtjs/proxy
|
|
Nuxt.js를 위한 모듈화된 Axios module과 proxy모듈을 설치한다
그리고 설치한 모듈들을 사용하기위해 nuxt.config.js를 수정해준다
위와같이 적용을 마치면 Axios를 사용할 수 있고 proxy연동 까지 마치게 된다
/prefix-url로 시작되는 api는 모두 proxy-url로 프록시 될것이다
이 기능들은 앞으로 구현해가면서 확인해 보도록 해야겠다
MainPage, Login Page, Join Page 생성
nuxtjs 사용시 pages에 vue파일들을 생성하게되는데 여기서 생성되는 vue파일들은
pages폴더 안의 구조에 따라 자동으로 라우팅되도록 되어있다 (수정가능)
일단 pages 폴더에 vue파일들을 생성해보자
index.vue(메인페이지)
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
<template>
<div>
<h1>Main Page</h1>
<NLink to="/loginForm">
Login Page
</NLink>
<br/>
<NLink to="/joinForm">
User Join Page
</NLink>
</div>
</template>
<script>
export default {
head: {
title: 'Home page'
}
}
</script>
|
|
loginForm.vue(로그인페이지)
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
|
<template>
<div>
<h1>Login Page</h1>
<p>Hi from {{ name }}</p>
<table>
<tr>
<td><span>ID: </span></td>
<td><input type="text" /></td>
</tr>
<tr>
<td><span>PW: </span></td>
<td><input type="password" /></td>
</tr>
<tr>
<td colspan="2" align="center"><button>로그인</button></td>
</tr>
<tr>
<td colspan="2" align="center"><NLink to="/">Go Home</NLink></td>
</tr>
</table>
</div>
</template>
<script>
export default {
asyncData () {
return {
}
},
head: {
title: 'Login Page'
}
}
</script>
|
|
joinForm.vue(가입 페이지)
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
|
<template>
<div>
<h1>User Join Page</h1>
<p>Hi from {{ name }}</p>
<table>
<tr>
<td><span>ID: </span></td>
<td><input name="" type="text" /></td>
</tr>
<tr>
<td><span>PW: </span></td>
<td><input name="" type="password" /></td>
</tr>
<tr>
<td><span>name: </span></td>
<td><input name="" type="password" /></td>
</tr>
<tr>
<td><span>remark: </span></td>
<td><input name="" type="password" /></td>
</tr>
<tr>
<td colspan="2" align="center"><button>가입하기</button></td>
</tr>
<tr>
<td colspan="2" align="center"><NLink to="/">Go Home</NLink></td>
</tr>
</table>
</div>
</template>
<script>
export default {
asyncData () {
return {
}
},
head: {
title: 'Join Page'
}
}
</script>
|
|
template태그안에 html 형식을 지정해주고 데이터처리는 아래 script 부분에서 수행 할수있다
data()를 통해 일반적인 데이터를 출력할수도 있고
소스에 포함된 asyncData()는 비동기적 data를 출력할 수 있게해준다
출력결과를 return{}에 포함시켜주면 페이지에 적용된다
예시로 현재 상단 템플릿의 {{name}} 부분에 현재 렌더링주체를 구분하여 비동기로 값을 표현할 수 있도록
되어있다 처음 페이지가 생성되었을때는 static으로 되있고 server나 client에 의해 rendering이 발생하면
name부분이 비동기적으로 알아서 변경되게 된다
위에서 routing을 자동으로 설정해준다고 했는데
페이지들에 포함된 NLink태그를 통해 사용할수 있다
[pages]
ㄴindex.vue <NLink to="/"></NLink>
ㄴloginForm.vue <NLink to="/loginForm.vue"></NLink>
ㄴjoinForm.vue <NLink to="/joinForm.vue"></NLink>
pages폴더의 구조에따라
[pages]
ㄴindex.vue <NLink to="/"></NLink>
ㄴ[login]
ㄴloginForm.vue <NLink to="/login/loginForm.vue"></NLink>
ㄴ[join]
ㄴjoinForm.vue <NLink to="/join/joinForm.vue"></NLink>
이런식으로 라우팅을 자동으로 잡아준다
이렇게 기본적인 vue프로젝트를 생성할 수 있다
진행중인 프로젝트의 소스는 아래 링크에서 확인할 수 있습니다
github : https://github.com/m0oogi/oauth2_msa
참조 : https://kdydesign.github.io/2019/04/10/nuxtjs-tutorial/