vue脚手架引入bootstrap3
首先不会使用vue脚手架请参考vue脚手架安装教程引入jQuery和正常使用bootstrap一样,在引入bootstrap之前要引入jQuery插件。打开你的vue脚手架项目,用webstorm打开项目后,点击下方的Terminal,出现下面的界面:输入指令:npm install jquery --save -dev出现以上为jQuery安装成功。安装jQuery成功之后...
·
项目基本框架 我的项目地址
首先不会使用vue脚手架请参考 vue脚手架安装教程
引入jQuery
和正常使用bootstrap一样,在引入bootstrap之前要引入jQuery插件。
打开你的vue脚手架项目,用webstorm打开项目后,点击下方的Terminal,出现下面的界面:
输入指令:npm install jquery --save -dev
出现以上为jQuery安装成功。
安装jQuery成功之后,点击:build ->webpack.base.conf.js进行配置。
- 在function resolve (dir){…}函数的上面添加:
const webpack = require('webpack');
- 在
resolve: {…}
的上面添加:
plugins: [
new webpack.optimize.CommonsChunkPlugin('common.js'),
new webpack.ProvidePlugin({
jQuery: "jquery",
$: "jquery"
})
],
- 在main.js中添加:
import $ from 'jquery'
使用jQuery
$(function () {
/*js代码*/
})
引入Bootstrap
引入指令: npm install bootstrap3 -s
以上为bootstrap4安装成功
在main.js中加入:
import 'bootstrap3/dist/css/bootstrap.min.css'
import 'bootstrap3/dist/js/bootstrap.min.js'
HelloWorld.vue测试效果
<template>
<div class="hello">
<div class="container">
<div class="row">
<div class="col-sm">
<div class="alert alert-primary" role="alert">
A simple primary alert—check it out!
</div>
<div class="alert alert-secondary" role="alert">
A simple secondary alert—check it out!
</div>
<div class="alert alert-success" role="alert">
A simple success alert—check it out!
</div>
<div class="alert alert-danger" role="alert">
A simple danger alert—check it out!
</div>
</div>
<div class="col-sm">
One of three columns
</div>
<div class="col-sm">
One of three columns
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
font-weight: normal;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>
启动指令 : npm run dev
更多推荐
已为社区贡献9条内容
所有评论(0)