[Vue.js] 01 - Vue.js 설치 (VS code 사용)

Vue.js란?

웹 프론트엔드 프레임워크

• 컴포넌트 기반의 SPA(Single Page Application)를 구축할 수 있게 해주는 프레임워크

컴포넌트 ( Component)

• 웹을 구성하는 로고, 메뉴바, 버튼, 모달창 등 웹 페이지 내의 다양한 UI 요소
• 재사용 가능하도록 구조화 한 것

SAP(Single Page Application)

• 단일 페이지 어플리케이션
• 하나의 페이지 안에서 필요한 영역 부분만 로딩 되는 형태
• 빠른 페이지 변환
• 적은 트래픽 양

---

 

1. 설치

• 사전에 node.js를 설치해야지 터미널에서 npm 명령어를 사용할 수 있다.

- vs코드에서 terminal 실행

- 명령어 입력 

npm install -g @vue/cli

-  버전 확인

vue --version

- 폴더 생성

vue create 폴더명 (testvuejs로 설정함)

 

 

** 여기서 디렉토리에 대한 쓰기 권한이 없는 경우

차례대로 명령어 입력

 

mkdir ~/.npm-global npm config set prefix '~/.npm-global'
export PATH=~/.npm-global/bin:$PATH
nvm install <version> nvm use <version>
npm install -g vue-cli

- 서버 실행

cd testvuejs (폴더명)
npm run serve

-주소창 localhost:8080 입력

 

- vue-router 설치  ( vue 공식 라이브러리)

npm install vue-router@3

-bootstrap-vue 설치 ( bootstrapVue 홈페이지에서 긁어오자)

npm install vue bootstrap bootstrap-vue

test로 만듬

 

 

 

 

main.js에 추가

import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'

// Import Bootstrap and BootstrapVue CSS files (order is important)
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

// Make BootstrapVue available throughout your project
Vue.use(BootstrapVue)
// Optionally install the BootstrapVue icon components plugin
Vue.use(IconsPlugin)

- css

import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap-vue/dist/bootstrap-vue.css';

---

2. 부트스트랩 적용해서 Vue.js 사용해보기

 

• 상단에 Components 선택 후 Navbar 탭에서 복사

<div>
  <b-navbar toggleable="lg" type="dark" variant="info">
    <b-navbar-brand href="#">NavBar</b-navbar-brand>

    <b-navbar-toggle target="nav-collapse"></b-navbar-toggle>

    <b-collapse id="nav-collapse" is-nav>
      <b-navbar-nav>
        <b-nav-item href="#">Link</b-nav-item>
        <b-nav-item href="#" disabled>Disabled</b-nav-item>
      </b-navbar-nav>

      <!-- Right aligned nav items -->
      <b-navbar-nav class="ml-auto">
        <b-nav-form>
          <b-form-input size="sm" class="mr-sm-2" placeholder="Search"></b-form-input>
          <b-button size="sm" class="my-2 my-sm-0" type="submit">Search</b-button>
        </b-nav-form>

        <b-nav-item-dropdown text="Lang" right>
          <b-dropdown-item href="#">EN</b-dropdown-item>
          <b-dropdown-item href="#">ES</b-dropdown-item>
          <b-dropdown-item href="#">RU</b-dropdown-item>
          <b-dropdown-item href="#">FA</b-dropdown-item>
        </b-nav-item-dropdown>

        <b-nav-item-dropdown right>
          <!-- Using 'button-content' slot -->
          <template #button-content>
            <em>User</em>
          </template>
          <b-dropdown-item href="#">Profile</b-dropdown-item>
          <b-dropdown-item href="#">Sign Out</b-dropdown-item>
        </b-nav-item-dropdown>
      </b-navbar-nav>
    </b-collapse>
  </b-navbar>
</div>

 

Header.Vue

