Vue-cli引入jQuery和bootstrap

最新推荐文章于 2023-05-22 16:17:57 发布

veraLX

最新推荐文章于 2023-05-22 16:17:57 发布

阅读量922

点赞数

分类专栏：软件安装及环境配置文章标签： vue bootstrap jQuery

本文链接：https://blog.csdn.net/qq_35411675/article/details/80002412

版权

软件安装及环境配置专栏收录该内容

2 篇文章

订阅专栏

本文介绍了在Vue-cli项目中如何引入jQuery和Bootstrap的两种方法。首先，通过npm安装jQuery和Bootstrap，然后在webpack配置文件中进行相应的设置，包括修改webpack.base.conf.js，添加别名。在main.js中引入jQuery和Bootstrap的JS及CSS文件。但第二种方法在使用Bootstrap的图标时可能出现问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先项目是vue-cli搭建的

第一种方法：

一、引入jQuery

1、cnpm install jquery --save-dev ，先安装jquery

2、打开bulid目录下的webpack.base.conf.js

// 在开头引入webpack，后面的plugins那里需要
var webpack = require('webpack')

在文件最后加上

plugins: [
    new webpack.ProvidePlugin({
        $: "jquery",
        jQuery: "jquery"
    })
 ]

加完之后是这个状态

'use strict'
const path = require('path')
const utils = require('./utils')
const config = require('../config')
const vueLoaderConfig = require('./vue-loader.conf')

var webpack = require('webpack')

function resolve (dir) {
  return path.join(__dirname, '..', dir)
}



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: [
      {
        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'
  },
  plugins: [
    new webpack.ProvidePlugin({
        $: "jquery",
        jQuery: "jquery"
    })
 ]
}

3、之后在main.js中引入

import jQuery from 'jquery'

二、引入Bootstrap

1、使用命令npm install bootstrap --save-dev

2、在main.js中加入

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

（尚未清楚这种方法为什么使用不了icon）

第二种方法：

1、打开bulid目录下的webpack.base.conf.js

在alias处添加两行：

'assets': path.resolve(__dirname, '../src/assets'), 
      'jquery': "jquery/src/jquery"

添加后的位置：

resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
      'assets': path.resolve(__dirname, '../src/assets'), 
      'jquery': "jquery/src/jquery"
    }
  },

2、在main.js中加入（注意路径要引用对，这里我把bootstrap的css、js、fonts都放在了src的assets文件夹下）

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

这种方法的icon是可以使用的