由于公司后端开发了一套java+bootstrap的权限配置系统，用来控制其他系统的权限。所以新开发的系统导航栏图标还是需要使用bootstrap字体图标。
vue 引入 jquery
-
vue init webpack manage：创建vue项目 -
npm i jquery -D：安装jquery依赖 - 找到build文件夹下的webpack.base.conf.js文件打开，修改配置：
var webpack=require('webpack');
module.exports = {
...
plugins: [
new webpack.ProvidePlugin({
$:"jquery",
jQuery:"jquery",
"windows.jQuery":"jquery"
})
]
}
- 在入口文件main.js中加入
import $ from 'jquery'
vue 引入 bootstrap
- 修改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"
}
},
...
}
- 在入口文件main.js中加入：
import './assets/css/bootstrap.min.css'
import './assets/js/bootstrap.min'
-
在assets文件目录中拷贝bootstrap各种文件
image.png - 将
components中的HelloWorld.vue文件替换为如下文件：
<template>
<div>
<button type="button" class="btn btn-default" aria-label="Left Align">
<i class="glyphicon glyphicon-align-left"></i>
</button>
<button type="button" class="btn btn-default btn-lg">
<i class="glyphicon glyphicon-star"></i> Star
</button>
<button type="button" class="btn btn-default btn-lg">
<i class="glyphicon glyphicon-signal"></i> 统计
</button>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
}
</script>
-
npm run dev开启服务，浏览器中效果如下：
image.png - 【补充】
config/index.js文件中更改本地IP和端口号，可以实现局域网内访问。
修改IP及端口号
vue只使用bootstrap字体图标，防止文件加载过多无用的内容导致页面加载过慢
- 将
fonts字体文件放到assets中，修改bootstrap.css文件，只留下字体定义的代码即可。
bootstrap.css
bootstrap.css
-
main.js中引入bootstrap.css，代码如下：
main.js
-
组件中使用
class来显示图标
image.png -
效果如下：
效果
