showoom,王真霖,印花粘合剂
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
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持移动技术网。
如对本文有疑问,请在下面进行留言讨论,广大热心网友会与你互动!! 点击进行留言回复
VUE+elementui组件在table-cell单元格中绘制微型echarts图
Vue通过getAction的finally来最大程度避免影响主数据呈现问题
vue 路由懒加载中给 Webpack Chunks 命名的方法
网友评论