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.稍微调整样式后，浏览器显示结果如图：