VUE-CLI introduction of Jquery,bootstrap,popper

1. Installing plugins

NPM install jquery--save          //jquery plugin npm install bootstrap--save   //Bootstrap npm Install--save popper.js  //popper.js    

2. Modify the Webpack.base.conf.js configuration file under the build directory:

1) Add Webpack object: Var webpack=require (' Webpack ');

2) Add the following configuration to the Module.exports:

  plugins: [    new webpack.optimize.CommonsChunkPlugin (' Common '),    New  Webpack. Provideplugin ({      ' jquery ',      ' jquery ',      Popper: [' popper.js ', ' Default ']    })  ]

Webpack.base.conf.js configuration File Final code

' Use strict 'Const PATH= Require (' path ') Const Utils= require ('./utils ')) Const Config= require ('.. /config ') Const Vueloaderconfig= require ('./vue-loader.conf ')) Const Webpack= Require (' Webpack ')functionResolve (dir) {returnPath.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 clientDgram: ' Empty ', FS:' Empty ', Net:' Empty ', TLS:' Empty ', child_process:' Empty '}, plugins: [NewWebpack.optimize.CommonsChunkPlugin (' Common '),    NewWebpack. Provideplugin ({$:' jquery ', JQuery:' jquery ', Popper: [' Popper.js ', ' Default ']    })  ]}

#在main. js in the Jquery,bootstrap JS and CSS through import to introduce the code as follows:

Import $ from ' jquery' bootstrap/dist/css/bootstrap.min.css' bootstrap/dist/js/bootstrap.min '

Finally reboot:

NPM Run Dev

VUE-CLI introduction of Jquery,bootstrap,popper