vue使用bootstrap教程（包括单独引入字体图标）

由于公司后端开发了一套java+bootstrap的权限配置系统，用来控制其他系统的权限。所以新开发的系统导航栏图标还是需要使用bootstrap字体图标。

vue 引入 jquery

1. vue init webpack manage ：创建vue项目
2. npm i jquery -D：安装jquery依赖
3. 找到build文件夹下的webpack.base.conf.js文件打开，修改配置：

var webpack=require('webpack');

module.exports = {
  ...
  plugins: [  
    new webpack.ProvidePlugin({  
      $:"jquery",  
      jQuery:"jquery",  
      "windows.jQuery":"jquery"  
    })  
  ]
}

4. 在入口文件main.js中加入 import $ from 'jquery'

vue 引入 bootstrap

1. 修改webpack.base.conf.js文件，配置如下：

...
 module.exports = {
  ...
  resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
      'assets': path.resolve(__dirname, '../src/assets'),  
      'jquery': "jquery/src/jquery" 
    }
  },
  ...
}

2. 在入口文件main.js中加入：

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

3. 在assets文件目录中拷贝bootstrap各种文件

   
   
   image.png
4. 将components中的HelloWorld.vue文件替换为如下文件：

5. npm run dev开启服务，浏览器中效果如下：
   
   image.png
6. 【补充】config/index.js文件中更改本地IP和端口号，可以实现局域网内访问。
   
   修改IP及端口号

vue只使用bootstrap字体图标，防止文件加载过多无用的内容导致页面加载过慢

1. 将fonts字体文件放到assets中，修改 bootstrap.css文件，只留下字体定义的代码即可。

bootstrap.css

bootstrap.css

2. main.js 中引入 bootstrap.css，代码如下：
   
   main.js

3. 组件中使用class来显示图标
   

   image.png

4. 效果如下：

   
   
   效果