详解如何在 vue 项目里正确地引用 jquery 和 jquer

如何在Vue项目中优雅地集成jQuery和jQuery UI插件

对于使用vue-cli构建的Vue项目，我们有时需要将传统的jQuery和jQuery UI插件集成到项目中。虽然Vue推崇的是数据驱动的方式，但在某些情况下，我们仍然需要使用这些传统的库。本文将详细介绍如何在Vue项目中正确地引入和使用jQuery及jQuery UI插件。

我们需要修改webpack的配置文件，这个文件位于项目的build目录下，文件名为webpack.base.conf.js。我们需要在此文件中进行两处修改。

在文件的开头，我们需要引入webpack模块。这是因为在配置plugins时，我们需要使用webpack的ProvidePlugin。

```javascript

var webpack = require('webpack');

```

接下来，我们配置resolve和plugins部分。在resolve的alias中，我们需要指定jquery的路径，如果使用NPM安装的jQuery，则直接写'jquery'即可。为了能在项目的任何位置都能使用$和jQuery，我们需要使用ProvidePlugin来提供全局的$和jQuery。

配置示例如下：

```javascript

module.exports = {

// 其他配置...

resolve: {

extensions: ['.js', '.vue'],

alias: {

// 其他别名配置...

'jquery': 'jquery'

}

},

plugins: [

new webpack.ProvidePlugin({

$: "jquery",

jQuery: "jquery"

})

]

// 其他配置...

}

```

配置完成后，我们就可以在Vue项目中使用jQuery了。例如，如果要引入Bootstrap，我们只需在vue的入口js文件（通常是src/main.js）的开头引入Bootstrap的css和js文件即可。

例如：

```javascript

// 引入Bootstrap的CSS

import './assets/libs/bootstrap/css/bootstrap.min.css';

// 引入Bootstrap的JS

import './assets/libs/bootstrap/js/bootstrap.min.js';

```

在项目中巧妙使用Toastr组件

亲爱的开发者们，你是否曾在使用Toastr组件时感到无从下手？其实，只需要轻松几步，你就可以将其融入你的项目中。从资产库中导入Toastr的CSS和JS文件，然后，在需要的地方直接调用即可。例如：

`import 'assets/libs/toastr/toastr.min.css'`

`import toastr from 'assets/libs/toastr/toastr.min'`

`toastr.success('Hello')`

如此简单，一条成功提示就跃然屏幕之上。

Vue-cli Webpack项目全局引入JQuery

想在Vue-cli Webpack项目中全局使用JQuery？这完全可以实现。在package.json文件中添加JQuery依赖项：

`"dependencies": {

"jquery": "^2.2.3"

}`

然后运行`npm install`安装依赖。

接下来，进入Webpack配置环节。在webpack.base.conf.js文件中加入以下代码：

`var webpack = require("webpack")` 并在module.exports中加入以下插件配置：

`plugins: [

new webpack.optimizemonsChunkPlugin('mon.js'),

new webpack.ProvidePlugin({

jQuery: "jquery",

$: "jquery"

})

]` 完成配置后，别忘了重新运行开发服务器。在main.js中引入JQuery `import $ from 'jquery'` ，即可在项目中全局使用JQuery。

在.vue文件中引入非NPM第三方模块和vue-cli引入外部文件

对于非NPM的第三方模块，可以使用`require`语句引入。例如：`var Showbo = require("exports?Showbo!./path/to/showbo.js");` 即可在.vue文件中使用Showbo模块。

对于外部文件的引入，如swiper插件，首先需要在webpack.base.conf.js中添加该插件作为externals。然后，在根目录下的index.html文件中引入swiper.js文件。之后，就可以在需要使用的文件中通过 `import Swiper from 'swiper'` 引入并使用该插件。

以上就是本文的全部内容，希望这些技巧能对大家的学习和工作有所帮助。如果你对本文有任何疑问或建议，欢迎多多支持狼蚁SEO，我们一起学习，共同进步。