exact 속성을 넣어주면 "/" 라우터에 색상제거 할 수 있음 

1
2
3
4
5
                           <ul>
                             <li class="text-sm pb-4"> <router-link active-class="font-bold text-blue-500" to="/" exact>LOGO</router-link></li>
                             <li class="text-sm pb-4"> <router-link active-class="font-bold text-blue-500" to="/logo-symbol">LOGO SYMBOL</router-link></li>
                             <li class="text-sm pb-4"> <router-link active-class="font-bold text-blue-500" to="/colors">COLORS</router-link></li>
                         </ul>
cs


하지만 더 간단하게 할 수 있다.


resources/js/routes.js


아래의 소스를 삽입하자

1
linkActiveClass: 'font-bold text-blue-500',
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
import Logo from './components/Logo';
 
import LogoSymbol from './components/LogoSymbol';
 
import Colors from './components/Colors';
 
export default{
 
    mode : 'history',
 
    linkActiveClass: 'font-bold text-blue-500',
 
    routes:[
        {
            path: '/',
 
            component: Logo
        },
 
        {
            path: '/logo-symbol',
 
            component: LogoSymbol
        },
 
        {
            path: '/colors',
 
            component: Colors
        },
    ]
 
};
 
cs


결과는 위와 같다. 코드가 더 간결해진다.

저작자표시 (새창열림)

'tailwindcss' 카테고리의 다른 글

purgecss 사용방법( 사용하지 않는 css 제거 라이브러리 )  (0) 2019.08.20
커스터마이징  (0) 2019.08.20
tailwind css syntax  (0) 2019.08.18
tailwind css 사용방법  (0) 2019.08.18

1. 테일윈드(CSS프레임워크) 설치하기

1
npm install tailwindcss
cs


2. 테일윈드 구성파일설치

1
npx tailwind init
cs


프로젝트 디렉토리에 tailwind.config.js 파일이 생성되었다.


3.  resources/css/tailwindcss.css 파일을 만들어서 다음과 같은 소스를 작성한다. https://tailwindcss.com/docs/installation/

1
2
3
4
5
@tailwind base;
 
@tailwind components;
 
@tailwind utilities;
cs




4. webpack.mix.js 에 laravel mix를 작성해준다. css경로는 좀전에 만들어준 resources/css/tailwindcss.css 를 입력해준다.


1
2
3
4
5
6
7
8
9
mix.js('resources/js/app.js', 'public/js')
 
    .sass('resources/sass/app.scss', 'public/css')
 
    .postCss('resources/css/tailwindcss.css', 'public/css', [
 
      require('tailwindcss'),
 
]);
cs


5. 터미널에서 npm run dev 를 입력하면 컴파일을 해준다. 컴파일된 파일은 public/css/tailwindcss.css 에 빌드된다.


6. css적용과 예제를 입력해보자 view/welcome.blade.php     {{ mix('css/tailwindcss.css') }}

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html>
<head>
    <title>tailwindcss</title>
    <link rel="stylesheet" type="text/css" href="{{ mix('css/tailwindcss.css') }}">
</head>
<body>
<div class="text-4xl font-bold text-center text-blue-500">Hello world!</div>
</body>
</html>
 
cs


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


8. 파일명 수정

welcome.blade.php -> app.blade.php 파일명 수정

routes/web.php -> welcome -> app 로 수정

public/css/app.css 로 수정



9. app.blade.php 파일 수정

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
60
61
62
63
<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
          <link rel="stylesheet" type="text/css" href="/css/tailwindcss.css">
        <title>Laravel</title>
 
 
    </head>
    <body>
    <!-- <div class="text-4xl font-bold text-center text-blue-500">Hello world!</div> -->
 
       <div id="app">
 
            <div class="container mx-auto">
 
                <header class="py-6 mb-8">
 
                    <h1 class="text-4xl">Laracasts</h1>
                </header>
 
                <main class="flex">
                    
                    <aside class="w-1/5">
 
                        <section class="mb-8">
 
                            <h5 class="text-1xl uppercase font-bold mb-4">The Brand</h5>
 
                           <ul>
                             <li class="text-sm pb-4"> <router-link to="/">Home</router-link></li>
                             <li class="text-sm pb-4"> <router-link to="/about">About</router-link></li>
                         </ul>
                            
                        </section>
 
                        <h5 class="text-1xl uppercase font-bold mb-4">Doodles</h5>
 
                        <ul>
                           <li class="text-sm pb-4"> <router-link to="/">Home</router-link></li>
                           <li class="text-sm pb-4"> <router-link to="/about">About</router-link></li>
                       </ul>
 
                       
                       
                    </aside>
 
                    <div class="primary">
                        <router-view></router-view>
                    </div>
 
                </main>
     
           </div>
            
        </div>
 
       <script src="/js/app.js"></script>
 
    </body>
