1. css프레임워크의 bootstarp 무료 템플릿을 받는다. https://startbootstrap.com/


2. 다운로드 받은 파일의 압축을 풀고 index.html 파일을 열어준다. dist폴더의 index.html이다.


3. 아래처럼  index.html 파일의 영역소스를  component에 분리시켜 넣어준다. 


[분리된 파일]

Footer.vue

Header.vue

Siderbar.vue


4. 다운로드 받은 css/styles.css 파일을 내프로젝트 폴더의 public/css/styles.css 에 복사한다.

그리고 welcome.blade.php 파일에 링크시켜 놓자.

1
 <link rel="stylesheet" href="{{ asset('css/styles.css') }}">
cs


5. 브라우저에서 확인해보면 정상 출력이 되야한다.


컴포넌트가 모두 호출되었다.


6. 폰트 어썸을 설치하자

1
npm install --save-dev @fortawesome/fontawesome-free    
cs



7. 빌드하기

1
npm run watch
cs


8. app.scss 임포트하기

1
2
3
4
5
$fa-font-path :"../webfonts";
 
//fontawesome
@import '~@fortawesome/fontawesome-free/scss/fontawesome.scss';
@import '~@fortawesome/fontawesome-free/scss/solid.scss';
cs



아이콘이 적용되었다.


저작자표시

'라라벨 > laravel Vue SPA' 카테고리의 다른 글

laravel vue spa CRUD Part1  (0) 2020.02.25
laravel databases, vuex  (0) 2020.02.23
laravel spa vue-router, welcome.vue  (0) 2020.02.23
laravel spa (Vuejs, vuex, SPA, vue-router) 디테일버전 laravel v6.2  (0) 2020.02.23

1. 라라벨 설치하기 (v6.2)

1
composer create-project --prefer-dist laravel/laravel laravelspa
cs


2. laravel/ui 패키지 설치  (예 : php artisan ui bootstrap 설치할 수 있는 프론트 엔트 스캐폴딩을 설치하게 해준다.)

1
cd laravelspa
cs


1
composer require laravel/ui
cs


3. Vue설치

1
php artisan ui vue
cs


4. npm설치(노드 패키지관리자)

1
npm install
cs


5. SASS파일을 일반 CSS로 컴파일 할 수 있음(npm run dev wwbpack.mix.js public/css)

1
npm run dev
cs


6. respirces/views/welcome.blade.php 파일을 열어서 style, div 삭제


7. 컴파일된  app.js, app.css 를 임포트해준다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
 
        <title>Laravel</title>
 
        <!-- Fonts -->
        <link href="https://fonts.googleapis.com/css?family=Nunito:200,600" rel="stylesheet">
 
        <!-- Styles -->
        <link rel="stylesheet" href="{{ asset('css/app.css') }}">
    </head>
    <body>
 
        <script src="{{ asset('js/app.js') }}"></script>
    </body>
</html>
 
cs


8. resources/sass/app.scss 열어서 안의 내용을 삭제해준다.(필요없음)


9. resources/js/bootstrap.js 파일삭제

    resources/components/ExampleComponent.vue 파일삭제


10. resources/js/app.js 파일을 열어 아래와 같이 수정한다.

1
2
3
4
5
import Vue from 'vue';
 
new Vue({
    el: '#app',
});
cs


11. resources/views/welcome.blade.php 파일에 <div id="app"></div> 작성해준다.

1
2
3
4
    <body>
        <div id="app"></div>
        <script src="{{ asset('js/app.js') }}"></script>
    </body>
cs


12. 빌드 감시를 해준다.

1
npm run watch
cs


