🔔Vue.js

📂Content

Intro

Vue.js

컴포넌트 기반의 SPA를 구축할 수 있게 해주는 프레임워크

 

컴포넌트(Component) 

웹을 구성하는 로고, 메뉴바, 버튼, 모달창 등 웹 페이지 내의 다양한 UI 요소

재사용 가능하도록 구조화 한 것

 

SPA(Single Page Application) 

단일 페이지 어플리케이션

하나의 페이지 안에서 필요한 영역 부분만 로딩 되는 형태

빠른 페이지 변환

적은 트래픽 양

 

Vue.CLI (Command Line Interface) 

vue 프로젝트를 빠르게 개발하고 빌드하고 서비스를 런칭할 수 있도록 해주는 툴 

terminal을 통해서 text명령어를 입력해서 실행하는 도구

프로젝트 구조를 자동적으로 셋팅. 프로젝트 폴더 구조나 어떤 라이브러리로 구성해야하는지, 웹팩 설정을 어떻게 해야하는지에 대한 고민을 하지 않아도 된다. 

 

Vue 파일의 기본 형태 

<template>
  <!--HTML코드, 디자인 담당-->
</template>

<script>
// 위 디자인을 데이터를 바인딩하거나, 이벤트를 캐치하거나, 서버와 통신하기위한 javascript 코드가 들어간다.
export default {};
</script>

<style></style>

 

Main

1. Vue CLI 설치

vscode terminal창에 아래 코드를 입력.

