俗话说，纸上学来终觉浅，绝知此事要躬行，最近两天学习了下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和bootstrapimport ‘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.稍微调整样式后，浏览器显示结果如图：