ajax插件怎么导入项目,vue-cli项目中引入第三方插件

前言

最近有小伙伴问道如何在vue-cli项目中引入第三方插件或者库，例如如果想在项目中使用jQuery中的Ajax请求数据呢？或者我想使用Bootstrap框架呢？等等这些问题，本篇博客将带你学习如何引入第三方插件或者库(仅仅只是一部分，如果没有您想要的可以自行百度)，那么一起来看看吧！

本章目标

学会vue-cli项目中引入jQuery

学会vue-cli项目中引入Bootstrap

vue-cli项目中引入jQuery和Bootstrap

首先我们需要引入的是jQuey这个库，毕竟作为一名前端开发人员，我们经常使用jQuey中的ajax请求数据,但是学完本篇博客你可以使用另一种方法请求数据，就是下文提到的axios，这个相对于jQuey中的ajax来说是相对好用的。

(1)添加依赖并安装依赖

项目根目录下找到package.json 添加

"bootstrap": "^3.3.6",

"jquery": "^2.1.4",

版本可以根据自己的需要修改

安装命令

cnpm install

npm install

安装完成之后我们去node_modules查看是否安装成功，安装成功之后的结果

(2)导入jQuey和Bootstrap

在main.js 导入 (注意导入是node_modules下的路径可以点进去查看具体位置)min是压缩后文件建议导入这个

import 'jquery/dist/jquery.min.js'

import 'bootstrap/dist/css/bootstrap.min.css'

import 'bootstrap/dist/js/bootstrap.min.js'

main.js

// The Vue build version to load with the `import` command

// (runtime-only or standalone) has been set in webpack.base.conf with an alias.

import Vue from 'vue'

import Vuex from 'vuex'

import store from './store/index'

// import router from './router'

// import router from './router/hello'

// import router from './router/test'

// import router from './router/common'

// import router from './router/one'

import router from './router/two'

import 'jquery/dist/jquery.min'

import 'bootstrap/dist/js/bootstrap.min'

import 'bootstrap/dist/css/bootstrap.min.css'

Vue.config.productionTip = false

Vue.use(Vuex)

/* eslint-disable no-new */

new Vue({

el: '#app',

router,

store,

components: {},

template: ''

})

使用这种方法引入

(3)使用内置插件ProvidePlugin自动加载模块

此时jQuery并未依赖成功，将提示错误:

需在build/webpack.base.conf.js中增加插件配置

const webpack = require('webpack')

配置中添加

plugins: [

new webpack.ProvidePlugin({

$: "jquery",

jQuery: "jquery",

"windows.jQuery": "jquery"

})

],

build下webpack.base.conf.js的完整结果

'use strict'

const path = require('path')

const utils = require('./utils')

const config = require('../config')

const vueLoaderConfig = require('./vue-loader.conf')

const webpack =require('webpack')

function resolve (dir) {

return path.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]')

}

}

]

},

plugins: [

new webpack.ProvidePlugin({

$: "jquery",

jQuery: "jquery",

"windows.jQuery": "jquery"

})

],

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 client

dgram: 'empty',

fs: 'empty',

net: 'empty',

tls: 'empty',

child_process: 'empty'

}

}

(4)使用jQuery与Bootstrap

Bootstrap资料

Bootstrap中文网：https://www.bootcss.com/

菜鸟教程：https://www.runoob.com/bootstrap/bootstrap-tutorial.html

配置好之后我们就直接使用jQuey和Bootstrap

自己可以新建一个组件中使用jQuery相关方法和Bootstrap相关资源

IndexComponent.vue

结果：