Vue-cli+webpack using bootstrap in the generated project

It is convenient to add bootstrap to an HTML page, which is generally done by using the link and script tags on the CSS and JS files.

So how do I join in a front-end project built with Vue-vli? Because the frame is different, a little bit to adapt.

Scaffolding Generation Project

Execute command to generate a project named Vuestrap with the Webpack template (name any)

Vue Init webpack Vuestrap

In the various prompt options that appear, there is no requirement, in order to facilitate, the unused eslint,unit tests,e2e are turned off (these options are optional).

? Project name Vuestrap? Project Description A vue.js project? Author omitted? Vue build standalone? Install Vue-router? Yes? Use ESLint to lint your code? No  with Karma + Mocha? No  with Nightwatch? No

When the options are selected, the project is created.

Execute commands to install the components created by scaffolding

NPM Install

Install jquery

Bootstrap is dependent on jquery, so put on jquery first, the version here is 1.11.3.

Later in the configuration, it is packaged as a webpack plug-in, so it is installed directly with NPM, because the plugin-packaged components are require in.

Executes the command and saves it to the Package.json

NPM install [email protected]--save-dev

Note: If you want to see what versions of jquery are available on NPM, you can execute the command:

NPM View jquery Versions

Documents required to download and place Bootstrap

Download the bootstrap package, the version used here is 3.3.0.

Once downloaded, place the Fonts,js,css folder under the project directory/src/assets.

Configure jquery

To package jquery as a plug-in, you need to set the plug-in for Webpack plugins.

In the Build/webpack.base.conf.js file, add the plugins configuration at the end of the entire configuration object.

The configuration items in Webpack.base.conf.js are available in both the Dev and build pro versions.

The following configuration is actually the real pointer setting of the variable name, so that the call to the various names of jquery in the page will be valid, otherwise the bootstrap can not run up.

  plugins: [    new  webpack. Provideplugin ({      "jquery",            "jquery", "Windows.jquery": "jquery"    })  ]

Reference Bootstrap

At the top of the Src/main.js file, add the following references to the bootstrap main file.

Import './assets/css/bootstrap.min.css'./assets/js/bootstrap.min '

If you finish this, you'll be finished with it.

Then try to use it and write a simple page.

Verification page

Just write a page in the App.vue and put a panel,button,modal.

<template> <div id= "app" > <div class= ' container ' > <div class= ' Row ' > <div class=  ' Col-lg-4 ' > Launch Demo Modal</button> <!--Modal--<div class= "Modal fade" id= "Mymodal" tabindex= "-1" R                    ole= "Dialog" aria-labelledby= "Mymodallabel" > <div class= "modal-dialog" role= "Document" >                        <div class= "Modal-content" > <div class= "Modal-header" > <button type= "button" class= "Close" data-dismiss= "modal" aria-label= "close" ><span aria-hidden= "true" > &times;</span></button> 
                        ...                      </div> <div class= "Modal-footer" > <button type= "button" class= " BTN Btn-default "data-dismiss=" modal ">Close</button> <button type=" button "class=" Btn B                  Tn-primary ">save changes</button> </div> </div>        </div> </div> </div> </div> </div> </div> </div> </div> </div></template><script>Exportdefault{name:' App '}</script><style>#app {margin-top:60px;}</style>

After writing, execute the command and run the effect.

NPM Run Dev

Effect:

Click the button to open the modal.

Code

End

Vue-cli+webpack using bootstrap in the generated project