안녕하세요. vue.js강좌 파트2-1 Bootstrap4,5 질문드립니다.

[이종욱]

현재 부트스트랩에서 설치 방법인 npm install Bootstrap을 설치했습니다.(강의에 있는 방식도 시도 해봤습니다)

라우터까지 설치를 했습니다. 그리고 추가, 수정도 했구요.  폴더를 새로 만들지 않고  vue강의 파트1에 이어서 같이 설치도 해보고, 폴더를 새로 오픈 해서도 해봤습니다. 

위 각각 서브를 실행해 보니 에러표시는 없고, 로컬호스트에서 내용은 전혀 보이지 않고 전체가 흰색 바탕만 보입니다. 

하단 터미널에서는 개발 빌드가 최적화 되지 않아서 프로덕션 빌더를 실행하려면 npm run build를 실행하라고 하는데 이 경우 어떻게 진행해야 하면 되나요? 

[이종욱]

현재 부트스트랩에서 설치 방법인 npm install Bootstrap을 설치했습니다.(강의에 있는 방식도 시도 해봤습니다)

라우터까지 설치를 했습니다. 그리고 추가, 수정도 했구요.  폴더를 새로 만들지 않고  vue강의 파트1에 이어서 같이 설치도 해보고, 폴더를 새로 오픈 해서도 해봤습니다. 

위 각각 서브를 실행해 보니 에러표시는 없고, 로컬호스트에서 내용은 전혀 보이지 않고 전체가 흰색 바탕만 보입니다. 

하단 터미널에서는

App running at:

- Local : http://localhost:8080/

- Network : unavailable

가 뜨면서

개발 빌드가 최적화 되지 않아서 프로덕션 빌더를 실행하려면 npm run build를 실행하라고 하는데 이 경우 어떻게 진행해야 하면 되나요? 제 컴퓨터에 문제가 있는 걸까요?

 

[codingapple]

bootstrap은 전부소문자입니다 설치할 때 대문자 써서 그런 것이 아닐까요 

[이종욱]

안녕하세요. 위 질문 드릴때 대문자를 사용했을 뿐, 설치할 때는 소문자로 설치가 되었었고 수회 반복중입니다. 그리고 정상적인 설치의 모습이 보였었구요.  지금 다시 설치하고 서브 돌려도 동일한 증상이 나타납니다.

[codingapple]

bootstrap 설치 전엔 npm run serve 잘 되나요? 설치하고 나면 npm run serve가 안되는 것입니까 

크롬콘솔창에는 무엇이 나오나요 

[이종욱]

안녕하세요.  

vue 파트 1에서는 정상 작동이 되었습니다.  파트2에서 블로그 프로젝트부터 정상 작동이 안되네요.

그런데 지금 파트1의  ~cli 부터 다시 설치해 보니 절차가 한가지 다르게 진행되었네요.

그래서 지금 다른 프로젝트를 정상 절차로 생성해서 설치  진행 하였는데,

강의때는  Network : 123.222.222.~ 식의 숫자가 있었던 것 같은데 지금 설치한 것도 아래와 같이  Network가 unavailable로  나오네요.  강의 파트1에서는 아래와  같았어도 보기가 정상으로 나왔는데 파트2부터 문제가 생기네요.

- Local : http://localhost:8080/

- Network : unavailable

 

크롬 콘솔에는

transition.js?3138:59 Uncaught ReferenceError: jQuery is not defined
at eval (transition.js?3138:59)
at Object../node_modules/bootstrap/js/transition.js (chunk-vendors.js:484)
at __webpack_require__ (app.js:849)
at fn (app.js:151)
at eval (npm.js?1b58:2)
at Object../node_modules/bootstrap/dist/js/npm.js (chunk-vendors.js:352)
at __webpack_require__ (app.js:849)
at fn (app.js:151)
at eval (main.js:12)
at Module../src/main.js (app.js:1307)

이렇게 나옵니다.

[codingapple]

package.json 파일은 어떻게 되어있습니까

[이종욱]

{
  "name": "josun",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "bootstrap": "^3.4.1",
    "core-js": "^3.6.5",
    "vue": "^3.0.0",
    "vue-router": "^4.0.12"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/compiler-sfc": "^3.0.0",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^7.0.0"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/vue3-essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "babel-eslint"
    },
    "rules": {}
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}

이렇게 되어 있습니다. 

[codingapple]

bootstrap 옛날 3버전이 설치되어있군요

npm remove 로 bootstrap 지우거나 아니면 프로젝트 다시 만든 다음에

npm install bootstrap@5로 설치합시다

[이종욱]

네 감사합니다. 다시 해보겠습니다.

[글쓴이]

글