做一个demo来实现增删查改的功能
项目功能简述
人员管理项目：有首页和管理页两个页面。
首页实现页面的跳转功能，管理页实现增删查改的功能。
1.创建项目
用vue-cil创建一个新的项目，项目初始显示
1.1新建目录
我们在src文件下新建一个views文件夹，用于存放所有的模块组件，方便日后修改管理
在views文件夹下新建index文件夹，再在index文件夹下新建index.vue作为项目的首页
1.2编辑首页index.vue
接着在路由中引入我们刚刚创建的首页，并更改一下路由配置
打开浏览器会看到更改的内容已经自动渲染
2.添加底部导航组件
因为底部导航组件是公共组件，在两个页面都有引用，所以我们可以把它建在components文件夹下，命名为footer.vue
底部导航组件页面内容：
这个页面主要讲两点：
（1）<router-link> 可以看到footer.vue页面使用了<router-link>标签，该标签主要实现跳转链接功能，属性to='/'即是跳转到path为’/'的路径（即我们在路由配置中定义的Index路由）
（2）scoped
在<style>标签上添加scoped，声明作用域，样式效果只在该页面内生效，不污染全局。div的fixed样式写在公共样式public.css里面，并在App.vue中引入，作用域设为全局。公共样式写在assets文件夹下，可以新建一个css文件夹，放入public.css
再在App.vue中引入外部css文件
这里代码出错并解决方案：
热更新报错 log.error(’[WDS] Errors while compiling. Reload prevented.’)
WDS其实是webpack-dev-serverwebpack的意思，用来实现自动刷新的。但你在Vue组件进行频繁刷新时，如果没有安装Webpack，虽然页面可以正常显示，但是控制台会在你每次刷新时就报错。
解决：在开发目录下安装Webpack，命令为npm install webpack-dev-server --save-dev即可，安装完成之后会在node_modules/bin下找到。此时重新打开工程，命令为：cnpm run dev，即可解决热更新报错问题。
3.在首页中引入底部导航组件
刚刚创建了footer.vue还未引入，在首页模块views/index/index.vue中引入该组件
使用组件步骤：
（1）引入组件： import FooterNav from '../../components/footer.vue'
（2）局部注册：注意写在export default内部，components:{FooterNav}
（3）使用组件： <footer-nav></footer-nav> ，注意命名，驼峰法定义的组件FooterNav需在使用时用短横线连接<footer-nav>
再回到浏览器，可以看到首页已经有底部导航了
4.创建人员管理页面
4.1创建页面
同样的，人员管理可以算是另外一个模块，所以我们在src/views/新建一个文件夹manage，再在manage文件夹下新建index.vue
同样在管理页面引入底部导航栏组件footer.vue
现在管理页面创建完成，但还需要在路由配置中引入才可以通过路由/manage去访问
接下来可以去浏览器检验两个路由之间的跳转
4.2为底部导航绑定class
可以看到由于没有给底部导航设置active状态的样式，切换起来不是很明显，所以我们可以给底部导航绑定class值在首页使用<foot-nav>时绑定class类名isIndex
这里使用v-bind指令来绑定class，第一个属性为class名字，第二个属性为布尔值，为true，则表示该组件有这个class，为false则没有。所以，当访问首页模块时，底部导航有一个类名isIndex，我们可以在底部导航内部为isIndex设置样式。
同样的，也在管理页面manage.vue为底部导航绑定class isManage。
另外还需注意一点，data在组件内部得写为一个函数，通过return返回数据值，这是因为组件之间是共享的，但是要保证它们各自的数据是私有，互不影响的，所以要给每个组件返回新的data对象。
返回浏览器查看，绑定的class已经生效。
4.3编写功能
前面管理页面把姓名列表写死了，为了实现增删查改的功能，接下来我们通过数据模拟来实现列表渲染
定义数据
（1）在data函数下新增peoples数组
（2）渲染列表
列表渲染用v-for指令，item为自定义的名字，指向数组中的每一个个体，peoples为我们在data函数中定义的数组名字，模板渲染采用{{ }}
返回浏览器查看效果
4.3.1新增功能
控制输入框显示与隐藏
我们先将新增人员输入框隐藏，当点击“新增”按钮时再显示，要实现这个功能我们需要用到条件渲染。
首先用到了v-show指令，showAdd是一个布尔值，为true则渲染，为false则隐藏
v-show指令与v-if指令的区别就在于，前者一开始就加载，更适用于频繁的切换，后者需首先判断布尔值，为true才加载渲染
同时我们给按钮增加一个点击事件（v-on是绑定事件指令），用于控制showAdd的值从而控制输入框div的隐藏与显示
vue中方法用methods:{}包裹，里面的add(){}也等同于add:function(){}
新增事件
给输入框双向绑定其输入的数据，给输入区域的“确定”按钮绑定一个事件去获取输入框输入的数据并保存进数组。
v-model指令是双向绑定，一般用于表单组件
当输入框的值改变，其绑定的nameValue跟着改变
同理，当绑定的nameValue值改变，输入框的值也跟着改变
我们这里还做了判断，如果什么都不输，或输入空格就弹出提示，只有当输入的值不为空时再保存
4.3.2删除功能
删除功能有一个重点，我们得获取列表的index索引值，来判断到底删除哪一个值
更改一下列表循环，加入索引，并将索引值绑定到td标签上，通过event点击事件去获取td标签上的id，从而去删除索引值为id的值
4.3.3编辑功能
首先新建编辑输入区域，通过点击“编辑”控制其渲染。
当点击“编辑”字样时，触发edit事件，edit事件主要控制showEdit为true，让编辑输入区域渲染出来，同时还获取td标签上的id值，保存到一个变量editId中。
同样也给编辑输入框双向绑定一个值newName。
当点击“确定”按钮时，触发editName事件，editName事件首先获取editId的值以及input绑定的newName值，再更改索引值为editId的name属性