</html>
 
cs



저작자표시 (새창열림)

'라라벨 > Vue(laravle)' 카테고리의 다른 글

404페이지 설정하기  (0) 2020.01.13
01)라라벨에 뷰 라우터 설치하기  (0) 2020.01.13
laravel+vue+tailwindcss  (0) 2019.08.24
laravel vue axjos  (0) 2019.08.05
라라벨 뷰 적용하기  (0) 2019.08.03

vetur : Vue.js 코드에 대한 문법 강조, 코드 자동완성, 디버깅, 린팅 기능들을 제공한다.


저작자표시 (새창열림)

'VSCODE' 카테고리의 다른 글

파일명으로 이동 찾기 command + P  (0) 2021.12.19
맥에서 Visual Studio Code의 PATH를 설정하는 방법  (0) 2021.12.19
vscode laravel blade 파일 코드 정렬  (0) 2020.02.01

Vue 라우터는 Vue.js의 공식 라우터입니다.

Vue.js를 사용한 싱글 페이지 앱을 쉽게 만들 수 있도록 Vue.js의 코어와 긴밀히 통합되어 있습니다.


1. 라라벨 설치하기

composer create-project laravel/laravel assets --prefer-dist 5.8


2. cd assets

npm install 설치하기 node js가 설치 되어 있어야함




3. vue-Router설치

1
npm install vue-router
cs



4. resources/js/app.js   소스작성

1
모듈 시스템에서 사용하면 Vue.use()를 통해 명시적으로 라우터를 추가해야합니다.
cs


1
2
3
4
5
6
7
8
9
10
11
12
13
14
import Vue from 'vue';
 
import VueRouter from 'vue-router';
 
import routes from './routes';
 
Vue.use(VueRouter);
 
let app = new Vue({
    el: '#app',
 
    router: new VueRouter(routes)
});
 
cs


5. resources/js/routes.js 파일생성 소스작성


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
export default{
 
    mode : 'history',
 
    routes:[
        {
            path: '/',
 
            component: Home
        },
 
        {
            path: '/about',
 
            component: About
        },
    ]
 
};
 
cs


6. components/Home.vue 생성하기


7. components/About.vue 생성하기


8. routes.js 에 컴포넌트 임포트하기

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
import Home from './components/Home';
 
import About from './components/About';
 
export default{
 
    mode : 'history',
 
    routes:[
        {
            path: '/',
 
            component: Home
        },
 
        {
            path: '/about',
 
            component: About
        },
    ]
 
};
 
cs


9. views/welcome.blade.php 소스작성

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!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>
 
 
    </head>
    <body>
 
       <div id="app">
 
        <router-view></router-view>
 
       </div>
 
       <script src="/js/app.js"></script>
 
    </body>
</html>
cs


10. npm run watch 



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


12. assets.test/about 를 입력해보자

404에러가 나온다.

그이유는 라라벨 라우트 설정을 안해줘서 그렇다.



13. routes/web.php 파일을 수정한다.

1
2
3
4
5
6
<?php
 
Route::get('/{any?}', function () {
    return view('welcome');
});
 
cs


14. assets.test/about 를 입력해보자 정상적으로 출력이 된다.


15. welcome.blade.php 파일을 다시 수정하자


아래의 링크소스를 추가해보자

