vue整合bootstrap过程
1、初始化项目
vue init webpack vue_bootstrap
2、main.js中引入jquery,bootstrap的css和js
import './bootstrap-3.3.7/dist/jquery.min.js';
import './bootstrap-3.3.7/dist/css/bootstrap.css';
import './bootstrap-3.3.7/dist/js/bootstrap.js';
3、修改build/webpack.base.conf.js配置,添加jquery的模块插件
先 const webpack=require('webpack')引入webpack
然后在module.exports ={} 的大括号中添加以下配置即可:
plugins: [
new webpack.optimize.CommonsChunkPlugin('common.js'),
new webpack.ProvidePlugin({
jQuery: "jquery",
$: "jquery"
})
],
4、编辑App.vue和HelloWorld.vue文件
App.vue :
<template>
<div id="app">
<p>
<button class="btn btn-primary">按钮1</button>
<button class="btn btn-info">按钮2</button>
<button class="btn btn-warning">按钮3</button>
<button class="btn btn-danger">按钮4</button>
</p>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
<style scoped>
</style>
HelloWorld.vue:
<template>
<div >
<table class="table table-hover table-bordered" style="width: 80%">
<thead>
<tr>
<th>ID</th>
<th>姓名</th>
<th>性别</th>
<th>电话</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>张三</td>
<td>男</td>
<td>1354545444</td>
</tr>
<tr>
<td>2</td>
<td>李四</td>
<td>女</td>
<td>13545451111</td>
</tr>
<tr>
<td>3</td>
<td>王五</td>
<td>男</td>
<td>1354545222</td>
</tr>
</tbody>
</table>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
}
}
</script>
<style scoped>
</style>
浏览器访问的最终效果如下:
更多推荐
vue中整合bootstrap
发布评论