이 경우 vue2.0+boostrap을 사용하십시오.-JS 튜토리얼-php.cn

이 경우 vue2.0+boostrap을 사용하십시오.

php中世界最好的语言

풀어 주다： 2018-06-09 11:04:57

원래의

1996명이 탐색했습니다.

이번에는 vue2.0+boostrap 케이스의 사용법과 vue2.0+boostrap 사용 시 주의사항은 무엇인지 소개해드리겠습니다.

1. Vue CLI가 Vue 프로젝트를 초기화합니다.

vue cli를 전역적으로 설치합니다.

npm install --global vue-cli webpack 템플릿을 기반으로 새 프로젝트를 생성합니다.

vue init webpack my-project 프로젝트 입력

npm run dev

로그인 후 복사

2. Vue 프로젝트에 BootStrap 추가

JQuery 설치(Boosttrap은 JQuery에 의존하므로)

npm install jquery --save-dev

로그인 후 복사

Boostrap 설치

npm install bootstrap --save-dev

로그인 후 복사

main.js에 jquery, bootstrap.css 추가 , bootstrap.js

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

로그인 후 복사

Verification

템플릿에 다음 코드를 추가하세요.

<p>
  <button class="btn btn-primary" data-toggle="modal" data-target="#mymodal-data" type="button">点击我</button>
  <p class="modal fade" id="mymodal-data" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
    <p class="modal-dialog">
      <p class="modal-content">
        <p class="modal-header">
          <h4 class="modal-title">模态弹出窗标题</h4>
          <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
        </p>
        <p class="modal-body">
          <p>模态弹出窗主体内容</p>
        </p>
        <p class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
          <button type="button" class="btn btn-primary">保存</button>
        </p>
      </p>
    </p>
  </p>
</p>

로그인 후 복사

npm run dev를 실행하면 페이지가 나타납니다.