How to build a vue2.0+boostrap project-JS Tutorial-php.cn

How to build a vue2.0+boostrap project

php中世界最好的语言

Release： 2018-05-25 15:02:15

Original

1786 people have browsed it

This time I will show you how to build a vue2.0 boostrap project and what are the precautions for building a vue2.0 boostrap project. The following is a practical case, let’s take a look.

1. Vue CLI initialization Vue project

GlobalInstallationvue cli

npm install - -global vue-cli creates a new project based on the webpack template

vue init webpack my-project Enter the project directory for a trial run

npm run dev

Copy after login

2. WillBootStrap Join the Vue project

InstallJQuery(Because Boostrap depends on JQuery)

npm install jquery --save-dev

Copy after login

Install Boostrap

npm install bootstrap --save-dev

Copy after login

Add jquery, bootstrap.css, bootstrap.js respectively in main.js

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

Copy after login

Check

Add the following code in any template:

<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>

Copy after login

Run npm run dev, the page appears:

##ButtonPresents the bootstrap button style, proving that the Bootstrap style library is added successfully

Click the button and the following appears:

The button can correctly respond to the pop-up modal dialog box, proving that the JQuery library and Bootstrap js library were added successfully.

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!