在vue项目中正确的引入jquery和bootstrap

一、第一种方法

1：因为已经安装了vue脚手架，所以需要在webpack中全局引入jquery

打开package.json文件，在里面加入这行代码，jquery后面的是版本，根据你自己需求更改。

dependencies:{

"jquery":"^2.2.3"

}

然后在命令行中cnpm install jquery --save-dev

大多人应该都是使用的淘宝镜像，所以使用cnpm，如果你不是，可以使用npm安装。

　　或者直接在项目根目录下运行cnpm install jquery --save-dev，系统自动下载最新版本的jquery

2：在build文件夹下的webpack.base.conf.js中增加三处代码

// 在开头引入webpack，后面的plugins那里需要
var webpack = require('webpack')     //这是第一处
// resolve

module.exports = {
   // 其他代码...
   resolve: {
      extensions: ['', '.js', '.vue'],
      fallback: [path.join(__dirname, '../node_modules')],
      alias: {
          'src': path.resolve(__dirname, '../src'),
          'assets': path.resolve(__dirname, '../src/assets'),
          'components': path.resolve(__dirname, '../src/components'),

          // webpack 使用 jQuery，如果是自行下载的
          // 'jquery': path.resolve(__dirname, '../src/assets/libs/jquery/jquery.min'),
          // 如果使用NPM安装的jQuery
          'jquery': 'jquery'   //这是第二处
      }
   },

   // 增加一个plugins ，这是第三处
   plugins: [
　　　 new webpack.optimize.CommonsChunkPlugin('common.js'),
      new webpack.ProvidePlugin({
          $: "jquery",
          jQuery: "jquery"
      })
   ],

   // 其他代码...
}

3：在main.js中引入,加入下面这行代码

import $ from 'jquery'

4：最后一步，重新跑一边就好，cnpm run dev

二、第二种方法（未验证）

1.下载库：>npm install --save jquery

2.安装库：src/index.js:import $ from 'jquery';

3.编译库：webpack src/index.js -o dist/bundle.js //编译 index.js文件并生成bundle.js 文件[code=javascript]

三、引入Bootstrap和toastr

要引入Bootstrap，我们在vue的入口js文件src/main.js开头加入

// 使用Bootstrap
import './assets/libs/bootstrap/css/bootstrap.min.css'
import './assets/libs/bootstrap/js/bootstrap.min'

使用toastr组件，只需要在需要的地方import进来，或者全局引入css在需要的地方引用js，然后直接使用

// 使用toastr
import 'assets/libs/toastr/toastr.min.css'
import toastr from 'assets/libs/toastr/toastr.min'

toastr.success('Hello')

在vue项目中正确的引入jquery和bootstrap

一、第一种方法

二、第二种方法（未验证 ）

三、引入Bootstrap和toastr

推荐阅读

二、第二种方法（未验证）