vueプロジェクトでjqueryとjquery-uiのプラグインを正しく参照する方法

4638 ワード

vue-cliで構築されたvueプロジェクトを使用すると、webpackのプロファイルは多くの場所に分散していますが、build/webpack.base.conf.jsを修正し、2つのコードを修正する必要があります.

//      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導入

はまずpackage.jsonに加入し、

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

はnmp install

に続く.

webpack.base.conf.jsに

var webpack = require("webpack")

を加える

はmoduleにあります.exportsの最終加入

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

それから必ずrun dev

を再開します

は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にexternalsexternalsを追加するswiperはキーであり、対応する値はプラグインswiperである.jsが定義変数Swiper:その後ルートディレクトリの下のindex.htmlファイルにファイルを導入する:このようにswiperをとする.jsのファイルにこののコード:import Swiper from 'swiper'をえると、にできます. :https://segmentfault.com/q/1010000005169531?_ea=806312

axiosドメイン間問題の処理

MacインストールHomebrew brewインストールnodeとnpm npm構築vue