Vue.js 프로젝트 초기 세팅 (with bootstrap & jquery) (프론트엔드)

페이지 정보

참빛바다 작성일18-03-08 13:12 Read 1,160

본문

출처

http://jinblog.kr/192

https://kr.vuejs.org/v2/guide/installation.html 

https://lovemewithoutall.github.io/it/install-bootstrap-for-vue/

https://www.npmjs.com/package/webpack

https://eslint.org/docs/user-guide/getting-started

 

 

1. NPM 설치

 

2. 커맨드라인 입력

npm install vue

npm install --global vue-cli 

vue init webpack-simple 프로젝트명

cd 프로젝트명 (프로젝트 폴더로 이동) 

npm install 

npm install --save jquery bootstrap popper.js

npm install --save-dev webpack 

npm install -g eslint 

 

3. 파일 수정

webpack.base.conf.js 

 

const webpack = require('webpack')

 

module.exports = {

  ...

  plugins: [

    new webpack.ProvidePlugin({

      $: 'jquery',

      jquery: 'jquery',

      'window.jQuery': 'jquery',

      jQuery: 'jquery'

    })

  ]

  ...

}

 

.enlintrs.js 

 

module.exports = {

  ...

  globals: {

    "$": true,

    "jQuery": true

  }

}

 

src/main.js 

 

import 'bootstrap'

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

 

app.js 

 

import $ from 'jquery';

window.jQuery = $;

window.$ = $;

 

3. 실행 확인

npm run dev 

localhost:8080 접속

 

4. 배포용 빌드

npm run build 

dist 폴더에 저장됨

댓글목록

공부 메모 목록 

Page 1
# Title Date Read
71 프론트엔드 Node.js 기본 폴더 위치 변경 03-09 664
70 프론트엔드 Vue.js minifier 사용 안하고 빌드하기 03-08 724
R 프론트엔드 Vue.js 프로젝트 초기 세팅 (with bootstrap & jquery) 03-08 1161
68 프론트엔드 Airbnb의 ES6 자바스크립트 스타일 가이드 02-08 731
67 프론트엔드 웹폰트 Font Mfizz 링크 02-03 708
66 프론트엔드 Sass VS Scss 02-02 694
65 프론트엔드 Sass (scss) VS code 세팅 02-02 868
64 프론트엔드 Sass 컴파일 02-02 702
63 프론트엔드 vscode vue.js, Sass 세팅 02-02 1169
62 프론트엔드 Sass 기초 02-02 736
61 프론트엔드 웹 개발자 로드맵 - 프론트엔드 02-02 760
60 프론트엔드 CSS 텍스트 줄바꿈 처리 01-31 751
59 프론트엔드 그누보드5 모바일 사용 안함 01-30 1046
58 프론트엔드 제이쿼리 페이지 로딩시 실행 01-27 702
57 프론트엔드 변수와 상수 선언 01-27 708
danhk0612@gmail.com