vue-cli+webpack 的项目中怎么导入bootstrap与jquery
虽然vue.js中有很多jquery的效果,引入jquery的好处我认为有两点:
1.很多前端工程师都是从学jquery开始的,然后在转到vue.js中,其实有很多效果都是重复的,不一定非要用vue.js的原生代码写,这样的话学习成本太高。
2.有些效果用jquery写我认为更方便,所以在vue的项目中引入jquery,我认为是很有必要的。
怎么创建vue-cli+webpack项目怎么在项目中引入bootstrap怎么在项目中引入jquery
创建vue-cli+webpack项目
查看npm、webpack、vue是否都在电脑环境中。如在命令行中输入npm -v
、vue -V
、webpack -v
.如果没有的话就安装npm install vue -g
安装vue命令行工具npm install -g vue-cli
创建一个新项目
$ vue init webpack my-project
安装依赖
$ cd my-project$ npm install$ npm run dev
在项目中导入jquery
为什么要先配置jquery,因为bootstrap.js中同样需要需要用到jquery当中的一些配置
安装jquery
npm install jquery —save-dev
找到build文件中的webpack.base.conf.js,加入
var webpack = require(‘webpack’)
在最底部加入:plugins: [new webpack.ProvidePlugin({$: "jquery",jQuery: "jquery","windows.jQuery": "jquery"})
]
在vue文件中无需导入,可直接使用$和jQuery(因为在webpack.conf.js文件中配置过)
$(function () {alert($);$('#warp').css("background","#3333")})
如果不在webpack.conf.js中配置,那么在引用jquery的时候需要
import jqy from 'jquery';<script>jqy(function () {jqy('#warp').css("background","#3333") //这种导入方式只能用jqy,而不能用$和jquery})</script>
在项目中导入bootstrap
安装bootstrapnpm install bootstrap —save-dev
找到build文件中的webpack.base.conf.js(操作步骤同jquery步骤二一致)在src下创建css文件夹打开node_modules->找到bootstrap->dist文件下
把css中的所有文件都拷贝到src/css中,
把dist中的font文件都拷贝到src下如何在组件中使用 bootstrap (方法一)
例如一个组件components/login.vue中:
<script>require('bootstrap'); //同时包括了bootstrap的css文件与js文件,但是这种导入方式只能在login组件中应用</script>
如何在组件中使用 bootstrap (方法二)
在src/main.js文件的顶部加入如下对bootstrap主要文件的引用。
import './assets/css/bootstrap.min.css'import './assets/js/bootstrap.min'//这种导入方式在所有的文件中均能使用
验证bootstrap与jquery在项目中的应用
用bootstrap做了一个手风琴的案例,同事用jquery来控制手风琴的显示与隐藏
<template><div><button id="showbutton">显示/隐藏</button><div class="panel-group" id="accordion"><div class="panel panel-default"><div class="panel-heading"><h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion"href="#collapseOne">我最喜欢的火影经典语录</a></h4></div><div id="collapseOne" class="panel-collapse collapse "><div class="panel-body">1.不相信自己的的人,连努力的价值都没有2.有思念你的人在的地方,就是你要去的地方</div></div></div><div class="panel panel-default"><div class="panel-heading"><h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion"href="#collapseTwo">我最喜欢的声优</a></h4></div><div id="collapseTwo" class="panel-collapse collapse"><div class="panel-body">1.福山润2.神谷浩史3.梶裕贵4.小野大辅5.岛崎信长</div></div></div><div class="panel panel-default"><div class="panel-heading"><h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion"href="#collapseThree">我最喜欢的动漫</a></h4></div><div id="collapseThree" class="panel-collapse collapse"><div class="panel-body">1.罪恶王冠2.火影忍者3.七大罪4.进击巨人5.寄生兽6.东京食种7.叛逆的鲁鲁修8.夏目友人帐9.鬼灯的冷彻10.我的英雄学院</div></div></div></div></div></template><script>require('bootstrap');export default{data(){return{}},methods:{},mounted(){$('#showbutton').click(function () {$('#accordion').slideToggle('slow')})}}</script>
写完后,执行命令,运行效果。
npm run dev
效果:点击按钮显示手风琴面板