使用vue-cli脚手架搭建项目，基本操作步骤前面博客也有，这里就不进行介绍了。把项目框架搭建好，以及上篇json-server搭建好以后，开启两个服务，一个是json-server的服务：localhost:3000，一个是vue项目的服务，端口默认是8080.

先上效果图:

该系统配合bootstrap渲染样式，方便快捷实现效果。在index.html中引入相关链接:

头部放在App.vue中，通过在main.js中使用ES6语法设置:

//main.js:new Vue({  router,  template: `	
    
		 
     		
     	
    
  `}).$mount("#app")

一共需要用到６个vue子组件，分别展开描述，具体描述以注释的形式附在代码旁，方便表达。

1.Customers.vue：主页组件

主页主要展示的是搜索框和信息列表。

2.About.vue：关于我们页面组件

3.Alert.vue：弹框提示组件

4.Add.vue：添加信息组件

5.CustomerDetail.vue：详情信息组件

6.Edit.vue：编辑信息组件

需要用到哪个组件就去创建生成相应的组件，并在main.js中引用，并设置路由，最后附上main.js：

//各个组件的引入import Vue from 'vue'import App from './App'import VueRouter from 'vue-router'import VueResource from 'vue-resource'import Customers from './components/Customers'import About from './components/About'import Add from './components/Add'import CustomerDetails from './components/CustomerDetail'import Edit from './components/Edit'Vue.config.productionTip = false//使用路由和http请求Vue.use(VueRouter)Vue.use(VueResource)//设置路由const router = new VueRouter({	mode:'history',                 //去掉地址的＃	base:__dirname,                	routes:[		{path:"/",component:Customers},		{path:"/about",component:About},		{path:"/add",component:Add},		{path:"/customer/:id",component:CustomerDetails},		{path:"/edit/:id",component:Edit},	]})

最后，就实现了一个简单的后台管理系统，可以添加用户信息，查看详情，编辑和删除对应内容，还可以搜索信息。有时间还会继续完善功能，希望大家多多支持！如果对你有帮助，希望可以给我点赞哦！