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:\Users\Administrator\AppData\Roaming\npm
并且在系统变量中设置PATH :C:\Program Files\nodejs



遇到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方法