vue-cli 引入jQuery,Bootstrap,popper的方法
作者:ln0909 发布时间:2024-05-21 10:17:21
标签:vue-cli,jQuery,Bootstrap,popper
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
来源:https://segmentfault.com/a/1190000016232294
0
投稿
猜你喜欢
- 本文实例讲述了JavaScript常用的返回,自动跳转,刷新,关闭语句。分享给大家供大家参考。具体如下:1. Javascript 返回上一
- 背景由于阿里云oss,cdn消耗钱的速度比较快,在不知道的情况下,服务就被停了,影响比较大。所以想做个监控。百度一下阿里云账户余额 api
- Get方法在超链接后边紧跟要传递的参数对于用户是可见的如:http://tieba.baidu.com/f?kw=%D6%A3%D6%DD%
- 单例模式的实现方式将类实例绑定到类变量上class Singleton(object): _instance = Nonedef
- Python之所以这么流行,是因为它不仅能够应用于科技领域,还能用来做许多其他学科的研究工具,绘制地图便是其功能之一。今天我们用matplo
- python os.stat()获取相关文件的系统状态信息stat 系统调用时用来返回相关文件的系统状态信息的。下面直接以一个具体示例来进行
- 一. 开发前的准备1. 必须了解的知识 SDK:软件开发工具包,可以为开发者提供快速开发的工具沙箱环境:也就是测试环境支付宝支付金额的精度:
- 本文介绍了python opencv之SURF算法示例,分享给大家,具体如下:目标:SURF算法基础opencv总SURF算法的使用原理:上
- # coding:utf-8 import os import sys def cut_and_paste_file(source, des
- 导语周末、假期来了,七夕也快到了,又到一年中最一票难求的时候了!那些假期想回家、过节异地恋的小可爱们,能准时抢到回家(约会对象)的城市票嘛?
- 在一个Web App中,所有数据,包括用户信息、发布的日志、评论等,都存储在数据库中。在awesome-python-app中,我们选择My
- 看代码吧~如果两个dataloader的长度不一样,那就加个:from itertools import cycle仅使用zip,迭代器将在
- 近日,被同事问及一个产品列表的做法怎么实现?一个产品列表,每个产品列表后面跟一个button,这些button居右对齐。其实这个效果跟新闻列
- 1 读/写文件NumPy文件读写主要有二进制的文件读写和文件列表形式的数据读写两种形式1、二进制的文件读写save函数是以二进制的格式保存数
- Kettle中使用JavaScript调用jar包对文件内容进行MD5加密.本文主要知识点:JavaScript调用jar包对文件内容进行M
- 可能许多同学对SQL Server的备份和还原有一些了解,也可能经常使用备份和还原功能,我相信除DBA之外我们大部分开发员队伍对备份和还原只
- python保存numpy数据:numpy.savetxt("result.txt", numpy_data);保存li
- <?php/** * 发送文件 * * @author: legend(legendsky@hotmai
- CSSer与其他IT职位一样,在找工作的时候,都会面临着面试官提出的问题,或者给出的试卷。一、超链接点击过后hover样式就不出现的问题?被
- 在本文中,此示例标准蓝图的存储过程命名方法只适用于SQL内部,假如你正在创建一个新的存储过程,或是发现一个没有按照这个标准构造的存储过程,即