在vue中引入bootstrap和jquery

在vue中引入bootstrap和jquery

1. 修改build文件下的webpack.base.config.js

alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
      'assets': path.resolve(__dirname, '../src/assets'),
      'jquery': "jquery/src/jquery"
    }

在alias下添加：

'assets' : path.resolve(__dirname, '../src/assets'),
'jquery': "jquery/src/jquery"

2. 然后 npm install jquery

3. 将bootstrap下的fonts css js文件放在assets文件下, 在assets文件目录中拷贝bootstrap各种文件

4. 在main.js文件中引入

import './assets/bootstrap/js/bootstrap.min.js'
import './assets/bootstrap/css/bootstrap.css'
import jquery from 'jquery'

5. 在组件中引入 bootstrap 的字体图标

<p>引入bootstrap中的字体图标</p>
<span class="glyphicon glyphicon-menu-hamburgeraria-hidden="true"></span>
<span class="glyphicon glyphicon-music" aria-hidden="true"></span>
<span class="glyphicon glyphicon-heart" aria-hidden="true"></span>

显示效果：