How to build a vue2.0+boostrap project

This time I will show you how to build a vue2.0 boostrap project and what are theprecautionsfor 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

2. WillBootStrapJoin the Vue project

InstallJQuery(Because Boostrap depends on JQuery)

npm install jquery --save-dev

Install Boostrap

npm install bootstrap --save-dev

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'

Check

Add the following code in any template:

 点击我 
 
 
 
 
模态弹出窗标题
 ×Close 
 
 
模态弹出窗主体内容
 
 
 关闭 保存 
 
 
 
 

Run npm run dev, the page appears:

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

Elegant use of CSS Modules in Vue

How to write a custom component with vue

The above is the detailed content of How to build a vue2.0+boostrap project. For more information, please follow other related articles on the PHP Chinese website!