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

npm 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

效果：点击按钮显示手风琴面板