1. 설치

npm i -D node-sass sass-loader @nuxtjs/style-resources

 

 

 

2. 설정

- nuxt.config.js

 

module.exports = {

    modules : [

        '@nuxtjs/style-resources'

    ],

    styleResources : {

        scss : [

            '@/assets/scss/_function.scss'

        ],

    }

}

저작자표시

'frontend > vue' 카테고리의 다른 글

Vue( Nuxt.js ) axios, async, await  (0) 2019.10.30
Vue( Nuxt.js ) mapActions( store module )  (0) 2019.01.22
Vue( Nuxt.js ) mapMutations( store module )  (0) 2019.01.22
Vue( Nuxt.js ) mapGetters( store module )  (0) 2019.01.22
Vue( Nuxt.js ) axios, promise  (0) 2019.01.21

<template>

    <div>

        <ul>

            <li v-for="( item, index ) in list" :key="index">

                <span>{{ item.id }}</span>:<span>{{ item.data }}</span>

            </li>

        </ul>

    </div>

</template>

 

<script>

import axios from "axios";

export default {

    data(){

        return{

            list : []

        }

    },

 

    mounted(){

        let links = [

            "https://api.myjson.com/bins/t4u74", 

            "https://api.myjson.com/bins/t4u74", 

            "https://api.myjson.com/bins/t4u74", 

            "https://api.myjson.com/bins/t4u74", 

            "https://api.myjson.com/bins/t4u74", 

            "https://api.myjson.com/bins/t4u74", 

            "https://api.myjson.com/bins/t4u74", 

            "https://api.myjson.com/bins/t4u74", 

            "https://api.myjson.com/bins/t4u74", 

            "https://api.myjson.com/bins/t4u74"

        ];

 

        this.load( links );

    },

 

    methods : {

        async load( $links ){

            let list = [];

 

            var i = 0;

            var len = $links.length;

            var result;

 

            for( i; i<len; i++ )

            {

                result = await axios.get( $links[ i ]);

                this.list.push({ id : i, data : result.data });

            }

        },

    }

}

</script>

 

저작자표시

'frontend > vue' 카테고리의 다른 글

Vue(Nuxt.js) Global SCSS 설정  (0) 2019.10.30
Vue( Nuxt.js ) mapActions( store module )  (0) 2019.01.22
Vue( Nuxt.js ) mapMutations( store module )  (0) 2019.01.22
Vue( Nuxt.js ) mapGetters( store module )  (0) 2019.01.22
Vue( Nuxt.js ) axios, promise  (0) 2019.01.21







데모보기




pages/studymapactions/index.vue


<template>
<div class="map_actions">
<h1>mapActions</h1>
<button @click='show'>버튼</button>
<p>{{ count }}</p>
</div>
</template>

<script>
import { mapActions, mapGetters } from "vuex";

export default {
data(){
return{
count : 0
}
},

methods : {
show(){

// 기존 방식
// this.$store.dispatch( "studymapactions/setCount" );
this.setCount();

// 기존 방식
// this.count = this.$store.getters[ "studymapactions/getCount" ];
this.count = this.getCount;
},

...mapActions( "studymapactions", [
"setCount"
])
},

computed : {
...mapGetters( "studymapactions", [
"getCount"
])
}
}
</script>

<style lang="scss" scoped>
.map_actions{ width: 500px; margin: 0 auto; padding-top: 50px; text-align: center;
h1{ margin-bottom: 50px; }
button{ width: 500px; font-size: 100px; padding: 50px 0; margin-bottom: 50px; }
p{ font-size: 50px; }
}
</style>






store/studymapactions.js


export default{
state(){
return{
count : 0
}
},

mutations : {
setCount( state ){
state.count++;
}
},

actions : {
setCount({ commit }){
commit( "setCount" );
}
},

getters : {
getCount( state ){
return state.count;
}
}
}


'frontend > vue' 카테고리의 다른 글

