vue项目创建然后引入 elementui+jquery+bootstrap

最新推荐文章于 2023-05-28 10:46:14 发布

原创最新推荐文章于 2023-05-28 10:46:14 发布 · 1.3k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #bootstrap #jquery

VUE 专栏收录该内容

2 篇文章

订阅专栏

本文详细介绍如何在Vue项目中集成Bootstrap和jQuery，包括安装依赖、配置Webpack、引入样式及脚本，以及在Vue组件中使用Bootstrap和jQuery的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue-cli已经安装过
然后直接安装vue init webpack myProjectName
然后各种回车写入各种信息
然后引入elementui 命令是 npm install element-ui --save
然后启动其他开始引入其他数据

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

安装完成以后在	packagjson中查看

 "dependencies": {
			    "bootstrap": "^4.3.1",
			    "element-ui": "^2.7.2",
			    "jquery": "^3.4.0",
			    "popper.js": "^1.15.0",
			    "vue": "^2.5.2",
			    "vue-router": "^3.0.1"
 	 },

 其中已经有了bootstrap jquery popper依赖

配置webpack.base.conf.js
顶部加入

const webpack = require('webpack')

然后在module.exports = {
…最下边加入

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

然后就是main.js中的配置

import $ from 'jquery'
import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap/dist/js/bootstrap.min'
Vue.use($)

项目初始App.vue中修改如下

  <template>
    	  <div id="app">
    	  <template>
    	    <div>
    	        <div class="row">
    	            <div class="col-md-6">
    	                <button class="btn btn-danger">测试按钮</button>
    	            </div>
    	        </div>
    	    </div>
    	  </template>
    	  </div>
    	</template>
    	
    	<script>
    	import $ from 'jquery'
    	$(function () {
    	  alert('234')
    	})
    	export default {
    	  name: 'App'
    	}
    	</script>
    	
    	<style>
    	#app {
    	  font-family: 'Avenir', Helvetica, Arial, sans-serif;
    	  -webkit-font-smoothing: antialiased;
    	  -moz-osx-font-smoothing: grayscale;
    	  text-align: center;
    	  color: #2c3e50;
    	  margin-top: 60px;
    	}
    	</style>