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
댓글 ( 12)
댓글 남기기