Vue.js 기본 화면 수정하기

Vue.js 기본 제공된 소스를 수정하기 위해서 먼저 해주어야 할 사항이다.

 

커맨드 창에서 npm install vue-router --save

 

https://bootstrap-vue.org/ 사이트에 접속하여 Get Started 버튼을 눌러서 순서대로 진행한다.

 

커맨드 창에서 아래 명령어를 입력한다.

yarn add vue bootstrap bootstrap-vue

 

 

위와 같은 에러 메시지가 나오면 CMD 창을 관리자 권한으로 열어서 명령어를 입력해야 한다.

관리자 권한으로 CMD 창 여는 방법

Window 키 + R 누르고 메시지 창에 cmd 입력하고 Ctrl + Shift + Enter키 누른다.

 

 

 

 

Vue.js 기초를 이해하기 위해서 "한시간만에 끝내는 Vue.js" 유투브 강좌를 듣고 실습한 걸 토대로 구글링해서 내용을 좀 더 추가하여 적어둔다.

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

 

작업한 파일 구조

- 추가한 폴더 : layout 폴더, views 폴더

- 추가한 파일 : Header.vue, Home.vue, About.vue, router.js

- 수정한 파일 : App.vue, main.js

 

 

소스코드

<!--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>

<Header /> 에서 />로 넣어주는 것을 self closing tag 라고 한다.

<br /> 가 예전에는 <br> 이었는데 self closing tag 를 추가하는 것이 최신 문법이다.

 

// main.js import Vue from 'vue' import App from './App.vue' import router from './router' import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'   // Make BootstrapVue available throughout your project Vue.use(BootstrapVue) // Optionally install the BootstrapVue icon components plugin Vue.use(IconsPlugin)   // Import Bootstrap an BootstrapVue CSS files (order is important) 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')

 

// 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;

 

<!--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>   <style scoped>   </style>

 

<!--Home.vue--> <template> <div>   <h2>Welcome to {{ title }}!</h2>   <input type="text" v-model="input1">   <button @click="getData">Get</button>   <button @click="setData">Set</button>   <div><p></p></div>   <select class="form-control" v-model="region" @change="changeRegion">     <option :value="d.v" v-for="(d,i) in optins" :key="i">{{d.data}}</option>   </select>   <div><p></p></div>   <table class="table table-bordered" v-if="tableShow">     <tr v-for="(d,i) in optins" :key="i">       <td>{{d.v}}</td>       <td>{{d.data}}</td>     </tr>   </table> </div> </template>   <script> export default {   name: "Home",   data(){     return {       // v-model 을 통해서 데이터 바인딩 처리       title: "MySite",       input1: "abc",       optins: [         {v:"S", data:"서울"},         {v:"B", data:"부산"},         {v:"D", data:"대전"},       ],       region: "D",       tableShow: false,       // v-show 는 랜더링을 하지만, v-if는 랜더링 자체를 하지 않는다.     }   },   watch:{     input1(){       // 특정 데이터를 모니터링하고 있다가       // 캐치해서 새로운 작업 수행 처리       console.log(this.input1);     },   },   methods: {     getData(){       alert(this.input1);     },     setData(){       this.input1 = "12345";     },     changeRegion(){       alert(this.region);     },   },   // Vue LifeCycle   beforeCreate(){     // Vue 인스턴스가 초기화된 직후에 발생한다.     // 컴포넌트가 DOM에 추가되기도 전이다.     // data, event, watcher에 접근하기 전이라 data, methods에도 접근할 수 없다.     console.log("beforeCreate");   },   created(){     // beforeCreate() => data() => created() 순으로 실행된다.     // data에 직접 접근이 가능하지만, 아직 템플릿과 가상DOM에는 접근할 수 없다.     // 이제 data와 events가 활성화되어 접근할 수 있다.     console.log("created");   },   beforeMount(){     console.log("beforeMount")   },   mounted(){     // 가상 DOM의 내용이 실제 DOM에 부착되고 난 이후에 실행되므로,     // data, computed, methods, watch 등 모든 요소에 접근이 가능하다.     console.log("mounted");   },   beforeUpdate(){     // DOM이 패치되기 전에 데이터가 변경될 때 호출된다.     console.log("beforeUpdate");   },   updated(){     // 데이터가 변경되어 가상 DOM이 다시 렌더링되고 패치된 후에 호출된다.     console.log("updated");   },   beforeDestroy(){     // 해당 인스턴스가 소멸(뷰 컴포넌트 제거)되기 직전에 beforeDestroy훅이 호출된다.     console.log("beforeDestroy");   },   destroyed(){     // 인스턴스가 소멸되고 난 직후에 destroyed 훅이 호출된다.     // Vue의 모든 디렉티브(v-)가 바인딩 해제되고     // 모든 이벤트 리스너가 제거되며 모든 하위 Vue 컴포넌트도 삭제된다.     console.log("destroyed");   },   } </script>   <style scoped>   </style>

 

<!--About.vue--> <template> <div>   <h1>About Page</h1> </div> </template>   <script> export default {   name: "About" } </script>   <style scoped>   </style>