vue-cli+webpack 的项目中怎么导入bootstrap与jquery

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

• 安装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

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