Vue.js
활용 기법
vue scss
-
명령 프롬프트에 npm install sass-loader@7, npm install node-sass@4 설치
-
assets 폴더에 scss 폴더를 만들어서 scss 파일 생성
-
App.vue 파일에서 스타일에 scss 속성 및 경로 추가 ('@' 를 사용해 상단으로 올라감)
<style lang="scss">
@import '@/assets/scss/style.scss'vue-router
- 한 페이지 안에서 페이지 이동하듯이, 한 부분을 여러 컴포넌트로 교체하는 방식
/ HTML 코드 /
-
router-link태그를 이용하며,to속성에는path값을 입력 -
router-view태그로router-link태그를 통해 나타낼 영역을 설정
<body>
<div id="app">
<header>
<h1>
<router-link to="/">logo</router-link>
</h1>
<ul id="gnb">
<li v-for="list in gnbList">
1번 방법 (v-for를 사용한 반복 구문)
<router-link v-bind:to="list.path">{{list.text}}</router-link>
2번 방법
<li>
<router-link to="/company">company</router-link>
</li>
<li>
<router-link to="/product">product</router-link>
</li>
<li>
<router-link to="/gallery">gallery</router-link>
</li>
<li>
<router-link to="/notice">notice</router-link>
</li>
</li>
</ul>
</header>
<router-view></router-view>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-router/3.5.4/vue-router.js"></script>
</body>/ CSS 코드 /
.router-link-active라는 클래스로 해당 라우터가 활성화 됐을 때의 CSS 속성을 설정할 수 있음
header #gnb li a.router-link-active {
color: green;
}/ JS 코드 /
-
vue-router.js를 스크립트로 불러오고,
VueRouter라는 새로운 vue 배열을routes라는 객체로 생성, 그리고 기존 vue 배열에서 router 배열을 불러오고 마운트 -
template를 미리 변수로 선언해도 사용 가능
let mainComp = { template: '<main><div class="container">main-contents</div></main>' }
let companyComp = { template: '<main><div class="container">company-contents</div></main>' }
let productComp = { template: '<main><div class="container">product-contents</div></main>' }
let galleryComp = { template: '<main><div class="container">gallery-contents</div></main>' }
let noticeComp = { template: '<main><div class="container">notice-contents</div></main>' }
let routes = [
{ path: '/', component: mainComp },
{ path: '/company', component: companyComp },
{ path: '/product', component: productComp },
{ path: '/gallery', component: galleryComp },
{ path: '/notice', component: noticeComp }
]
let router = new VueRouter({
routes
});
let app = new Vue({
el: '#app',
data: {
gnbList: [
{ text: 'company', path: '/company' },
{ text: 'product', path: '/product' },
{ text: 'gallery', path: '/gallery' },
{ text: 'notice', path: '/notice' }
]
},
router
}).$mount('#app'); // 뷰 인스턴스에 라우터 추가
안녕하세요. 맡은 업무를 확실하게 수행하는 웹 개발자가 되기 위하여 끊임없이 학습에 정진하겠습니다.