How to correctly reference jquery and Jquery-ui plugins in the Vue project

With the Vue project built with VUE-CLI, Webpack's configuration files are scattered in many places, and we need to modify the build/webpack.base.conf.js to change the code in both places.

At the beginning of the introduction of Webpack, the back of the plugins there need
var webpack = require (' webpack ')
//Resolve

Module.exports = {
   //other code ...
   Resolve: {
      extensions: [', '. js ', '. Vue '],
      fallback: [Path.join (__dirname, ' ... /node_modules ')],
      alias: {
          ' src ': path.resolve (__dirname, ' ... /src '),
          ' assets ': path.resolve (__dirname, ' ... /src/assets '),
          ' components ': Path.resolve (__dirname, '. /src/components '),

          //webpack use jquery if it is self-downloaded
          //' JQuery ': Path.resolve (__dirname, '. /src/assets/libs/jquery/jquery.min '),
          //If using NPM to install jquery '
          jquery ': ' jquery ' 
      }
   },/

   / Add a plugins
   plugins: [
      new Webpack. Provideplugin ({
          $: "jquery",
          jquery: "jquery"
      })
   ],

   //other code ...
}

This makes it possible to use jquery correctly, such as when I introduce bootstrap, and we add it at the beginning of the Vue entry JS file src/main.js

Use bootstrap
import './assets/libs/bootstrap/css/bootstrap.min.css '
import './assets/libs/bootstrap/js/ Bootstrap.min '

This bootstrap is correctly referenced and built.
For example, using the TOASTR component, you just need to import in the place where needed, or the global introduction of CSS where needed to reference JS, and then directly use

Use toastr
import ' assets/libs/toastr/toastr.min.css '
import toastr from ' Assets/libs/toastr/toastr.min '

toastr.success (' Hello ')

Reference:

Managing Jquery plugin Dependency in Webpack

How to correctly reference jquery and Jquery-ui plugins in the Vue project vue-cli webpack Global introduction of jquery

First in the Package.json,

dependencies:{
 "jquery": "^2.2.3"
}

Then NMP install

Join in the webpack.base.conf.js.

var webpack = require ("Webpack")

In Module.exports's last addition

Plugins: [
 new Webpack.optimize.CommonsChunkPlugin (' Common.js '),
 new Webpack. Provideplugin ({
     jquery: "jquery",
     $: "jquery"
 })
]

Then be sure to run Dev again

It's OK to introduce in main.js.

Import $ from ' jquery '

Reference: Vue-cli How to introduce jquery to introduce third-party non-NPM modules in. vue files

var SHOWBO = require ("Exports? Showbo!. /path/to/showbo.js ");

Reference: Exports-loader vue-cli introduction of external files

Add externals to Webpack.base.conf.js
Externals Swiper is the key, the corresponding value must be the plugin swiper.js the variable defined swiper:
The file is then introduced in the index.html file in the root directory: <script src= "Static/lib/swiper.js" ></script>
This way, you can add this line of code to the file that you need to use Swiper.js: Import swiper from ' Swiper ', so you can use it normally.
Reference: https://segmentfault.com/q/1010000005169531?_ea=806312