五、vue中使用jquery,bootstrap

翟修永
2023-12-01

一、vue中使用jquery

1、安装jquery依赖

npm install jquery  --save

安装完后,会在node_modules,依赖存放文件夹看到jquery文件夹

2、main.js中

import $ from 'jquery';

window.jQuery = $;

window.$ = $;

这样就可以直接使用$ ,比如$("#name").val()  

二、vue中使用bootstrap

bootstrap 使用依赖于JQuery,所以在使用bootstrap 之前,请确保安装了jquery

1、安装bootstrap依赖

npm install bootstrap --save

安装完后,会在node_modules,依赖存放文件夹看到bootstrap文件夹

2、在main.js中引入并use一下

import Vue from 'vue'

// 引入bootstrap 需要的js和css样式 

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

import bootstrapcss from "bootstrap/dist/css/bootstrap.min.css";

Vue.use(bootstrapjs, bootstrapcss)

注释:Vue.use它在使用时实际是调用了该插件的install方法,所以引入的当前插件如果含有install方法我们就需要使用Vue.use()

这是boostrap官网

Buttons · Bootstrap v5 中文文档 v5.3 | Bootstrap 中文网

 类似资料: