CodeHoon

Vue.js 에서 Bootstrap을 사용하고 싶을 때 cdn을 이용하는 방법 이외에 npm, yarn 등을 이용해서 직접설치를 한다.

그래서 나온 것이 BootstrapVue 이다.

# With npm
$ npm install vue bootstrap bootstrap-vue

# With yarn
$ yarn add vue bootstrap bootstrap-vue

이곳이 링크이다. 참고 바람

◆ Vue.js 3 에서는 아직 적용이 안되니 주의 바랍니다 ◆

부트스트랩 cdn을 사용하던 와중 해당 에러가 지속적으로 발생하였다.

이 문제는 아주 단순한 내용이다.

스크립트의 순서 때문.

이런식으로 boostrap과 jquery cdn을 삽입하였는데, 순서를 바꿔주자

그렇다면 새로고침을 해주어 콘솔창을 확인하면 에러가 사라졌음을 알 수 있다.

jQuery가 먼저오고, bootstrap이 그 다음에 와야 해당 에러가 발생하지 않는다.

이상입니다.

Vue.js 3 + bootstrap이 되지 않아 Vuetify를 설치하려고 하였다. 그러나,,,

Vue.js 3 - Vuetify 를 설치하던 와중 에러 발생.

Error: You cannot call "get" on a collection with no paths. Instead, check the "length" property first to verify at least 1 path exists.
    at Collection.get (/usr/local/lib/node_modules/@vue/cli/node_modules/jscodeshift/src/Collection.js:213:13)
    at injectOptions (/usr/local/lib/node_modules/@vue/cli/lib/util/codemods/injectOptions.js:15:6)
    at runTransformation (/usr/local/lib/node_modules/@vue/cli/node_modules/vue-codemod/dist/src/runTransformation.js:60:17)
    at /usr/local/lib/node_modules/@vue/cli/lib/Generator.js:290:23
    at Array.forEach (<anonymous>)
    at Generator.resolveFiles (/usr/local/lib/node_modules/@vue/cli/lib/Generator.js:276:24)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at async Generator.generate (/usr/local/lib/node_modules/@vue/cli/lib/Generator.js:175:5)
    at async runGenerator (/usr/local/lib/node_modules/@vue/cli/lib/invoke.js:111:3)
    at async invoke (/usr/local/lib/node_modules/@vue/cli/lib/invoke.js:92:3)

이렇게 또 에러가 발생하였다.

에러 원인 : "아직 지원을 하지 않는다?"

예. 또 지원을 안합니다. (vue3 어따가 써먹냐)

다운그레이드(down grade)를 하던가 다른 css framework를 사용하던가 해야하는데, 뭐가 남았을까용?

tailwind는 되나 실행해보러 갑니다.

 Vue.js 3, Cli - bootstrap 을 적용하던 와중 발생한 에러.

Uncaught TypeError: Cannot read properties of undefined (reading 'prototype') at eval 

해당하는 에러가 발생하였다. 

에러 발생 원인 - 아직 지원하지 않는다?

여러 문서들을 뒤적거린결과, bootstrap은 아직  Vue.js 3를 지원하지 않는다고 합니다... ㅠ

그렇기 때문에 Vue.js 3 => Vue.js 2  [downgrade] 를 해주시거나,

다른 css 프레임워크를 사용해주시면 되겠습니다... ㅠㅠ

안녕하세요 상훈입니다.

Laravel(라라벨) 의 style을 Bootstrap 의 css로 자동 지정하게 하는 방법을 포스팅하겠습니다.

* 필요사항 : Npm, Composer, Laravel

1. 프로젝트 생성
2. 프로젝트 내로 이동
3. ui설치
4. Bootstrap으로 ui를 지정
5. npm install 를 통한 최신버전 설치
6. 확인(route + view + css 적용 확인)

1. 프로젝트 생성

$ composer create-project laravel/laravel 프로젝트이름

2. 프로젝트 내로 이동

$ cd 프로젝트 이름

3. ui 설치

$ composer require laravel/ui

4. Bootstrap으로 ui를 지정

