vue-cli jquery bootstrap 설치

[원본] https://medium.com/@johnyu42/vue-cli-%E6%95%B4-jquery-bootstrap-1943af43f044

설치된 버전 확인하기

(.venv) root@da0fa5dd7aae:~/vue-drf-bootstrap-auth/frontend# npm view jquery version

3.3.1

설치할 수 있는 버전 확인하기

(.venv) root@da0fa5dd7aae:~/vue-drf-bootstrap-auth/frontend# npm view jquery versions

[ '1.5.1',

  '1.6.2',

  '1.6.3',

  '1.7.2',

  '1.7.3',

  '1.8.2',

  '1.8.3',

  '1.9.1',

  '1.11.0-beta3',

  '1.11.0-rc1',

  '1.11.0',

  '1.11.1-beta1',

  '1.11.1-rc1',

  '1.11.1-rc2',

  '1.11.1',

  '1.11.2',

  '1.11.3',

  '1.12.0',

  '1.12.1',

  '1.12.2',

  '1.12.3',

  '1.12.4',

  '2.1.0-beta2',

  '2.1.0-beta3',

  '2.1.0-rc1',

  '2.1.0',

  '2.1.1-beta1',

  '2.1.1-rc1',

  '2.1.1-rc2',

  '2.1.1',

  '2.1.2',

  '2.1.3',

  '2.1.4',

  '2.2.0',

  '2.2.1',

  '2.2.2',

  '2.2.3',

  '2.2.4',

  '3.0.0-alpha1',

  '3.0.0-beta1',

  '3.0.0-rc1',

  '3.0.0',

  '3.1.0',

  '3.1.1',

  '3.2.0',

  '3.2.1',

  '3.3.0',

  '3.3.1' ]

   ╭───────────────────────────────────────────────────────────────╮

   │                                                                │

   │       New minor version of npm available! 6.4.1 → 6.5.0        │

   │   Changelog: https://github.com/npm/cli/releases/tag/v6.5.0    │

   │               Run npm install -g npm to update!                │

   │                                                                │

   ╰───────────────────────────────────────────────────────────────╯

(.venv) root@da0fa5dd7aae:~/vue-drf-bootstrap-auth/frontend#

(.venv) root@da0fa5dd7aae:~/vue-drf-bootstrap-auth/frontend# npm view bootstrap version

4.2.1

(.venv) root@da0fa5dd7aae:~/vue-drf-bootstrap-auth/frontend# npm view bootstrap versions

[ '0.0.1',

  '0.0.2',

  '3.1.1',

  '3.2.0',

  '3.3.0',

  '3.3.1',

  '3.3.2',

  '3.3.4',

  '3.3.5',

  '3.3.6',

  '3.3.7',

  '3.4.0',

  '4.0.0-alpha.2',

  '4.0.0-alpha.3',

  '4.0.0-alpha.4',

  '4.0.0-alpha.5',

  '4.0.0-alpha.6',

  '4.0.0-beta',

  '4.0.0-beta.2',

  '4.0.0-beta.3',

  '4.0.0',

  '4.1.0',

  '4.1.1',

  '4.1.2',

  '4.1.3',

  '4.2.1' ]

npm version upgrade하기

(.venv) root@da0fa5dd7aae:~/vue-drf-bootstrap-auth/frontend# npm -v

6.4.1

(.venv) root@da0fa5dd7aae:~/vue-drf-bootstrap-auth/frontend# npm install -g npm

/usr/bin/npm -> /usr/lib/node_modules/npm/bin/npm-cli.js

/usr/bin/npx -> /usr/lib/node_modules/npm/bin/npx-cli.js

+ npm@6.5.0

added 2 packages from 1 contributor and updated 14 packages in 22.054s

(.venv) root@da0fa5dd7aae:~/vue-drf-bootstrap-auth/frontend# npm -v

6.5.0

$ npm install -g vue-cli

$ vue -V

(.venv) root@da0fa5dd7aae:~/vue-drf-bootstrap-auth/frontend# vue -V

2.9.6

$ vue list

(.venv) root@da0fa5dd7aae:~/vue-drf-bootstrap-auth/frontend# vue list

  Available official templates:

  ★  browserify - A full-featured Browserify + vueify setup with hot-reload, linting & unit testing.

  ★  browserify-simple - A simple Browserify + vueify setup for quick prototyping.

  ★  pwa - PWA template for vue-cli based on the webpack template

  ★  simple - The simplest possible Vue setup in a single HTML file

  ★  webpack - A full-featured Webpack + vue-loader setup with hot reload, linting, testing & css extraction.

  ★  webpack-simple - A simple Webpack + vue-loader setup for quick prototyping.

$ vue init webpack test

$ cd test

$ npm install

$ npm install jquery --save

$ npm install popper.js --save

$ npm view jquery version

$ npm view jquery versions

build/webpack.base.conf.js

상단에 입력

const webpack = require('webpack')

plugins 블럭 추가

module.exports = {

...

plugins: [

new webpack.ProvidePlugin({

'$': "jquery",

'jQuery': "jquery",

'Popper': 'popper.js'

})

]

}

src/App.vue의 <script>블럭에 추가

$(function () {

alert('test')

})

test$ npm run dev

http://localhost:8080으로 alert이 보이는지 확인

bootstrap 4 설치

test$ npm install bootstrap --save

src/main.js에 다음 설정 추가

상단에 추가

import 'bootstrap'

import 'bootstrap/dist/css/bootstrap.css'

src/App.vue의 <template>의 <div id="app">섹션에 추가

<template>

<div id="app">

<p class="container">

<p class="row">

<p class="col-md-6">

<button class="btn btn-primary">test</button>

</p>

</p>

</p>

</div>

</template>

$ npm run dev

http://localhost:8080/을 열고, 파란색 버튼이 보이는지 확인.