<template>
<div>
  <b-navbar toggleable="lg" type="dark" variant="info">
    <b-navbar-brand href="#">NavBar</b-navbar-brand>

    <b-navbar-toggle target="nav-collapse"></b-navbar-toggle>

    <b-collapse id="nav-collapse" is-nav>
      <b-navbar-nav>
        <b-nav-item href="#">Link</b-nav-item>
        <b-nav-item href="#" disabled>Disabled</b-nav-item>
      </b-navbar-nav>

      <!-- Right aligned nav items -->
      <b-navbar-nav class="ml-auto">
        <b-nav-form>
          <b-form-input size="sm" class="mr-sm-2" placeholder="Search"></b-form-input>
          <b-button size="sm" class="my-2 my-sm-0" type="submit">Search</b-button>
        </b-nav-form>

        <b-nav-item-dropdown text="Lang" right>
          <b-dropdown-item href="#">EN</b-dropdown-item>
          <b-dropdown-item href="#">ES</b-dropdown-item>
          <b-dropdown-item href="#">RU</b-dropdown-item>
          <b-dropdown-item href="#">FA</b-dropdown-item>
        </b-nav-item-dropdown>

        <b-nav-item-dropdown right>
          <!-- Using 'button-content' slot -->
          <template #button-content>
            <em>User</em>
          </template>
          <b-dropdown-item href="#">Profile</b-dropdown-item>
          <b-dropdown-item href="#">Sign Out</b-dropdown-item>
        </b-nav-item-dropdown>
      </b-navbar-nav>
    </b-collapse>
  </b-navbar>
</div>
</template>
<script>
export default {
    name: "header"
}
</script>

• <templete> 태그를 만들고 그 안에 집어 넣는다. 이 태그는 부트스트랩 사용하기 위한 태그
• script안에 이름 선언해줌

---

 

1. src 안에 views 폴더 생성.

2. App.vue는 서버를 실행시켰을 때 출력되는 페이지 관리 -> template, script, style 태그로 보여지는 출력을 변경가능

 

App.vue

• script에서 header.vue 가져옴

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

<script>
import Header from './components/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>

 

Home.vue

<template>
    <div>
        <h1>Welcome to Home!</h1>
    </div>
</template>
<script>
export default {};
</script>

About.vue

<template>
    <div>
        <h1>About Page</h1>
    </div>
</template>
<script>
export default {};
</script>

 

router.js

• home 과 about을 import해준다. router를 생성하여 사용 이때 // eslint-disable-line no-unused-vars 이 주석을 꼭 달아줘야 인식이 된다.

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

Vue.use(VueRouter);

const router = new VueRouter({ // eslint-disable-line no-unused-vars
    mode: "history",
    routes: [{
        path:"/",
        component: Home
     },
     {
        path:"/about",
        component: About
     }
    ]
});
export default router;

 

main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import {
   BootstrapVue,
   IconsPlugin
   } from 'bootstrap-vue'

// Import Bootstrap and BootstrapVue CSS files (order is important)
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

// Make BootstrapVue available throughout your project
Vue.use(BootstrapVue)
// Optionally install the BootstrapVue icon components plugin
Vue.use(IconsPlugin)

import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap-vue/dist/bootstrap-vue.css';

Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

 

** 여기서 서버 실행하면 오류가 난다.

-> vue에서는 컴포넌트명을 반드시 단어의 조합으로 지어야 하기 때문에 나는 에러다.

 Error : vue/multi-word-component-names

 

html 태그와 헷갈리지 않게 하기 위해, 에러처리를 무시해주자

vue.config.js

•   lintOnSave : false 추가

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  lintOnSave : false
})

 

추가하고 다시 서버 돌리면 변경됨!

 

++ 에디터 부가기능 설치

 - extensions에서 설치

• vetur
• html css support
• vue3 snipppets

++

node_modules. : 프로젝트에 쓰는 라이브러리들

src : 소스코드 담는 곳

public : html 파일 , 기타파일 보관

pakage.json : 라이브러리 버전, 프로젝트 설명 기록