13. 브라우저로 가보자(난 발렛을 설치했으니 laravelspa.test 로 접속하면된다.

  vue 컴포넌트 검사창을 가보면 Root 컴포넌트가 있는걸 확인 할 수 있다.


14. component를 만들어보자(위치: resources/js/App.vue) 주의! components폴더가 아니다 그 상위이다.



15. App.vue 구조만들기 (플러그인이 설치되어 있어야함)


Hello World!를 작성해주자(아무거나)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<template>
  <main>
      <h3>Hello World!</h3>
  </main>
</template>
 
<script>
export default {
 
}
</script>
 
<style>
 
</style>
cs


16. app.js 파일로가서 방금 작성한 component를 import해준다. 

1
2
3
4
5
6
7
import Vue from 'vue';
import App from './App.vue';
 
new Vue({
    el: '#app',
    render: h => h(App)
});
cs


17. 브라우저로 가보면 변경된 것을 확인 할 수 있다.


18. 부트스트랩을 import해준다. 

경로는 node_modules에 있는 부트스트랩이다.

부트스트램 프레임웍을 사용할 수 있게 해준다.

1
2
3
4
5
6
7
8
9
import Vue from 'vue';
import App from './App.vue';
import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap';
 
new Vue({
    el: '#app',
    render: h => h(App)
});
cs




App.vue 파일로 가서 버튼을 달아보자

1
2
3
4
5
6
<template>
  <main>
      <h3>Hello World!</h3>
      <button class="btn btn-primary">Click me</button>
  </main>
</template>
cs


19. 브라우저에서 확인해보자.


저작자표시

'라라벨 > laravel Vue SPA' 카테고리의 다른 글

laravel vue spa CRUD Part1  (0) 2020.02.25
laravel databases, vuex  (0) 2020.02.23
laravel spa vue-router, welcome.vue  (0) 2020.02.23
laravel spa 부트스트랩 템플릿 적용, fontawesome적용  (0) 2020.02.23


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<template>
  <form v-on:submit.prevent="submitForm">
    <div>
      <label for="username">id:</label>
      <input id="username" type="text" v-model="username" />
    </div>
    <div>
      <label for="password">PW:</label>
      <input id="password" type="psassword" v-model="password"  />
    </div>
    <button type="submit">login</button>
  </form>
</template>
 
<script>
import axios from 'axios';
 
export default {
  data:function(){
    return{
       username : '',
       password : '',
    }
  },
  methods:{
    submitForm:function(){
      console.log(this.username, this.password);
      var url = 'https://jsonplaceholder.typicode.com/users';
      var data = {
        username: this.username,
        password: this.password
      }
      axios.post(url, data)
        .then(function(response){
          console.log(response);
          
        })
        .catch(function(error){
          console.log(response);
        });
    }
  }
};
</script>
 
<style>
</style>
cs


저작자표시

'Vue' 카테고리의 다른 글

form자동으로 넘어가는거 방지 event.preventDefault()  (0) 2020.02.22
싱글 파일 컴포넌트에서 props $emit 구현하기  (0) 2020.02.22
동일한 컴포넌트로 데이터 넘기기 props $emit 사용  (0) 2020.02.18
전역 component 예제, 지역 component 예제  (0) 2020.02.16
여러개의 Vue인스턴스 사용하기  (0) 2020.02.16


아래와 같이 소스를 만들면 [로그인]을 클릭하면 화면이 리로드되면서 데이터가 사라진다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<template>
  <form v-on:submit="submitForm">
    <div>
      <label for="username">id:</label>
      <input id="username" type="text" v-model="username" />
    </div>
    <div>
      <label for="password">PW:</label>
      <input id="password" type="psassword" v-model="password"  />
    </div>
    <button type="submit">login</button>
  </form>
</template>
 
<script>
export default {
  data:function(){
    return{
       username : '',
       password : '',
    }
  },
  methods:{
    submitForm:function(){
      console.log(this.username, this.password);
      
    }
  }
};
</script>
 
<style>
</style>
cs



메서드에 매개변수를 event를 넣어주고

event.preventDefault(); 를 넣어준다.

다시 실행해하고 [login]을 클릭하면 화면이 리로드 되지 않는다.

1
2
3
4
5
6
  methods:{
    submitForm:function(event){
      event.preventDefault();
      console.log(this.username, this.password);
      
    }
cs




더 간단하게 하려면 아래의 방법으로 하면된다.

1
<form v-on:submit.prevent="submitForm">
cs




1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<template>
  <form v-on:submit.prevent="submitForm">
    <div>
      <label for="username">id:</label>
      <input id="username" type="text" v-model="username" />
    </div>
    <div>
      <label for="password">PW:</label>
      <input id="password" type="psassword" v-model="password"  />
    </div>
    <button type="submit">login</button>
  </form>
</template>
 
<script>
export default {
  data:function(){
    return{
       username : '',
       password : '',
    }
  },
  methods:{
    submitForm:function(){
      console.log(this.username, this.password);
      
    }
  }
};
</script>
 
<style>
</style>
cs


저작자표시

'Vue' 카테고리의 다른 글

로그인 axios로 넘기기예제  (0) 2020.02.22
싱글 파일 컴포넌트에서 props $emit 구현하기  (0) 2020.02.22
동일한 컴포넌트로 데이터 넘기기 props $emit 사용  (0) 2020.02.18
전역 component 예제, 지역 component 예제  (0) 2020.02.16
여러개의 Vue인스턴스 사용하기  (0) 2020.02.16


저작자표시

'Vue' 카테고리의 다른 글

로그인 axios로 넘기기예제  (0) 2020.02.22
form자동으로 넘어가는거 방지 event.preventDefault()  (0) 2020.02.22
동일한 컴포넌트로 데이터 넘기기 props $emit 사용  (0) 2020.02.18
전역 component 예제, 지역 component 예제  (0) 2020.02.16
여러개의 Vue인스턴스 사용하기  (0) 2020.02.16

동일한 컴포넌트로 데이터 넘기기 props $emit 사용

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <app-header :propsdata="num"></app-header>
        <app-content @pass="deliverNum"></app-content>
    </div>
 
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
 
    <script>
        var appHeader = {
            template : '<h1>header</h1>',
            props : ['propsdata']
        }
 
        var appContent = {
            template : '<div>content<button @click="passNum">pass</button></div>',
            methods : {
                passNum : function(){
                    this.$emit('pass', 10);
                }
            }
        }
 
        new Vue({
            el: '#app',
            components : {
                'app-header' : appHeader,
                'app-content' : appContent
            },
            data:{
                num : 0
            },
            methods:{
                deliverNum : function(value){
                    this.num = value;
                }
            }
        });
    </script>
 
</body>
</html>
cs


저작자표시

'Vue' 카테고리의 다른 글

form자동으로 넘어가는거 방지 event.preventDefault()  (0) 2020.02.22
싱글 파일 컴포넌트에서 props $emit 구현하기  (0) 2020.02.22
전역 component 예제, 지역 component 예제  (0) 2020.02.16
여러개의 Vue인스턴스 사용하기  (0) 2020.02.16
v-for 리스트렌더딩  (0) 2020.02.15


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js"></script>
    <title></title>
</head>
 
<body>
    <div id="app">
        <my-component></my-component>
    </div>
    
    <hr>    
    <hr>
    <div id="app-1">
        <my-component></my-component>
    </div>
 
    <script>
        Vue.component('my-component',{
            template: `
            <div>
            {{ name }}<br>
            <button @click="changeText">Click</button>
            </div>
            `,
            data(){
                return{
                    name : 'koko'
                }
            },
            methods: {
                changeText(){
                    this.name = 'kossie updated'
                }
 
            }
        });
 
        const app = new Vue({
            el: '#app',
        });
 
        const app1 = new Vue({
            el: '#app-1',
        });
    </script>
</body>
 
</html>
cs



컴포넌트를 다른컴포넌트에서도 사용가능하다.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js"></script>
    <title></title>
</head>
 
<body>
    <div id="app">
        <my-component></my-component>
    </div>
    
    <hr>    
    <hr>
    <div id="app-1">
        <my-component></my-component>
    </div>
 
    <script>
        Vue.component('hello-world',{
            template: '<div>hello world </div>'
        });
        
        Vue.component('my-component',{
            template: `
            <div>
            {{ name }}<br>
            <hello-world/>
            <button @click="changeText">Click</button>
            </div>
            `,
            data(){
                return{
                    name : 'koko'
                }
            },
            methods: {
                changeText(){
                    this.name = 'kossie updated'
                }
 
            }
        });
 
        const app = new Vue({
            el: '#app',
        });
 
        const app1 = new Vue({
            el: '#app-1',
        });
    </script>
</body>
 
</html>
cs




1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js"></script>
    <title></title>
</head>
 
<body>
    <div id="app">
        <my-component/>
    </div>
    
      <script>
        Vue.component('hello-world',{
            template: '<div>hello world </div>'
        });
 
        const KossieButton = {
            template: `
            <div>
            {{ name }}<br>
            <hello-world/>
            <button @click="changeText">Click</button>
            </div>
            `,
            data(){
                return{
                    name : 'koko'
                }
            },
            methods: {
                changeText(){
                    this.name = 'kossie updated'
                }
 
            }
        };
 
        const app = new Vue({
            el: '#app',
            components:{
                'my-component' : KossieButton
            }
        });
 
      
    </script>
</body>
 
</html>
cs


저작자표시

'Vue' 카테고리의 다른 글

싱글 파일 컴포넌트에서 props $emit 구현하기  (0) 2020.02.22
동일한 컴포넌트로 데이터 넘기기 props $emit 사용  (0) 2020.02.18
여러개의 Vue인스턴스 사용하기  (0) 2020.02.16
v-for 리스트렌더딩  (0) 2020.02.15
v-if, v-show 버튼클릭시 보이게 안보이게  (0) 2020.02.15
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js"></script>
    <title></title>
</head>
 
<body>
    <div id="app">
        {{ name }}
        <button @click="changeText">Click</button>
    </div>
    
    <div id="app-1">
        {{ name }}
        <button @click="changeText">Click</button>
    </div>
 
    <script>
        new Vue({
            el: '#app',
            data: {
                name : 'koko'
            },
            methods: {
                changeText(){
                    this.name = 'kossie updated'
                }
 
            }
 
        });
 
        new Vue({
            el: '#app-1',
            data: {
                name : 'koko1'
            },
            methods: {
                changeText(){
                    this.name = 'kossie1 updated'
                }
 
            }
 
        });
    </script>
</body>
 
</html>
cs


각 인스턴스에 접근을 할 수 가 없을 것이다.



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<body>
    <div id="app">
        {{ name }}
        <button @click="changeText">Click</button>
    </div>
    
    <div id="app-1">
        {{ name }}
        <button @click="changeText">Click</button>
    </div>
 
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                name : 'koko'
            },
            methods: {
                changeText(){
                    app1.name = 'kossie updated'
                }
 
            }
 
        });
 
        const app1 = new Vue({
            el: '#app-1',
            data: {
                name : 'koko1'
            },
            methods: {
                changeText(){
                    this.name = 'kossie1 updated'
                }
 
            }
 
        });
    </script>
</body>
cs


위의 클릭을 누르면 아래의 메시자가 변경된다. 


저작자표시

'Vue' 카테고리의 다른 글

동일한 컴포넌트로 데이터 넘기기 props $emit 사용  (0) 2020.02.18
전역 component 예제, 지역 component 예제  (0) 2020.02.16
v-for 리스트렌더딩  (0) 2020.02.15
v-if, v-show 버튼클릭시 보이게 안보이게  (0) 2020.02.15
스타일 바인딩  (0) 2020.02.15

+ Recent posts

티스토리툴바