Vue(Nuxt.js) Global SCSS 설정  (0) 2019.10.30
Vue( Nuxt.js ) axios, async, await  (0) 2019.10.30
Vue( Nuxt.js ) mapMutations( store module )  (0) 2019.01.22
Vue( Nuxt.js ) mapGetters( store module )  (0) 2019.01.22
Vue( Nuxt.js ) axios, promise  (0) 2019.01.21






데모보기




pages/studymapmutations/index.vue


<template>
<div class="map_mutations">
<h1>mapMutations</h1>
<button @click='show'>버튼</button>
<p>{{ count }}</p>
</div>
</template>

<script>
import { mapGetters, mapMutations } from 'vuex';
export default {
data(){
return{
count : 0
}
},

methods : {
show(){
// 기존 방식
// this.$store.commit( "studymapmutations/setCount" );
this.setCount();

// 기존 방식
// this.count = this.$store.getters[ "studymapmutations/getCount" ];
this.count = this.getCount;
},

...mapMutations( "studymapmutations", [
"setCount"
])
},

computed : {
...mapGetters( "studymapmutations", [
"getCount"
])
}
}
</script>

<style lang="scss" scoped>
.map_mutations{ width: 500px; margin: 0 auto; padding-top: 50px; text-align: center;
h1{ margin-bottom: 50px; }
button{ width: 500px; font-size: 100px; padding: 50px 0; margin-bottom: 50px; }
p{ font-size: 50px; }
}
</style>





store/studymapmutations.js



export default{
state(){
return{
count : 0
}
},

mutations : {
setCount( state ){
state.count++;
}
},

getters : {
getCount( state ){
return state.count;
}
}
}


'frontend > vue' 카테고리의 다른 글

Vue( Nuxt.js ) axios, async, await  (0) 2019.10.30
Vue( Nuxt.js ) mapActions( store module )  (0) 2019.01.22
Vue( Nuxt.js ) mapGetters( store module )  (0) 2019.01.22
Vue( Nuxt.js ) axios, promise  (0) 2019.01.21
Vue( Nuxt.js ) Filter  (0) 2019.01.21






데모보기





pages/studymapgetters/index.vue


<template>
<div class="map_getters">
<h1>mapGetters</h1>
<button @click='show'>버튼</button>
<ul>
<li v-for="( item, index ) in list" :key="index">
{{ item.txt }}
</li>
</ul>
</div>
</template>

<script>
import { mapGetters } from "vuex";
export default {
data(){
return{
list : []
}
},

methods : {
show(){
this.list = this.getList;
}
},

computed : {
...mapGetters({
getList : "studygetters/getList"
})
}
}
</script>

<style lang="scss" scoped>
.map_getters{ width: 500px; margin: 0 auto; text-align: center; padding-top: 50px;
h1{ margin-bottom: 50px; }
button{ width: 500px; padding: 50px 0; font-size: 50px; margin-bottom: 50px; }
ul{
li{ margin-bottom: 10px; }
}
}
</style>






store/studygetters.js


export default{
state(){
return{
list : [
{ txt : "첫번째 리스트" },
{ txt : "두번째 리스트" },
{ txt : "세번째 리스트" },
{ txt : "네번째 리스트" },
{ txt : "다섯번째 리스트" }
]
}
},

getters : {
getList( state ){
return state.list;
}
}
}


'frontend > vue' 카테고리의 다른 글

Vue( Nuxt.js ) mapActions( store module )  (0) 2019.01.22
Vue( Nuxt.js ) mapMutations( store module )  (0) 2019.01.22
Vue( Nuxt.js ) axios, promise  (0) 2019.01.21
Vue( Nuxt.js ) Filter  (0) 2019.01.21
Vue( Nuxt.js ) Vuex( Store ) Module  (0) 2019.01.21





데모보기




npm install axios




pages/studypromise/index.vue



<template>
<div class="promise">
<button @click="show">버튼</button>
<p>출력값 : {{ name }}</p>
</div>
</template>

<script>
export default {
data()
{
return{
name : ""
}
},

methods : {
show()
{
let vm = this;

this.$store.dispatch( "studypromise/setData" )
.then( function(){
let getData = vm.$store.getters[ "studypromise/getData" ];
vm.name = getData.name;
}
);
}
}
}
</script>

<style lang="scss" scoped>
.promise{ width: 500px; text-align: center; margin: 0 auto; padding: 100px 0;
button{ width: 500px; font-size: 100px; padding: 10px 0; margin-bottom: 50px; }
p{ font-size: 50px; }
}
</style>






store/studypromise.js


import axios from "axios";

export default{
state(){
return{
data : {}
}
},

mutations : {
setData( state, $data ){
state.data = $data;
}
},

actions : {
setData( { commit } ){
return new Promise( function( resolve, reject ){
axios.get( 'https://api.myjson.com/bins/1d34xs' ).then(( res ) => {
commit( "setData", res.data );
resolve();
});
});
}
},

getters : {
getData : function( state ){
return state.data;
}
}
}


'frontend > vue' 카테고리의 다른 글

Vue( Nuxt.js ) mapMutations( store module )  (0) 2019.01.22
Vue( Nuxt.js ) mapGetters( store module )  (0) 2019.01.22
Vue( Nuxt.js ) Filter  (0) 2019.01.21
Vue( Nuxt.js ) Vuex( Store ) Module  (0) 2019.01.21
Vue( Nuxt.js ) Vuex( Store )  (0) 2019.01.21







데모보기





pages/studyfilter/index.vue


<template>
<div class="studyfilter">
<h1>Study Filter</h1>
<button @click="showList">확인</button>
<ul>
<li v-for="( item, index ) in list" :key="index">
{{ index + '. ' + item.txt }}
</li>
</ul>
</div>
</template>

<script>
export default {
data(){
return{
list : []
}
},

methods : {
showList()
{
this.list = this.$store.getters[ "studyfilter/getList" ];
}
}
}
</script>

<style lang="scss" scoped>
.studyfilter{ padding-top: 50px; width: 500px; margin: 0 auto; text-align: center;
h1{ margin-bottom: 50px; }
button{ width: 500px; text-align: center; font-size: 100px; margin-bottom: 50px; padding: 10px 0; }
ul{
li{ margin-bottom: 20px; }
}
}
</style>





store/studyfilter.js


export default{
state(){
return{
list : [
{ txt : "첫번째 리스트", isBoo : true },
{ txt : "두번째 리스트", isBoo : false },
{ txt : "세번째 리스트", isBoo : true },
{ txt : "네번째 리스트", isBoo : false },
{ txt : "다섯번째 리스트", isBoo : true }
]
}
},

getters : {
getList : function( state ){
return state.list.filter( $item => { return $item.isBoo });
}
}
}


'frontend > vue' 카테고리의 다른 글

Vue( Nuxt.js ) mapGetters( store module )  (0) 2019.01.22
Vue( Nuxt.js ) axios, promise  (0) 2019.01.21
Vue( Nuxt.js ) Vuex( Store ) Module  (0) 2019.01.21
Vue( Nuxt.js ) Vuex( Store )  (0) 2019.01.21
Vue Plugin  (0) 2019.01.15





데모보기




pages/studystoremodule/index.vue


<template>
<div class="study_store_module">
<h1>STUDY STORE MODULE</h1>
<button @click="getList()">버튼</button>
<ul>
<li v-for="( item, index ) in list" :key="index">
{{ item.txt }}
</li>
</ul>
</div>
</template>

<script>
export default {
data(){
return{
list : []
}
},

methods : {
getList(){
this.list = this.$store.getters[ "studystoremodule/getData" ];
}
}
}
</script>

<style lang="scss" scoped>
.study_store_module{ width: 500px; margin: 0 auto; text-align: center; padding-top: 50px;
h1{ margin-bottom: 50px; }
button{ width: 500px; font-size: 100px; padding: 20px 0; margin-bottom: 50px; }
ul{
li{ margin-bottom: 20px; }
}
}
</style>






