vue2.0+bootstrap實戰（一）

俗話說，紙上學來終覺淺，絕知此事要躬行，最近兩天學習了下Vue2.0,想作個項目練下手，順便寫個文章方便複習回顧~

1.使用cue-cli建立vue項目

1. 進入指定目錄，右擊Git Bash Here打開git命令行，vue init webpack 項目名稱，建立基於webpack的vue項目
2. 根據命令行的提示，選擇是否安裝vue-router,是否添加單元測試等，此處均選擇"n",建立一個最基本的項目

   

3. 項目建立完成後使用webstorm打開（樓主的webstorm中無法建立vue項目，其實上面兩步也能夠再webstorm中進行操做），在webstorm命令行中運行npm install或cnpm install安裝依賴包

   

4. 在webstorm中運行npm run dev
   
   
   運行以後在瀏覽打開http://localhost:8081，顯示以下頁面則表示建立成功
   

2.在vue項目中引入bootstrap和jQuery

1. 在項目根目錄下的package.json文件中添加bootstrap和jquery依賴,行在webstorm命令行中運行npm install或cnpm install安裝依賴包

   

2. 在main.js中導入jquery和bootstrap
   
   此時刷新瀏覽器顯示jQuery還未引入成功，還須要使用內置插件ProvidePlugin自動加載模塊
   
3. 需在build/webpack.base.conf.js中增長插件配置

   
   再在配置中添加：

   
   此時項目中就能夠使用jQuery和Bootstrap了

3. 使用bootstrap建立表格組件

1. 在components文件夾下新建.vue文件，文件的基本結構以下，也能夠以此做爲.vue文件的模板

<template>
    
</template>

<script>
    export default {
        name: "${NAME}"
    }
</script>

<style scoped>

</style>

1. 在script標籤中預先定義要顯示在表格中的數據

data() {
      return {
        books: [
          {id: 1, name: '紅樓夢', author: '曹雪芹', price: 32},
          {id: 2, name: '水滸傳', author: '施耐庵', price: 30},
          {id: 3, name: '三國演義', author: '羅貫中', price: 24},
          {id: 4, name: '西遊記', author: '吳承恩', price: 20}
        ]
      }
    }

2.在template標籤中引用bootstrap和數據定義表格

<div id="table">
    <table class="table table-striped  table-bordered">
      <thead>
      <tr>
        <td>序號</td>
        <td>書名</td>
        <td>做者</td>
        <td>價格</td>
      </tr>
      </thead>
      <tbody>
      <tr v-for="book in books">
        <td>{{ book.id }}</td>
        <td>{{ book.name }}</td>
        <td>{{ book.author }}</td>
        <td>{{ book.price }}</td>
      </tr>
      </tbody>
    </table>
  </div>

3.在main.js中引入組件，並將組件填充到Vue實例中

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
//導入jquery和bootstrap
import 'jquery/dist/jquery.min'
import 'bootstrap/dist/js/bootstrap.min.js'
import 'bootstrap/dist/css/bootstrap.min.css'
import myTable from './components/MyTable'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  components: { App,myTable },
  template: '<myTable/>'
})

4.稍微調整樣式後，瀏覽器顯示結果如圖：