A brief discussion on using npm to install bootstrap and jquery in Vue projects

This article will introduce to you how to use npm to install bootstrap and jquery in a Vue project. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to everyone.

[Related recommendations: "vue.js Tutorial"]

Use npm to install bootstrap and jquery

After many inquiries and experiments, I summarized the use of bootstrap framework in vue projects. Pay attention to npm installation.

The js plug-in in bootstrap depends on jquery, so in jquery must be installed before this.

jquery installation

1. Add a line of code in package.json: "jquery": "^2.2.3"

"dependencies": {
   "element-ui": "^2.0.5",
   "vue": "^2.5.2",
   "vue-router": "^3.0.1",
   "jquery": "^2.2.3"
 }

2. Add a line of data to the build file webpack.base.conf.js:

//注：...代表省略自有的，
//必定事先声明webpack，不然下面会不识别webpack
const webpack = require('webpack')
...
module.exports = {
    resolve: {
        ...
        alias: {
          ...
          'jquery': 'jquery' 
        }
    },
    plugins: [
        new webpack.ProvidePlugin({
          $: "jquery",
          jQuery: "jquery",
          "windows.jQuery": "jquery"
        })
    ],
    ...
}

3. Add to main.js: import $ from 'jquery'

4. Use npm install jquery@ 2.2.3 –save-dev

In this way, jquery is installed.

bootstrap installation:

1. Use npm install bootstrap@3.3.0 –save-dev

2. Introduce

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

to the required page and finally npm run dev to start the project, and it will be ok.

For more programming related knowledge, please visit: Programming Video! !

The above is the detailed content of A brief discussion on using npm to install bootstrap and jquery in Vue projects. For more information, please follow other related articles on the PHP Chinese website!