store/studystoremodule.js



export default{
state(){
return{
list : [
{ txt : "Store Module : 첫번째 리스트" },
{ txt : "Store Module : 두번째 리스트" },
{ txt : "Store Module : 세번째 리스트" },
{ txt : "Store Module : 네번째 리스트" },
{ txt : "Store Module : 다섯번째 리스트" }
]
}
},

getters : {
getData : function( state ){
return state.list;
}
}
}





store/index.js


export const state = () => ({
list : [
{ txt : "첫번째 리스트" },
{ txt : "두번째 리스트" },
{ txt : "세번째 리스트" },
{ txt : "네번쨰 리스트" },
{ txt : "다섯번째 리스트" }
]
});


'frontend > vue' 카테고리의 다른 글

Vue( Nuxt.js ) axios, promise  (0) 2019.01.21
Vue( Nuxt.js ) Filter  (0) 2019.01.21
Vue( Nuxt.js ) Vuex( Store )  (0) 2019.01.21
Vue Plugin  (0) 2019.01.15
Vue Mixin( 믹스인 )  (0) 2019.01.15




데모보기



pages/studystore/index.vue


<template>
<div class="studystore">
<h1>STORE</h1>
<ul>
<li v-for="( item, index ) in getList()" :key="index">
{{ item.txt }}
</li>
</ul>
</div>
</template>

<script>
export default {
data(){
return{
getList(){
return this.$store.state.list;
}
}
}
}
</script>

<style lang="scss" scoped>
.studystore{ width: 500px; margin: 0 auto; text-align: center; padding-top: 50px;
h1{ margin-bottom: 25px; }
ul{
li{ margin-bottom: 10px; }
}
}
</style>






store/index.js


import Vuex from 'vuex';
const store = () => new Vuex.Store({
state : {
list : [
{ txt : "첫번째 리스트" },
{ txt : "두번째 리스트" },
{ txt : "세번째 리스트" },
{ txt : "네번쨰 리스트" },
{ txt : "다섯번째 리스트" }
]
}
})

export default store;


'frontend > vue' 카테고리의 다른 글

Vue( Nuxt.js ) Filter  (0) 2019.01.21
Vue( Nuxt.js ) Vuex( Store ) Module  (0) 2019.01.21
Vue Plugin  (0) 2019.01.15
Vue Mixin( 믹스인 )  (0) 2019.01.15
Vue TweenMax Slider Gallery  (0) 2019.01.15





Vue

Nuxt




데모보기



- StudyPlugin.js


export default{
install( Vue ){

Vue.prototype.getMobileDevice = function(){
let mobileKeyWords = [
'Android',
'iPhone',
'iPod',
'BlackBerry',
'Windows CE',
'SAMSUNG',
'LG',
'MOT',
'SonyEricsson'
];

let i = 0;
let len = mobileKeyWords.length;

for( i; i<len; i++ )
{
if( navigator.userAgent.match( mobileKeyWords[ i ] ) != null ){
return mobileKeyWords[ i ];
}
}

return "알 수 없음.";
}

Vue.prototype.getBrower = function(){
let browers = [
"chrome",
"opera" ,
"staroffice" ,
"webtv" ,
"beonex" ,
"chimera" ,
"netpositive" ,
"phoenix" ,
"firefox" ,
"safari" ,
"skipstone" ,
"netscape" ,
"mozilla/5.0" ,
"msie"
];

let i = 0;
let len = browers.length;
let agt = navigator.userAgent.toLowerCase();

for( i; i<len; i++ )
{
if( agt.indexOf( browers[ i ] ) != -1 ) return browers[ i ];
}

return "알 수 없음";
}
}
}





- default.vue


<template>
<div>
<nuxt/>
</div>
</template>

<script>
import Vue from "vue";
import StudyPlugin from "~/plugins/StudyPlugin";

