Home >Web Front-end >JS Tutorial >How vue-cli introduces the bootstrap tool

How vue-cli introduces the bootstrap tool

韦小宝
韦小宝Original
2018-01-11 10:12:442109browse

This article mainly introduces how vue-cli introduces the bootstrap tool. The editor thinks it is quite good. Now I will share the js with you and give it as a reference. If you are interested in js, please follow the editor to take a look.

This article introduces how vue-cli introduces the bootstrap tool. Share it with everyone and leave a note for yourself.

The following operations are based on the normal installation of the node environment.

1. Introduce jq:

In the npm console, enter the project directory, and then enter the command npm install jquery --save-dev (it is better to replace npm with cnpm , using cnpm to download faster in domestic environment).

2. Modify webpack.base.conf.jsConfiguration file in the build directory:

1) Add webpackobject: var webpack=require('webpack');

2) Add the following configuration to module.exports:

plugins: [ 

     new webpack.ProvidePlugin({ 

       $:"jquery", 

       jQuery:"jquery", 

       "windows.jQuery":"jquery" 

     }) 

  ]


3) Add in entry filemain.js: import jquery from 'jquery'

3.Introduce bootstrap:

1) Modify the webpack.base.conf.js file:

alias: { 

     'vue$': 'vue/dist/vue.esm.js', 

     '@': resolve('src'), 

     'assets': path.resolve(dirname, '../src/assets'), 

     'jquery': "jquery/src/jquery" 

   }

2) Add:

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

to the entry file main.js 3) Copy various bootstrap files in the assets file directory:

                         

The above is the entire content of this article. I hope it will be helpful to everyone's study, and I also hope that everyone will support the PHP Chinese website.

Related recommendations:

Detailed explanation of JS function throttling and anti-shake examples

How to implement modularization in JS

JS simple implementation of sliding loading data instance sharing

The above is the detailed content of How vue-cli introduces the bootstrap tool. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn