Home > Article > Web Front-end > 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!