vue-cli 引入jQuery,Bootstrap,popper的方法
程序员文章站
2023-12-03 18:16:40
1.安装插件
npm install jquery --save //jquery插件
npm install bootstrap --save...
1.安装插件
npm install jquery --save //jquery插件 npm install bootstrap --save //bootstrap npm install --save popper.js //popper.js
2.修改build目录下的webpack.base.conf.js配置文件:
1)加入webpack对象:var webpack=require('webpack');
2)在module.exports里面加入以下配置:
plugins: [ new webpack.optimize.commonschunkplugin('common'), new webpack.provideplugin({ $: 'jquery', jquery: 'jquery', popper: ['popper.js', 'default'] }) ]
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) } 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.optimize.commonschunkplugin('common'), new webpack.provideplugin({ $: 'jquery', jquery: 'jquery', popper: ['popper.js', 'default'] }) ] }
3.在main.js中把jquery,bootstrap的js和css通过import引进来
代码如下:
import $ from 'jquery' import 'bootstrap/dist/css/bootstrap.min.css' import 'bootstrap/dist/js/bootstrap.min'
最后重新启动一下:
npm run dev
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
下一篇: 代码实例ajax实现点击加载更多数据图片
推荐阅读
-
vue-cli 引入jQuery,Bootstrap,popper的方法
-
vue-cli脚手架引入图片的几种方法总结
-
vue-cli 引入jQuery,Bootstrap,popper的方法
-
vue-cli搭建项目引入jquery和jquery-weui的步骤教程
-
bootstrap jquery dataTable 异步ajax刷新表格数据的实现方法
-
bootstrap+jquery项目引入文件报错的解决方法
-
vue-cli webpack 引入swiper的操作方法
-
Vue CLI3.0中使用jQuery和Bootstrap的方法
-
在vue-cli项目中使用bootstrap的方法示例
-
vue-cli webpack 引入jquery的方法