Vue项目中如何使用Bootstrap

本篇内容主要讲解“Vue项目中如何使用Bootstrap”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“Vue项目中如何使用Bootstrap”吧!

一、安装jQuery

Bootstrap需要依赖jQuery，所以引用Bootstrap之前要先引用jQuery，使用下面的命令引用jQuery：

npm install jquery --save

注意：如果想查看npm上jquery有哪些版本，可以执行命令：

npm view jquery versions

二、引入Bootstrap

1、使用命令安装

可以使用下面的命令安装：

npm install bootstrap --save

2、下载Bootstrap文件

直接去Bootstrap下载bootstrap包，把下载好的文件放到src/assets目录下面：

三、配置使用jQuery

1、添加webpack

 在build/webpack.base.conf.js文件的顶部添加下面的代码：

const webpack=require("webpack")

2、修改webpack.base.conf.js

在build/webpack.base.conf.js文件中，在整个配置对象的末尾增加plugins配置：

// 配置全局使用 jquery plugins: [     new webpack.ProvidePlugin({     $: "jquery",     jQuery: "jquery",     jquery: "jquery",     "window.jQuery": "jquery" })]

build/webpack.base.conf.js完整代码如下：

'use strict' const path = require('path') const utils = require('./utils') const config = require('../config') const vueLoaderConfig = require('./vue-loader.conf') const webpack=require("webpack") function resolve (dir) {   return path.join(__dirname, '..', dir) } // const createLintingRule = () => ({ //   test: /\.(js|vue)$/, //   loader: 'eslint-loader', //   enforce: 'pre', //   include: [resolve('src'), resolve('test')], //   options: { //     formatter: require('eslint-friendly-formatter'), //     emitWarning: !config.dev.showEslintErrorsInOverlay //   } // }) module.exports = {   context: path.resolve(__dirname, '../'),   entry: {     app: './src/main.js'   },   output: {     path: config.build.assetsRoot,     filename: '[name].js',     publicPath: process.env.NODE_ENV === 'production'       ? config.build.assetsPublicPath       : config.dev.assetsPublicPath   },   resolve: {     extensions: ['.js', '.vue', '.json'],     alias: {       'vue$': 'vue/dist/vue.esm.js',       '@': resolve('src')     }   },   module: {     rules: [       // 关闭eslint编码规范验证       // ...(config.dev.useEslint ? [createLintingRule()] : []),       {         test: /\.vue$/,         loader: 'vue-loader',         options: vueLoaderConfig       },       {         test: /\.js$/,         loader: 'babel-loader',         include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]       },       {         test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,         loader: 'url-loader',         options: {           limit: 10000,           name: utils.assetsPath('img/[name].[hash:7].[ext]')         }       },       {         test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,         loader: 'url-loader',         options: {           limit: 10000,           name: utils.assetsPath('media/[name].[hash:7].[ext]')         }       },       {         test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,         loader: 'url-loader',         options: {           limit: 10000,           name: utils.assetsPath('fonts/[name].[hash:7].[ext]')         }       }     ]   },   node: {     // prevent webpack from injecting useless setImmediate polyfill because Vue     // source contains it (although only uses it if it's native).     setImmediate: false,     // prevent webpack from injecting mocks to Node native modules     // that does not make sense for the client     dgram: 'empty',     fs: 'empty',     net: 'empty',     tls: 'empty',     child_process: 'empty'   },   // 配置全局使用 jquery   plugins: [     new webpack.ProvidePlugin({     $: "jquery",     jQuery: "jquery",     jquery: "jquery",     "window.jQuery": "jquery"   })] }

四、在main.js中引用

// 引入jQuery import $ from 'jquery' // 引用bootstrap import './assets/bootstrap-3.3.7-dist/css/bootstrap.css' import './assets/bootstrap-3.3.7-dist/js/bootstrap.js'

五、测试

<template>   <div>       <p class="col-md-6">          <button class="btn btn-primary">测试按钮</button>       </p>   </div> </template> <script> export default {   name:"test", } </script>

运行效果：

到此，相信大家对“Vue项目中如何使用Bootstrap”有了更深的了解，不妨来实际操作一番吧！这里是亿速云网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！