看这篇文章的时候，如果知道使用json-server的可以直接看下面内容，若为解除json-server建议先去看看我的另一篇博客

https://blog.csdn.net/qq_40976321/article/details/97486701

创建用户管理系统项目

步骤一：创建vue-cli项目

首先打开我们的终端，切换到自己项目需要存放的文件夹中

输入vue init webpack + 项目名称 创建自己的vue-cli项目，接着配置

切换到自己的项目文件路径中，输入指令npm install下载资源模块，下载好之后输入npm run dev 启动我们的项目，之后使用编辑器打开我们创建的vue-cli的项目，我这里使用的是Webstorm。

 

步骤二：创建需要的组件，安装、配置路由模块

 Ctrl+c 两次进入输入模式，在终端中输入

安装路由模块的指令npm install vue-router –save，之后重新启动项目

 

创建我们需要用到的组件，Customer、about组件 ，之后在main.js中引入组件、配置路由

访问bootStrap官网https://v3.bootcss.com/getting-started/ 在index.html中引入使用bootStarp的cdn，最好三个都一起引入

最后将bootStrap必备的三个SDN应用一起复制过去，保证项目不会出错

https://v3.bootcss.com/getting-started/#download

引入好之后，创建一个导航组件，header-nav的组件，将导航实例模板复制进去

地址：https://v3.bootcss.com/getting-started/

创建一个导航组件header-nav,将复制内容粘贴进去

在App组件中引入使用导航组件

效果展示

步骤三：安装vue-resource库（进行请求访问）

要实现异步加载需要使用到 vue-resource 库。

输入指令安装vue-resource库：npm install vue-resource –save  之后重新启动项目

来到main.js中，我们来配置vue-resource

之后我们就可以到我们的Customers组件中去使用了，测试get请求是否能够成功获取数据

将请求的body数据赋值到数组之中，之后通过循环遍历输出

 

步骤四：创建一个添加用户功能

首先我们创建一个Add组件，用来添加用户，先随便添加一点内容

在main.js中引入组件，并且设置路由

在导航栏中创建一个添加用户的路由

之后重新设计我们的添加组件的内容，样式

创建提交方法，测试能否正常提交

 

this.$router.push({path:'/'});

preventDefault() 方法阻止元素发生默认的行为（例如，当点击提交按钮时阻止对表单的提交）。

 

步骤五：添加弹窗

首先我们需要创建一个弹窗组件Alert

来到BootStrap官网中找到需要用的警告框 https://v3.bootcss.com/components/#alerts

引入组件，注册声明组件

在添加组件中，提交成功跳转之时传递一个query对象

判断是否能够获取到传递的属性值

测试效果

步骤六：添加用户详细组件customerInfo

先创建customerInfo组件，之后在main.js中引入组件，设置路由

添加详情按钮

传递参数，params传参与query传参

params传参和query传参有什么区别：

---用法上

query要用path来引入，params要用name来引入，

接收参数都是类似的，分别是this.$route.query.name和this.$route.params.name。

注意接收参数的时候，已经是$route而不是$router了哦！！

---展示上

       query更加类似于我们ajax中get传参，params则类似于post，

说的再简单一点，前者在浏览器地址栏中显示参数，后者则不显示

--- params是路由的一部分,必须要有。query是拼接在url后面的参数，没有也没关系。

params一旦设置在路由，params就是路由的一部分，如果这个路由有params传参，但是在跳转的时候没有传这个参数，会导致跳转失败或者页面会没有内容。

--- params、query不设置也可以传参，params不设置的时候，刷新页面或者返回参数会丢失，这一点的在上面说过了

效果展示

步骤七：实现编辑和删除功能

首先我们创建三个按钮，实现返回、编辑、删除功能的按钮

效果展示

实现删除功能

效果展示

实现编辑功能

首先创建编辑组件edit,其界面与添加用户界面一致，复制添加组件内容过去就好了，更改一些方法名，方法即可

引入组件，设置路由

但是存在一个问题，就是在更新界面的时候里面并没有给用户信息展示出来

创建一个根据用户id查询信息的方法，在组件加载时调用该方法

效果展示：

步骤八：实现搜索功能

首先对添加组件Add进行优化，同理将编辑Edit组件进行同样操作

实现过滤搜索内容

效果展示：

项目源代码：

链接：https://pan.baidu.com/s/1eVwl7EgunLEs4jWRk7UYSQ

提取码：hvs1

步骤九：扩展升级将axios来替换vue-resource

首先安装我们的axios 输入指令：npm install axios --save-dev

在main.js中引入axios

更换vue-resource,这个是原本的vue-resource版本的

Axios版本的，其中axios使用的是Es6的语法，所以要使用箭头函数，还有axios中存放数据在data中，vue-resource存放数据在body中

更改详情页面customerInfo

更改编辑页面Edit

更改添加页面Add

项目源码axios版本

链接：https://pan.baidu.com/s/1yg1iKRuQ4XD3g22Dp_LWgQ

提取码：waih

对于教程还是有很多不清楚的地方，建议去看看相关的视频教程：

https://ke.qq.com/user/index/index.html#/plan/cid=279700&term_id=100331213