ctrl+`을 이용해서 터미널 창을 열 수 있음 

npm install -g @vue/cli

 

2. Vue 프로젝트 생성

vue create 프로젝트명

default로 할 것인지 manuall로 할 것인지 

default를 선택할 시 babel과 eslint가 자동으로 설치가 된다. 

 

만약 Manually를 선택하고 enter를 누르면 아래와 같이 뜬다. 

수업에서는 Default Vue 2를 이용해서 설치 

 

설치 결과 

vue_practice 프로젝트가 성공적으로 설치가 되었다고하면서 시작하려면 파란 코드를 치면 된다. 

파란 코드를 치면 아래와 같은 결과가 나오는데 

http://localhost:8080/을 ctrl+클릭하면 해당 브라우저로 이동한다. 

 

 

3. Vue router 설치

router 

뷰에서 제공하는 공식 routing 모듈 

routing 기능을 해주는 공식 라이브러리 

routing 웹 페이지 간의 이동하는 방법 

메뉴를 클릭하거나 특정 버튼을 눌러서 특정 페이지를 이동할 때 보면 서버에 요청을 하고 새로운 페이지를 받아오는 형식으로 한다. 그런데 router는 그런 개념이 아님. SPA이다. 미리 해당하는 컴포넌트 페이지를 다 받아놓고 routing을 이용해서 그 부분만 화면을 갱신한다. 뷰나 앵귤러,리액트는 router를 이용해서 화면을 전환한다. 

 

npm install vue-router --save

오류가 나서

참고해서 

https://iancoding.tistory.com/154

[오류해결] npm install 설치시 npm ERR! code ERESOLVE

https://dlxl-min.tistory.com/67

[Vue.js #6] Vue2 라우터 설치 오류 (ERESOLVE unable to resolve dependency tree)

아래코드를 이용해서

npm install vue-router --save --legacy-peer-deps

문제 해결 

 

4. 실습 따라가기

4-1. BootStrapVue 설치

components 폴더 아래에 layout 폴더 생성 

 

일반적으로 웹 사이트에 들어가면 상단에 메뉴가 있고 하단에 contents가 있다. 상단의 메뉴를 클릭하면 하단의 콘텐츠가 바뀐다. 사실 상단의 부분은 페이지를 다시 갱신할 필요가 없다. 

 

layout폴더 안에 Header.vue 생성 

부트스트랩을 이용해서  header에 메뉴를 넣어서 꾸밀 것이다. vue용 부트스트랩이 있다. 

 

https://bootstrap-vue.org/docs

BootstrapVue

위 사이트 이용 

노란색 코드를 이용해서 vue에서 부트스트랩 사용할 것임. 

 성공적으로 설치완료. 부트스트랩과 부트스트랩 뷰가 모듈 형태로 node_modules 폴더 안에 들어가 있고 이제 쓸 수 있는 상태가 되었다. 그런데 이것을 지금 바로 쓸 수 있는 상태는 아니다. 이것을 사용하기 위해서 main.js 파일에 추가를 해주어야 한다. 

노란색 부분부터 쭉 추가하기 css와 부트스트랩 뷰를 이용할 수 있게 해줌 

 

Components -> Navbar -> 코드 복사 -> header.vue의 <template>에 삽입 

 

Header.vue에 다음 코드 추가 

<script>
export default {
  name: "header", // component의 이름 선언
};
</script>

 

4-2. App.vue 수정 

src 폴더 아래에 views 폴더 생성. 이곳에 page에 해당하는 component들을 다 넣을 것이다. 

가장 중요한 파일은 App.vue이다. 

브라우저화면이 구성된 부분이 App.vue에 정의되어 있다.  

그렇기 때문에 App.vue를 수정한다. 

 

<template>
  <div id="app">
    <Header />
  </div>
</template>

<script>
import Header from "./layout/Header.vue";

export default {
  name: "App",
  components: {
    Header,
  },
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

 

Header 컴포넌트를 사용하기 위해서 import를 하고, import한 컴포넌트를 components에 넣어주어야한다. 그러면 <template> 내부에서 태그로 header을 사용할 수 있다. 

 

<Header> 태그는 한 줄로 보이지만, components의 Header을 참조해서, import의 Header을 찾아서 실제 Header.vue파일을 찾아서 넣어준다. 

 

<template>
  <div id="app">
    <Header />
    <div id="content" class="content">
      <router-view></router-view>
    </div>
  </div>
</template>

그리고 Header 밑에는 자주 바뀌는 contents 영역이 들어간다. 

<Header>은 바뀌지 않고 router을 이용해서 path가 바뀔때마다 <router-view>만 해당하는 컴포넌트를 불러와서 로딩한다. 

 

 

views라는 폴더 아래에 Home.vue, About.vue를 생성한다. 

그래서 상단의 메뉴를 클릭할 때마다 router-view부분이 home이 나오거나 about이 나오게 하고싶다. 

 

routing을 통해서 페이지 전환이 될려면 라우터를 선언해주어야한다. 

src폴더 안에 router.js파일 생성 => router 정의

import Vue from "vue";
import VueRouter from "vue-router";
import Home from "./views/Home";
import About from "./views/About";

Vue.use(VueRouter); // Vue 내에서 VueRouter을 사용하겠다.

//Router 정의
const router = new VueRouter({
  mode: "history",
  routes: [
    //실제 사용자가 url path로 들어왔을 때 어떤 컴포넌트에 넘길지 정의
    {
      path: "/", //localhost:8080 다음에 path가 없고 가장 기본적인 path
      component: Home, // Home을 로딩
    },
    {
      path: "/about",
      component: About,
    },
  ],
});

 

import router from "./router";
...
new Vue({
  router,
  render: (h) => h(App),
}).$mount("#app");

main.js에서 router 선언 

...은 기존 코드와 동일 

app을 mount할 때 router을 쓸 수 있는 구조가 된다. 

 

 

오류가 떠서 

https://velog.io/@ensun_p/Vue-router-%EC%84%A4%EC%B9%98-%EC%BB%B4%ED%8C%8C%EC%9D%BC-%EC%98%A4%EB%A5%98-%EC%A3%BC%EC%9D%98

Vue router, should always be multi-word-component 에러 (ESLint 설정)

참고해서 두 문자로 수정했다. 

 

 

오류 발생

PS C:\VS\vue_practice> npm run build
Debugger attached.

> vue_practice@0.1.0 build
> vue-cli-service build

Debugger attached.
All browser targets in the browserslist configuration have supported ES module.
Therefore we don't build two separate bundles for differential loading.


⠙  Building for production...Debugger attached.
⠧  Building for production...Debugger attached.
⠏  Building for production...Debugger attached.
⠧  Building for production...[BABEL] Note: The code generator has deoptimised the styling of C:\VS\vue_practice\node_modules\bootstrap-vue\esm\icons\icons.js as it exceeds the max of 500KB.
⠋  Building for production...

 WARNING  Compiled with 4 warnings                                                            오전 3:49:29

 warning  in ./src/router.js

export 'default' (imported as 'VueRouter') was not found in 'vue-router' (possible exports: NavigationFailureType, RouterLink, RouterView, START_LOCATION, createMemoryHistory, createRouter, createRouterMatcher, createWebHashHistory, createWebHistory, isNavigationFailure, loadRouteLocation, matchedRouteKey, onBeforeRouteLeave, onBeforeRouteUpdate, parseQuery, routeLocationKey, routerKey, routerViewLocationKey, stringifyQuery, useLink, useRoute, useRouter, viewDepthKey)

 warning  

asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
This can impact web performance.
Assets: 
  css/chunk-vendors.269fb860.css (257 KiB)
  js/chunk-vendors.ab2cb953.js (1.18 MiB)

 warning 

entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.
Entrypoints:
  app (1.44 MiB)
      css/chunk-vendors.269fb860.css
      js/chunk-vendors.ab2cb953.js
      js/app.3ce75f14.js


 warning 

webpack performance recommendations:
You can limit the size of your bundles by using import() or require.ensure to lazy load some parts of your application.
For more info visit https://webpack.js.org/guides/code-splitting/

  File                                   Size                           Gzipped

  dist\js\chunk-vendors.ab2cb953.js      1213.15 KiB                    295.09 KiB
  dist\js\app.3ce75f14.js                4.01 KiB                       1.67 KiB
  dist\css\chunk-vendors.269fb860.css    256.89 KiB                     35.61 KiB

  Images and other types of assets omitted.
  Build at: 2023-05-09T18:49:31.182Z - Hash: 8d3a690af6d68a0b - Time: 52093ms

 DONE  Build complete. The dist directory is ready to be deployed.
 INFO  Check out deployment instructions at https://cli.vuejs.org/guide/deployment.html

Waiting for the debugger to disconnect...
Waiting for the debugger to disconnect...

'default' (imported as 'VueRouter') was not found in 'vue-router' 오류 

버전이 맞지 않아서 발생 

package.json에 가서 debug 눌러서 build 눌렀더니 해결 

 

📣 comment

뷰를 시작하고나서 잘 모르겠어서 듣기 시작했다. 

 

📑 공부 자료

https://www.youtube.com/watch?v=sqH0u8wN4Rs 

 

 

git-bash 사용법 

https://gorokke.tistory.com/22

[Git] git 명령어 모음, 총 정리 (gitbash, terminal)