Vue.use( StudyPlugin );

export default {

}

</script>


<style lang="scss">
</style>





- index.vue


<template>
<div class="studyplugin">
<p>{{ "결과 값 : " + value }}</p>
<button @click="showCheckMobileDevice">CHECK_MOBILE_DEVICE</button>
<button @click="showCheckBrower">CHECK_BROWER</button>
</div>
</template>

<script>
export default {
data(){
return{
value : "?"
}
},

methods : {
showCheckMobileDevice()
{
this.value = this.getMobileDevice();
},

showCheckBrower()
{
this.value = this.getBrower();
}
}
}
</script>

<style lang="scss" scoped>
.studyplugin{ text-align: center; width: 500px; margin: 0 auto; padding-top: 50px;
p{ font-size: 50px; margin-bottom: 50px; }
button{ font-size: 20px; width: 500px; height: 200px; margin-bottom: 10px; }
}
</style>


저작자표시 비영리 변경금지

'frontend > vue' 카테고리의 다른 글

Vue( Nuxt.js ) Vuex( Store ) Module  (0) 2019.01.21
Vue( Nuxt.js ) Vuex( Store )  (0) 2019.01.21
Vue Mixin( 믹스인 )  (0) 2019.01.15
Vue TweenMax Slider Gallery  (0) 2019.01.15
Vue CLI  (0) 2018.04.17



Vue

Nuxt

Mixin



데모보기



- index.vue


<template>
<div class="study_mixin">
<CounterButton0 />
<CounterButton1 />
<CounterButton2 />
</div>
</template>

<script>

import CounterButton0 from '~/components/studymixin/CounterButton0';
import CounterButton1 from '~/components/studymixin/CounterButton1';
import CounterButton2 from '~/components/studymixin/CounterButton2';

export default {
components : {
CounterButton0,
CounterButton1,
CounterButton2
}
}
</script>

<style lang="scss" scoped>
.study_mixin{ text-align: center; padding-top: 10px;
> div{ margin-bottom: 10px; }
}
</style>






- CounterMixin.js


export default{
data(){
return{
count : 0
}
},

methods: {
showCount(){
this.count += 1;
}
}
}





- CounterButton0.vue


<template>
<div>
<button @click='showCount'>{{ count }}</button>
</div>
</template>

<script>
import CounterMixin from "~/components/studymixin/CounterMixin";
export default {
mixins : [
CounterMixin
]
}
</script>

<style lang="scss" scoped>
button{ width: 500px; font-size: 100px; }
</style>






- CounterButton1.vue


<template>
<div>
<button @click='showCount'>{{ count }}</button>
</div>
</template>

<script>
import CounterMixin from "~/components/studymixin/CounterMixin";
export default {
mixins : [
CounterMixin
],

data(){
return{
count : 10
}
},

methods : {
showCount()
{
this.count += 10;
}
}
}
</script>

<style lang="scss" scoped>
button{ width: 500px; font-size: 100px; }
</style>






- CounterButton2.vue


<template>
<div>
<button @click='showCount'>{{ count }}</button>
</div>
</template>

<script>
import CounterMixin from "~/components/studymixin/CounterMixin";
export default {
mixins : [
CounterMixin
]
}
</script>

<style lang="scss" scoped>
button{ width: 500px; font-size: 100px; }
</style>



저작자표시 비영리 변경금지

'frontend > vue' 카테고리의 다른 글

Vue( Nuxt.js ) Vuex( Store ) Module  (0) 2019.01.21
Vue( Nuxt.js ) Vuex( Store )  (0) 2019.01.21
Vue Plugin  (0) 2019.01.15
Vue TweenMax Slider Gallery  (0) 2019.01.15
Vue CLI  (0) 2018.04.17


Nuxt

Vue

TweenMax( gsap )


데모보기



- index.vue


<template>
<section class="container">
<div>
<Slide/>
</div>
</section>
</template>

<script>
import Slide from '~/components/slide/Slide.vue'

