vue-cli 引入jQuery，Bootstrap，popper的方法
更新時(shí)間：2018年09月03日 15:02:58 作者：ln0909
這篇文章主要介紹了vue-cli 引入jQuery，Bootstrap，popper的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
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引進(jìn)來
代碼如下：
import $ from 'jquery' import 'bootstrap/dist/css/bootstrap.min.css' import 'bootstrap/dist/js/bootstrap.min'
最后重新啟動(dòng)一下：
npm run dev
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
vue3輸入單號和張數(shù)如何自動(dòng)生成連號的單號
最近遇到這樣的需求輸入連號事件,需要在表格中輸入物流單號,物流號碼,生成的數(shù)量,名稱,點(diǎn)擊確定自動(dòng)生成固定數(shù)量的連號物流單號,本文重點(diǎn)介紹vue3輸入單號和張數(shù),自動(dòng)生成連號的單號,感興趣的朋友一起看看吧2024-02-02
Vue3.4中v-model雙向數(shù)據(jù)綁定新玩法詳解
defineModel?是一個(gè)新的?<script?setup>?宏,旨在簡化支持?v-model?的組件的實(shí)現(xiàn),?這個(gè)宏用來聲明一個(gè)雙向綁定?prop,下面我們就來看看他的具體使用吧2024-03-03
Vue學(xué)習(xí)之a(chǎn)xios的使用方法實(shí)例分析
這篇文章主要介紹了Vue學(xué)習(xí)之a(chǎn)xios的使用方法,結(jié)合實(shí)例形式分析了vue.js axios庫的功能及網(wǎng)絡(luò)請求相關(guān)操作技巧,需要的朋友可以參考下2020-01-01
這篇文章主要為大家詳細(xì)介紹了如何使用Vue實(shí)現(xiàn)瀑布流,文中的示例代碼講解詳細(xì),具有一定的借鑒價(jià)值,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-02-02
從零開始在vue-cli4配置自適應(yīng)vw布局的實(shí)現(xiàn)
這篇文章主要介紹了從零開始在vue-cli4配置自適應(yīng)vw布局，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-06-06
vuejs如何解決瀏覽器切換頁面后setInterval計(jì)時(shí)器停止執(zhí)行的問題
setinterval()是定時(shí)調(diào)用的函數(shù),可按照指定的周期（以毫秒計(jì)）來調(diào)用函數(shù)或計(jì)算表達(dá)式,這篇文章主要給大家介紹了關(guān)于vuejs如何解決瀏覽器切換頁面后setInterval計(jì)時(shí)器停止執(zhí)行的問題,需要的朋友可以參考下2024-01-01
這篇文章主要介紹了Vue之Dep和Observer的用法及說明，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-05-05
Vue中數(shù)組與對象修改觸發(fā)頁面更新的機(jī)制與原理解析
這篇文章主要介紹了Vue中關(guān)于數(shù)組與對象修改觸發(fā)頁面更新的機(jī)制與原理簡析,本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-12-12
vue移動(dòng)端微信授權(quán)登錄插件封裝的實(shí)例
今天小編就為大家分享一篇vue移動(dòng)端微信授權(quán)登錄插件封裝的實(shí)例，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
組件 (Component) 是 Vue.js 最強(qiáng)大的功能之一。組件可以擴(kuò)展 HTML 元素，封裝可重用的代碼。這篇文章給大家介紹了vue組件的使用，需要的朋友參考下吧2018-01-01