$ php artisan ui bootstrap

5. npm install

$ npm install 

6. 확인(view + css 적용 확인 + route )

- view

새로운 view 파일 한개를 생성합니다.  저는 test.blade.php 로 하겠습니다.

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

<input type="text" class="form-control">
<button class="btn btn-primary">save</button>

cdn을 따오는 것이 아닌 asset() 을 이용한 default css 경로 지정입니다.

- web.php

Route::get('/test', function () {
    return view('test');
});

7. LAST - 결과확인

$ php artisan serve
// 다른 bash
$ npm install & npm run watch

localhost:8000/test 로 접속하면,

css가 적용되어져 있는 것을 확인하실 수 있습니다.

이상입니다.

참고

안녕하세요 상훈입니다.

Simple-Book-App 강좌 완료 하였습니다. 실제 걸린 시간은 저것의 xN 하면 되고...

저는 아무것도 모르는 감자입니다!! 하하.

사용한 UI Format 은 BootStrap , 그리고 FontAwesome 입니다!

BackEnd 언어는 Laravel(PHP) 입니다.

원래는 Front Framework로 Vue.js를 넣으려고 했으나,

아직 그 단계는 아니고 Laravel에 Bootstrap, Fontawesome 정도만 얹어서 진행하게 되었습니다.

구성 내용으로는 기본적인 CRUD를 적용하였습니다.

추가, 수정, 삭제, 상세보기(를 안했네요). 상세히 볼게 이미지 말고는 없어서 딱히 할 것도 없습니다. ㅎㅎ

기존에 알고 있던 내용도 있었고, 처음 보는 내용도 있었습니다.
$message, route(' ', data), if를 이용한 기존 데이터 존재유무에 따른 UI 등등...

Bootstrap을 이용하여 NavBar를 구성하였고,

Font-Awesome을 이용하여 아이콘(icon)을 가져오기도 하였습니다. 

그런데, 이상하게도 이미지의 경로를 못잡아서 해당 내용이 제대로 뜨질 않고
alt 에 작성해놓은 내용만 표기가 되더라구요.. 왜그러는걸까.... ㅠㅠ

이부분은 조금 더 공부해봐야 할 것 같습니다. [ 화이팅..! 미래의 상훈! ]

안녕하세요 상훈입니다.

Html, Css, Javascript 로 로딩 화면을 만드는 방법에 대해 포스팅하겠습니다.

BootStrap 을 이용하여 공통 클래스를 지정하였고. 일부분은 직접 작성하였습니다.

html

<div id="loader">
    <div class="spinner-border text-info position-absolute top-50 start-50" role="status">
        <span class="visually-hidden">Loading...</span>
    </div>
</div>

Css

#loader {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    position: fixed;
    display: block;
    opacity: 0.8;
    background: rgb(156, 154, 154);
    z-index: 99;
    text-align: center;
}

#loader>div {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 100;
}

Javascript

$(window).on('load', function () {
    $('#loader').hide();
})

 - 제이쿼리를 사용할 수 있게 해야합니다.

↓↓  제이쿼리 cdn 적용하는 법 ↓↓

↓↓  BootStrap cdn 적용하는 법 ↓↓

이상입니다.

안녕하세요 상훈입니다.

프론트엔드 부트스트랩 프레임워크를 사용하고 싶을때,

cdn으로 class와 id에 대한 javascript, css를 적용하는 방법을 포스팅하겠습니다.

아래의 링크를 복사하여 head 태그 안에 넣는 방법(1)

<!-- Css -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-uWxY/CJNBR+1zjPWmfnSnVxwRheevXITnMqoEIeG1LJrdI0GlVs/9cVSyPYXdcSF" crossorigin="anonymous">

<!-- Javascript -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-kQtW33rZJAHjgefvhyyzcGF3C5TFyBQBA13V1RKPf4uH+bwyzQxZ6CmMZHmNBEfJ" crossorigin="anonymous"></script>

이곳에 들어가 해당되는 태그들을 복사하여 head 태그 안에 넣는 방법(2)

이와 같이 head 태그 내에 넣는것이다.