vue-cli3项目中引入jquery 以及如何引进bootstrap

1、安装jquery

npm install jquery --save

2、或则在package.json中指定版本号,然后运行npm install命令

复制代码
"dependencies": {
    "axios": "^0.18.0",
    "core-js": "^2.6.5",
    "jquery": "^3.4.1",
    "vue": "^2.6.10",
    "vue-awesome-swiper": "^3.1.3",
    "vue-router": "^3.0.3",
    "vuex": "^3.0.1"
  },
复制代码

3、在vue.config.js里面配置

复制代码
const webpack = require('webpack');
const path = require('path');
// vue.config.js
module.exports = {
  // 选项...
  devServer: {
    port: 8089,
    // proxy:{
    //   '/': {
    //     target: 'http://192.168.0.125:3000/',
    //     changeOrigin: true,
    //     pathRewrite: {}
    //   },
    // }
  },
  configureWebpack: {//引入jquery
    plugins: [
      new webpack.ProvidePlugin({
        $:"jquery",
        jQuery:"jquery",
        "windows.jQuery":"jquery"
      })
    ]
  },

}
复制代码

然后在页面里就可以愉快的使用jquery了

 如何引入bootstrap 

 npm install --save-dev bootstrap

在main.js中引入

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

然后运行,结果按照提示让执行这样的命令

npm install --save popper.js

然后,再运行  就能成功使用bootstrap了

 

posted @   古墩古墩  Views(4614)  Comments(0Edit  收藏  举报
编辑推荐:
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列:如何用 C#调用 C方法造成内存泄露
阅读排行:
· 无需6万激活码!GitHub神秘组织3小时极速复刻Manus,手把手教你使用OpenManus搭建本
· Manus爆火,是硬核还是营销?
· 终于写完轮子一部分:tcp代理 了,记录一下
· 别再用vector<bool>了!Google高级工程师:这可能是STL最大的设计失误
· 单元测试从入门到精通
点击右上角即可分享
微信分享提示