bootstrape实战案例_vue2.0+bootstrap实战（一）

俗话说，纸上学来终觉浅，绝知此事要躬行，最近两天学习了下Vue2.0,想做个项目练下手，顺便写个文章方便复习回顾~

1.使用cue-cli创建vue项目

进入指定目录，右击Git Bash Here打开git命令行，vue init webpack 项目名称，创建基于webpack的vue项目

根据命令行的提示，选择是否安装vue-router,是否添加单元测试等，此处均选择"n",创建一个最基本的项目

项目创建完成后使用webstorm打开(楼主的webstorm中没法创建vue项目，其实上面两步也可以再webstorm中进行操作)，在webstorm命令行中运行npm install或cnpm install安装依赖包

在webstorm中运行npm run dev

运行之后在浏览打开

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

在项目根目录下的package.json文件中添加bootstrap和jquery依赖,行在webstorm命令行中运行npm install或cnpm install安装依赖包

在main.js中导入jquery和bootstrap

此时刷新浏览器显示jQuery还未引入成功，还需要使用内置插件ProvidePlugin自动加载模块

需在build/webpack.base.conf.js中增加插件配置

再在配置中添加：

此时项目中就可以使用jQuery和Bootstrap了

3. 使用bootstrap创建表格组件

在components文件夹下新建.vue文件，文件的基本结构如下，也可以以此作为.vue文件的模板

export default {

name: "${NAME}"

}

在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和数据定义表格

序号书名作者价格

{{ book.id }}{{ book.name }}{{ book.author }}{{ book.price }}

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: ''

})

4.稍微调整样式后，浏览器显示结果如图：