export default {
components: {
Slide
}
}
</script>

<style lang="scss">
</style>





- Slide.vue


<template>
<div class="slide">
<div class="list">
<ul>
<li v-for="( item, index ) in list" :style="item" :key="index">
<SlideItem :num='index' :setData='item' />
</li>
</ul>
</div>

<div class="controller">
<button @click="showPrev">이전</button>
<button @click="showNext">다음</button>
</div>
</div>
</template>

<script>

import SlideItem from "@/components/slide/SlideItem";
import { TweenMax, Expo } from "gsap";
export default {
components : {
SlideItem
},

data(){
return{

index : 0,
prevIndex : 0,
isShow : false,

list : [
{ left : "0px", backgroundColor : '#ff0000' },
{ left : "500px", backgroundColor : '#ffff00' },
{ left : "500px", backgroundColor : '#000000' },
{ left : "500px", backgroundColor : '#0000ff' }
]
}
},

methods : {
showPrev()
{
if( this.isShow ) return;
this.isShow = true;

this.index--;
if( this.index < 0 ) this.index = this.list.length - 1;

let item = this.list[ this.index ];
TweenMax.set( item, { left : "-500px" });
TweenMax.to( item, 0.5, { left : "0px", ease:Expo.easeInOut });

let prev = this.list[ this.prevIndex ];
TweenMax.set( prev, { left:"0px" });
TweenMax.to( prev, 0.5, { left : "500px", ease:Expo.easeInOut, onComplete:() =>{
this.isShow = false;
}});

this.prevIndex = this.index;
},

showNext()
{
if( this.isShow ) return;
this.isShow = true;

this.index++;
if( this.index > this.list.length - 1 ) this.index = 0;
let item = this.list[ this.index ];
TweenMax.set( item, { left : "500px" });
TweenMax.to( item, 0.5, { left : "0px", ease:Expo.easeInOut });

let prev = this.list[ this.prevIndex ];
TweenMax.set( prev, { left:"0px" });
TweenMax.to( prev, 0.5, { left : "-500px", ease:Expo.easeInOut, onComplete:() =>{
this.isShow = false;
}});

this.prevIndex = this.index;
}
}
}
</script>

<style lang="scss" scoped>
.slide{ width: 500px; margin: 0 auto;
.list{ width: 500px; height: 500px; margin-bottom: 10px; overflow: hidden;
ul{ position: relative;
li{ width: 500px; height: 500px; position: absolute; border: 1px solid black; }
}
}

.controller{ text-align: center;
button{ width: 200px; height: 50px; }
}
}
</style>







- SlideItem.vue


<template>
<div :style="setData" class="slide_item">
{{ num + "번째" }}
</div>
</template>

<script>
export default {
props : {
setData : Object,
num : Number
}
}
</script>

<style lang="scss" scoped>
.slide_item{ width: 100%; height: 100%; font-size: 100px; color: #fff; text-align: center; }
</style>


저작자표시 비영리 변경금지

'frontend > vue' 카테고리의 다른 글

Vue( Nuxt.js ) Vuex( Store ) Module  (0) 2019.01.21
Vue( Nuxt.js ) Vuex( Store )  (0) 2019.01.21
Vue Plugin  (0) 2019.01.15
Vue Mixin( 믹스인 )  (0) 2019.01.15
Vue CLI  (0) 2018.04.17



npm install --global vue-cli


vue init webpack sample


cd sample

npm install

npm run dev


// npm run build



저작자표시 비영리 변경금지

'frontend > vue' 카테고리의 다른 글

Vue( Nuxt.js ) Vuex( Store ) Module  (0) 2019.01.21
Vue( Nuxt.js ) Vuex( Store )  (0) 2019.01.21
Vue Plugin  (0) 2019.01.15
Vue Mixin( 믹스인 )  (0) 2019.01.15
Vue TweenMax Slider Gallery  (0) 2019.01.15

+ Recent posts

티스토리툴바