vue腳手架引入bootstrap3

項目基本框架 我的項目地址
首先不會使用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