자바스크립트

 

1. vue cli 설치

$ npm uninstall -g vue-cli
$ npm install -g @vue/cli

 

 

2. vue 프로젝트 설치
$ vue create test

Vue CLI v4.5.11
Please pick a preset: Default ([Vue 2] babel, eslint)


�  Successfully created project test2.
�  Get started with the following commands:

 

 


3. 구동 
 $ cd test
 $ npm run serve


구동
 DONE  Compiled successfully in 3027ms                                                                                                                               

  App running at:
  - Local:   http://localhost:8080/
  - Network: http://192.168.0.9:8080/

  Note that the development build is not optimized.
  To create a production build, run npm run build.

 

 

 


4. vue 라우터 설치
$ npm install vue-router --save

 

https://cchoimin.tistory.com/entry/Vuejs-Vue-라우터란

뷰 라우터란?

 vue에서 라우팅 기능을 구현할 수 있도록 지원하는 공식 라이브러리.

 

 페이지 이동 태그, 화면에선 태그로 치환됨

 

 페이지 표시 태그 , 변경된 URL에 따라 해당 컴포넌트를 뿌려주는 영역

 

라우팅이란? 
웹페이지간의 이동방법을 말함.
 - 페이지를 이동할때 서버에 요청하여 새로 갱신하는 것이 아니라 미리 해당 페이지를 받아 놓고 페이지 이동시 클라이언트의 라우팅을     이용하여 화면을 갱신함, 이러한 방식을 SPA라고도 함(Single Page Application)

 - 라우팅을 이용하면 화면간의 전환을 매끄럽게 할 수 있음

 - 뷰,리액트,앵귤러 모두 라우팅을 이용하여 화면을 전환함.
 

 

router.js

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({
  mode: "history",
  routes: [{
      path: "/",
      component: Home
    },
    {
      path: "/about",
      component: About
    }
  ]
});

export default router;

 

 

 

5. vue.config.js 포트 변경

 

프로젝트 루트에 vue.config.js 파일 생성 후 

module.exports = {
  // ...
  devServer: {
    open: process.platform === 'darwin',
    host: '192.168.0.9',
    port: 8089, // CHANGE YOUR PORT HERE!
    https: false,
    hotOnly: false,
  },
  // ...
}

 

 

6. bootstrap-vue 적용

 

https://bootstrap-vue.org/docs

설치
# With npm
npm install vue bootstrap bootstrap-vue

# With yarn
yarn add vue bootstrap bootstrap-vue


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

// Import Bootstrap an 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)

 

 

 

 

main.js

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

// Install BootstrapVue
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')

 

 

 

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 v-slot: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>

 

 

App.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>
</style>

 

 

 

7. 기타 

 

Home.vue

<template>
  <div>
    <h1>Welcome to {{title2}}!</h1>
    <input type="text" v-model="input1" />
    <button type="button" @click="getData">Get</button>
    <button type="button" @click="setData">Set</button>

    <select class="form-control" v-model="region" @change="changeRegion">
      <option :key="i" :value="d.v" v-for="(d,i) in options">{{d.t}}</option>
    </select>

    <table class="table table-bordered" v-show="tableShow">
      <tr :key="i" v-for="(d,i) in options">
        <td>{{d.v}}</td>
        <td>{{d.t}}</td>
      </tr>
    </table>
  </div>
</template>
<script>
export default {
  data() {
    return {
      title: "개발자의 품격",
      title2: "Seoul",
      input1: "abcd",
      options: [
        { v: "S", t: "Seoul" },
        { v: "J", t: "Jeju" },
        { v: "B", t: "Busan" },
      ],
      region: "B",
      tableShow: false,
    };
  },
  watch: {
    input1() {
      console.log(this.input1);
    },
    title() {},
  },
  methods: {
    getData() {
      alert(this.input1);
    },
    setData() {
      this.input1 = "12345";
    },
    changeRegion() {
      alert(this.region);
    },
  },
  beforeCreate() {
    console.log("beforeCreate");
  },
  created() {
    console.log("created");
  },
  beforeMount() {
    console.log("beforeMount");
  },
  mounted() {
    console.log("mounted");
  },
  beforeUpdate() {
    // console.log("beforeUpdate");
  },
  updated() {
    // console.log("updated");
  },
  beforeDestroy() {
    console.log("beforeDestroy");
  },
  destroyed() {
    console.log("beforeDestroy");
  },
};
</script>

 

 

 

 

https://github.com/seungwongo/vuejs-1hour

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

about author

PHRASE

Level 60  라이트

큰 물건을 가지고 있는 자는 소소한 물건은 물건이라 생각지도 않는다. 가령 억만장자가 5원이나 10원 같은 돈에 마음을 쓴다면 억만장자의 자격을 잃게 된다. -장자

댓글 ( 3)

댓글 남기기

작성
  •    
  •  

자바스크립트 목록    more