发布日期：2021-05-09 04:02:18 浏览次数：18 分类：博客文章

本文共 4115 字，大约阅读时间需要 13 分钟。

前言

最近有小伙伴问道如何在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 installnpm 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 = falseVue.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中文网：

菜鸟教程：

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

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

IndexComponent.vue

结果：

上一篇：vue-cli项目中使用axios

下一篇：vue学习笔记(十)路由

发表评论

关于作者

喝酒易醉，品茶养心，人生如梦，品茶悟道，何以解忧？唯有杜康！

-- 愿君每日到此一游！

前言