俗话说，纸上学来终觉浅，绝知此事要躬行，最近两天学习了下 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 运行之后在浏览打开 http://localhost:8081，显示如下页面则表示创建成功
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 文件的模板
<template>
</template>
<script>
export default {
name: “${NAME}”
}
</script>
<style scoped>
</style>
在 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. 稍微调整样式后，浏览器显示结果如图：