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

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

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了

以上是 vue-cli3项目中引入jquery 以及如何引进bootstrap 的全部内容， 来源链接： utcz.com/z/378019.html

回到顶部