在vue+ts中使用jquery+bootstrap

最新推荐文章于 2023-10-25 18:00:10 发布

sxjlinux

最新推荐文章于 2023-10-25 18:00:10 发布

阅读量1.4k

点赞数 1

本文链接：https://blog.csdn.net/sunxiaoju/article/details/109395977

版权

1、由于bootstrap使用了jquery，因此需要加入jquery，首先在package.json中加入：

    "jquery": "3.5.1",
    "@types/jquery": "3.3.1",
    "bootstrap": "4.5.2",
    "@types/bootstrap": "4.1.0",

如下图所示：

2、执行npm install进行安装。

3、在package.json中的eslintConfig->env中加入："jquery": true，如下图所示：

4、在vue.config.js中添加如下配置：

  configureWebpack: {
    plugins: [
      new webpack.ProvidePlugin({
        jQuery: "jquery",
        $: "jquery"
      })
    ]
  }

如下图所示：

4、在shims-vue.d.ts文件中加入declare module 'jquery';，如下图所示：

5、在main.ts文件中加入：

import $ from 'jquery';
import 'bootstrap';
import 'bootstrap/dist/css/bootstrap.min.css';

如下图所示：

6、然后在.vue中就可以使用jquery和bootstrap，vue文件内容如下：

<template>
        <div>
            登录页面
        </div>
        <div>
            <p class="col-md-6">
              <button class="btn btn-primary">测试按ssss钮</button>
            </p>
        </div>
</template>
<script lang="ts">
import { Options, Vue } from 'vue-class-component';
$(function () {
  alert('111111111');
});
export default class Login extends Vue {}
</script>

7、查看浏览器即可，如下图所示：