1
2
3
        <router-link to="/">Home</router-link>
 
        <router-link to="/about">About</router-link>
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
<!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>
 
 
    </head>
    <body>
 
       <div id="app">
 
        <router-view></router-view>
 
        <hr>
 
        <router-link to="/">Home</router-link>
 
        <router-link to="/about">About</router-link>
 
       </div>
 
       <script src="/js/app.js"></script>
 
    </body>
</html>
 
cs


16. 다시 브라우저를 새로고침하면 정상적으로 링크가 설정되었다.


저작자표시 (새창열림)

'라라벨 > Vue(laravle)' 카테고리의 다른 글

404페이지 설정하기  (0) 2020.01.13
02) 레이아웃 tailwindcss  (0) 2020.01.13
laravel+vue+tailwindcss  (0) 2019.08.24
laravel vue axjos  (0) 2019.08.05
라라벨 뷰 적용하기  (0) 2019.08.03

config/nova.php


default = sample

1
'pagination' => 'links',
cs



저작자표시 (새창열림)

'라라벨 > NOVA' 카테고리의 다른 글

nova path변경하기  (0) 2020.01.12
nova 현재 리소스에 다른 리소스 컬럼명 삽입하기  (0) 2020.01.12
nova belongsto select fields other table name setting(관계 설정시 컬럼값 변경)  (0) 2020.01.12
nova 좌측메뉴 순서바꾸기  (0) 2020.01.11
nova 글 작성 유저 삽입하기  (0) 2020.01.10


nova path 변경하기


config/nova.php  변경


1
 'path' => '/nova',
cs


저작자표시 (새창열림)

'라라벨 > NOVA' 카테고리의 다른 글

nova pagination 변경하기  (0) 2020.01.12
nova 현재 리소스에 다른 리소스 컬럼명 삽입하기  (0) 2020.01.12
nova belongsto select fields other table name setting(관계 설정시 컬럼값 변경)  (0) 2020.01.12
nova 좌측메뉴 순서바꾸기  (0) 2020.01.11
nova 글 작성 유저 삽입하기  (0) 2020.01.10


다른 리소스의 컬럼을 넣어야 할 경우가 생긴다.


모델의 관계설정을 해준다.

Boardname.php

Product.php


Boardname.php

1
2
3
4
    public function products()
    {
        return $this->belongsTo(Product::class);
    }
cs


Product.php

return $this->belongsTo(Boardname::class, 'products 삽입할 컬럼명', 'boardnames 삽입할 컬럼명');

1
2
3
4
5
    public function boardnames()
    {
 
        return $this->belongsTo(Boardname::class, 'board_name', 'name');
    }
cs


Nova\Product.php fields설정 ('표시할이름','관계이름',노바리스소)

1
BelongsTo::make('보드명','Boardnames', \App\Nova\Boardname::class),
cs


저작자표시 (새창열림)

'라라벨 > NOVA' 카테고리의 다른 글

nova pagination 변경하기  (0) 2020.01.12
nova path변경하기  (0) 2020.01.12
nova belongsto select fields other table name setting(관계 설정시 컬럼값 변경)  (0) 2020.01.12
nova 좌측메뉴 순서바꾸기  (0) 2020.01.11
nova 글 작성 유저 삽입하기  (0) 2020.01.10



Nova/Product.php

1
BelongsTo::make('보드명','Boardnames', \App\Nova\Boardname::class),
cs


관계 설정후 해당 resource 에서 $title = 'id' 값으로 기본 설정되어 있다. 변경 하고 싶으면 해당 컬럼명으로 변경시켜야한다.



Nova/Boardname.php

1
public static $title = 'name';
cs


1
2
3
    public static $search = [
        'name'
    ];
cs


보드명으로 변경이 되었다.



저작자표시 (새창열림)

'라라벨 > NOVA' 카테고리의 다른 글

nova path변경하기  (0) 2020.01.12
nova 현재 리소스에 다른 리소스 컬럼명 삽입하기  (0) 2020.01.12
nova 좌측메뉴 순서바꾸기  (0) 2020.01.11
nova 글 작성 유저 삽입하기  (0) 2020.01.10
(package) user permission tool(ACL)  (0) 2020.01.07

+ Recent posts

티스토리툴바