step1 初始化項目

使用vue-cli腳手架，初始化一個vue項目，如果不清楚怎么初始化的，可以參我的文章Vue入門之使用vue-cli初始化項目

step2 安裝jquery

安裝bootstarp之前，要先安裝jquery

npm install jquery --save

image.png

step3 修改配置文件

在webpack.base.conf.js（如果是是開發(fā)[dev]環(huán)境則在webpack.dev.conf.js；兩個文件都在bulid目錄下；請一定注意，我在操作的時候就是找錯了文件，半天都沒有弄對；）中添加如下內(nèi)容：

,
  plugins: [
    new webpack.ProvidePlugin({
      $: "jquery",
      jQuery: "jquery",
      "windows.jQuery": "jquery"
    })
  ]

在main.js文件中添加如下內(nèi)容

import $ from 'jquery'

image.png

step4 安裝Bootstrap

npm install bootstrap --save

image

會有提示run npm audit fix to fix them, or npm audit for details，可選擇修復(fù)，也可以不修復(fù)

在main.js添加如下內(nèi)容

import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap/dist/js/bootstrap.min'

step5 添加完成后，npm run dev

會報如下錯誤，按提示安裝即可

image

npm i --save popper.js

image.png

再npm run dev即可

測試是否安裝成功

• 1 .在componets文件夾下新建文件Product.vue
  
  image.png
• 2.在Product.vue中添加如下代碼

<template>
  <!-- 創(chuàng)建要控制的區(qū)域 -->
  <div id="app">
    <div class="panel panel-primary">
      <div class="panel-heading">
        <h3 class="panel-title">Add Product</h3>
      </div>
      <div class="panel-body form-inline">
        <label>
          Id:
          <input type="text" class="form-control" v-model="id">
        </label>
        
        <label>
          Name:
          <input type="text" class="form-control" v-model="name" @keyup.enter="add">
        </label>
        
        <label>Keywords Search:
          <!-- 注意 ：Vue中所有指令，在調(diào)用的時候，都以v- 開頭-->
          <input type="text" class="form-control" v-model="keywords">
        </label>
        
        <input type="button" value="Add" class="btn btn-primary" @click="add">
      </div>
    </div>

    <table class="table table-hover table-bordered table-striped">
      <thead>
        <tr>
          <th>Id</th>
          <th>Name</th>
          <th>Time</th>
          <th>Operation</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in search(keywords)" :key="item.id">
          <td>{{item.id}}</td>
          <td>{{item.name }}</td>
          <td>{{item.ctime}}</td>
          <td>
            <a href="#" @click.prevent="del(item.id)">Delete</a>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>


<script>
export default {
  name: "Product",
  data() {
    return {
      list: [
        { id: 1, name: "奔馳", ctime: new Date() },
        { id: 2, name: "寶馬", ctime: new Date() }
      ],
      id: "",
      name: "",
      keywords: ""
    };
  },
  methods: {
    add() {
      // vue中已經(jīng)實現(xiàn)了數(shù)據(jù)的雙向綁定，每當(dāng)我們修改了data中的數(shù)據(jù)，Vue會默認(rèn)監(jiān)聽到
      // 數(shù)據(jù)的改動，自動把最新的數(shù)據(jù)，應(yīng)用到頁面上
      this.list.push({ id: this.id, name: this.name, ctime: new Date() });
    },

    del(id) {
      // 根據(jù)Id刪除數(shù)據(jù)
      // this.list.some((item, i) => {
      //     if (item.id == id) {
      //         this.list.splice(i, 1)
      //         // 在數(shù)組的 some 方法中，如果return true ，就會立即終止這個數(shù)組的后續(xù)循環(huán)
      //         return true
      //     }
      // })

      let index = this.list.findIndex(item => {
        if (item.id == id) {
          return true;
        }
      });

      this.list.splice(index, 1);
    },

    search(keywords) {
      var newList = [];
      // this.list.forEach(item => {
      //     if (item.name.indexOf(keywords) != -1) {
      //         newList.push(item)
      //     }
      // });
      // return newList;

      // forEach some fliter findIndex 這些都屬于數(shù)組的新方法，
      // 都會對數(shù)組的每一項，進行遍歷，執(zhí)行相關(guān)的操作
      return this.list.filter(item => {
        //注意:在ES6中，為字符串提供了一個新方法，叫做 String.prototype.includes("要包含的字符串")
        // 如果包含，返回true，反之false
        if (item.name.includes(keywords)) {
          return item;
        }
      });
    }
  }
};
</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>

• 3. 配置路由信息

     
     
     image.png

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'         
import Product from '@/components/Product'   // add

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {                                              
      path: '/product',                    
      name: 'Product',                   
      component: Product           
    }
  ]
})

4. npm run dev,訪問(http://localhost:8080/#/productocal)，看到如下頁面代表引入成功
   
   image