1.copy files(复制文件夹) 2.run ->cd current position（切换到当前位置） 3.npm install /cnpm install 4.npmrundev 整个环境搭建过程如下 http://blog.qianduanchina.cn/post/596c5bb27838a71273eb4da3 1.下载node js node安装过程如下： 解决node-v不是内部命令 在用户变量里面设置PATH:C:UsersAdministratorAppDataRoaming pm 并且在系统变量中设置PATH :C:Program Files odejs 遇到vue不是可用命令检查文件是否对应如下图 打开cmd 输入下面这行命令 npm install --global vue-cli 新建一个文件夹放项目地址并更改到你新建的文件夹的当前路径 Vue init webpack firstvue(文件夹名你随变起) 环境搭建好之后每次打开项目记得npm run dev 2.安装json和resource和router npm install vue-router --save npm install vue-resource –save 上面两句话同这句话 npm install vue-router vue-resource --save npm install json-server --save 1.了解jsonplaceholder是什么 Github 官网：https://github.com/typicode/jsonplaceholder 测试数据官网 http://jsonplaceholder.typicode.com/ 2.了解json-server是什么 官网地址：https://www.npmjs.com/package/json-server 3.全局安装json-server npm install -g json-server 4.初始化依赖安装.json文件 Npm init/npm init-yes 5.新建一个文件夹切换到文件夹地址.安装如下一直显示默认就ok 6.初始化package.json之后需要去安装json-server Npm install json-server –save 7.安装完之后需要打开package.json文件夹需要将原来的文件改一下 原来文件： 改成现在的 8.新建一个以db.json命名的文件夹（你取的db.json 文件夹名字来源于上述watch后面的db.json） 数据部分截图 9.Npm run json:server 出现如下图即为配置好 根据地址去查找出对应的数据比如 http://localhost:3000/users/1可找出name为曽都的学生 10.请将下列的查找信息用地址拼接找出来 参考网址：https://www.npmjs.com/package/json-server 1.获取所有的学校信息 http://localhost:3000/schools 2.获取学校id为1的信息 http://localhost:3000/schools/1 3.获取所有学校id为1的学生信息 http://localhost:3000/users?schoolId=1 http://localhost:3000/schools/1/users 4.获取学生年龄为18并且school为1的学生 http://localhost:3000/users?age=18&schoolid=1 5.获取学校的描述为mechanicalschool的学校信息 6.http://localhost:3000/schools?sDescription=mechanicalschool http://localhost:3000/schools?sDescription=mechanicalschool 7.获取学校的描述为electricalschool和socialschool的学校信息 8.http://localhost:3000/schools?sDescription=socialschool&sDescription=electrical school 9.获取学校信息第一页且只展示两条信息 http://localhost:3000/schools?_page=1&_limit=2 http://localhost:3000/users?_page=10等同于下面这句话 http://localhost:3000/users?_page=10&_limit=10 10.将所有的学生年龄信息按照升序排列 http://localhost:3000/users?_sort=age&_order=asc 11.获取所以大于等于年龄18岁学生的信息 http://localhost:3000/users?age_gte=18 12.获取年龄在20-22岁的学生信息 13.http://localhost:3000/users?age_gte=20&age_lte=22 gte 大于(gt)等于 lte 小于(lt)等于等于eq 不等于ne equal/ not equal/ greater than/ less than/ less than or equal/ great than or equal/ 11.Remote数据(将jsonplaceholder里面的数据搭建到本地服务器) 后面加上这样这样一段代码 "json:server:remote":"json-server http://jsonplaceholder.typicode.com/db" 12.开启remoteserver npmrunjson:server:remote 出现下图说明安装好了 利用前两天学的知识新建一个项目如下 点击关于我们正确显示关于我们页面 tr <td></td> postman 1.查询，用$http.get获取用户信息 配置好各路由 用tr去for循环得到的数据 2.添加，用$http.post添加用户表单信息 1.注意submit去提交时会去做很多验证事件，所以需要阻止默认时间 e.preventDefault() 2.新建一个空数组用来v-model存储界面输入的用户信息 v-model和v-bind 的区别 一般建议是表单控件用v-model 添加用户 3.Alert组件 判断是否输入用户名电话邮箱代码 4.详情展示 新建一个vue文件在mainjs里面引入路径 在studentInfo.vue中加上按钮注意绑定表达式要用v-bind ,并且有字符串时需要‘’ Details页面 5.编辑和删除 删除：在studentInfo里面加上编辑和删除按钮 删除代码 编辑代码： 6.整体效果截图 利用filter实现搜索功能 1.html代码 <input type="text" class="form-control" placeholder="搜索" v-model="filterInput"/> 2.data里面加上filterInput字段 3.在tr for循环中不再循环用户数据，而是根据用方法实现根据各种条件循环 4.实现filterByUser方法