如何在 vue 項目里正確地引用 jquery 和 jquery-ui的插件

使用vue-cli構建的vue項目，webpack的配置文件是分散在不少地方的，而咱們須要修改的是build/webpack.base.conf.js，修改兩處的代碼

// 在開頭引入webpack，後面的plugins那裏須要
var webpack = require('webpack')
// resolve

module.exports = {
   // 其餘代碼...
   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 使用 jQuery，若是是自行下載的
          // 'jquery': path.resolve(__dirname, '../src/assets/libs/jquery/jquery.min'),
          // 若是使用NPM安裝的jQuery
          'jquery': 'jquery' 
      }
   },

   // 增長一個plugins
   plugins: [
      new webpack.ProvidePlugin({
          $: "jquery",
          jQuery: "jquery"
      })
   ],

   // 其餘代碼...
}

這樣就能夠正確的使用jQuery了，好比我要引入Bootstrap，咱們在vue的入口js文件src/main.js開頭加入

// 使用Bootstrap
import './assets/libs/bootstrap/css/bootstrap.min.css'
import './assets/libs/bootstrap/js/bootstrap.min'

這樣Bootstrap就正確的被引用並構建。
在好比使用toastr組件，只須要在須要的地方import進來，或者全局引入css在須要的地方引用js，而後直接使用

// 使用toastr
import 'assets/libs/toastr/toastr.min.css'
import toastr from 'assets/libs/toastr/toastr.min'

toastr.success('Hello')

參考:

• Managing Jquery plugin dependency in webpack

• 如何在vue項目里正確地引用jquery和jquery-ui的插件

vue-cli webpack全局引入jquery

1. 首先在package.json里加入，

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

   而後 nmp install

2. 在webpack.base.conf.js里加入

   var webpack = require("webpack")

3. 在module.exports的最後加入

   plugins: [
    new webpack.optimize.CommonsChunkPlugin('common.js'),
    new webpack.ProvidePlugin({
        jQuery: "jquery",
        $: "jquery"
    })
   ]

4. 而後必定要從新 run dev

5. 在main.js 引入就ok了

   import $ from 'jquery'

參考: vue-cli怎麼引入jquery

在.vue文件中引入第三方非NPM模塊

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

參考: exports-loader

vue-cli引入外部文件

在 webpack.base.conf.js 中添加externals

externals 中 swiper 是鍵，對應的值必定的是插件 swiper.js 所定義的變量 Swiper :


以後再在根目錄下的index.html文件裏引入文件：<script src="static/lib/swiper.js"></script>
這樣子就能夠在須要用到swiper.js的文件里加入這行代碼：import Swiper from 'swiper'，這樣就能正常使用了。
參考: https://segmentfault.com/q/1010000005169531?_ea=806312