Vue整合jquery/bootstrap

缺乏、安全感 2023-10-11 11:11 13阅读 0赞

转载：[https://segmentfault.com/a/1190000014509984][https_segmentfault.com_a_1190000014509984]

一、安装插件：

cnpm install jquery --save
    cnpm install bootstrap --save
    cnpm install popper.js --save

二、全局注册：

1、配置`webpack.base.conf.js或者\build\webpack.base.conf.js`

（1）cli小于3.0

//在顶部添加
    const webpack = require('webpack')
    
    //在module.exports = {}末尾添加下面代码
    module.exports = {
    ...
    plugins: [
        new webpack.ProvidePlugin({
          $: "jquery",
          jQuery: "jquery"
        })
      ]
    }

（2）cli大于3.0

const webpack = require('webpack')
    module.exports = {
      configureWebpack: {
        plugins: [
          new webpack.ProvidePlugin({
            $: "jquery",
            jQuery: "jquery"
          })
        ]
      }
    }

2、main.js

import $ from 'jquery'
    import 'bootstrap'

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

三、测试：

1）测试`jquery`

//在vue文件中添加测试代码
    
    <script>
    $(function () {
      alert('234')
    })
    
    export default {
      name: 'App'
    }
    </script>

2）测试`bootstrap`

<template>
    <div class="container">
        <div class="row">
            <div class="col-md-6">
                <button class="btn btn-primary">测试按钮</button>
            </div>
        </div>
    </div>
    </template>

转载于:https://www.cnblogs.com/Tractors/p/11447776.html

[https_segmentfault.com_a_1190000014509984]: https://segmentfault.com/a/1190000014509984

发表评论取消回复

表情：

评论列表（有 0 条评论，13人围观）

还没有评论，来说两句吧...

相关阅读

相关 SpringBoot整合JWT+Vue

引入pom  <dependency> <groupId>com.auth0</

朴灿烈づ我的快乐病毒、/ 2024年04月01日 13:14/ 0 赞/ 83 阅读

相关 Vue整合jquery/bootstrap

转载：[https://segmentfault.com/a/1190000014509984][https_segmentfault.com_a_11900000145099

缺乏、安全感/ 2023年10月11日 11:11/ 0 赞/ 14 阅读

相关 springboot整合vue

步骤 1. 创建springboot项目 2. 在resources目录下新建一个vue目录 3. 在vue目录下新建vue项目，或者把存在的vue项目copy到这

淡淡的烟草味﹌/ 2023年07月09日 05:22/ 0 赞/ 20 阅读

相关 selectpicker 与vue整合

文章目录总结: 转载文章: bootstrap-select多选框与Vue整合 [https://blog.csdn.net/z\_tank

àì夳堔傛蜴生んèń/ 2023年03月01日 13:45/ 0 赞/ 6 阅读

相关 Vue3整合VxeTable

VxeTable官网：[https://gitee.com/xuliangzhan\_admin/vxe-table][https_gitee.com_xuliangzhan_

淩亂°似流年/ 2023年01月21日 13:23/ 0 赞/ 73 阅读

相关 SpringBoot+Mybatis+Vue整合

创建springboot项目 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLm

心已赠人/ 2022年12月08日 05:33/ 0 赞/ 327 阅读

相关 Spring WebSocket Stomp 整合Vue

描述：将websocket应用在实际的项目中，用于后台应用向浏览器推送消息。架构: 传统的springmvc基于xml配置的(但是websocket配置是基于java

约定不等于承诺〃/ 2022年04月18日 03:19/ 0 赞/ 363 阅读

相关 Spring Cloud整合Vue

由于公司项目是前后端分离的，我前段时间将后端的Spring Cloud框架搭建的差不多了，包括Eureka服务发现中心，远端配置中心Config，不同服务接口调用组件Feign

川长思鸟来/ 2022年04月15日 01:58/ 0 赞/ 252 阅读

相关 Vue整合到Spring Boot

文章目录 Vue打包部署到Spring Boot 1 文件目录结构 1.1 打包后的文件目录结构 1.2 后台

系统管理员/ 2022年04月10日 04:24/ 0 赞/ 853 阅读

相关 vue整合外部js

vue引入外部js import \{ TrackLine \} from "../../../../../static/js/trajectory.js"; impo

旧城等待，/ 2021年11月02日 09:28/ 0 赞/ 410 阅读