vue-cli入门（三）——人员管理实例

前言

在开始开发实例前，应首先了解一下vue-cli的项目结构。接着我们一起来实现一个小demo——人员管理，功能简单，通过这个实例让大家熟悉使用vue-cli开发项目的一些操作，加深对vue-cli项目结构的印象。

实例功能简述

人员管理项目，有两个页面，首页和管理页，管理页主要实现一个简单的增删改功能，各个功能如下所示（附github地址）

路由

新增操作

修改操作

删除操作

创建项目

首先第一步，就是创建我们的项目，打开cmd，进入到想要创建项目的目录下，我这里是到d盘的根目录下，然后输入vue init webpack manage，敲回车。

创建项目（1）

创建项目（2）

接着安装依赖包，进入项目，输入npm install

安装依赖包

接着输入npm run dev 运行项目，可以看到浏览器自动打开，显示如下

项目初始显示

项目开发

1.创建首页

因为我做的人员管理项目是wap端的，所以我们首先在主页index.html中加上meta标签

<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">

1.1 新建目录

为方便管理，我们在src文件夹下新建一个views文件夹，用于存放所有的模块组件。

在views文件夹下新建index文件夹，再在index文件夹下新建index.vue作为项目的首页。

新建首页index.vue

1.2 编辑首页index.vue

首页模板

接着在路由配置中引入我们刚创建的首页，并更改一下路由配置

更改路由

打开浏览器，看到更改的内容已经自动渲染

2. 添加底部导航组件

因为底部导航组件是公共组件，在两个页面都有引用，所以我们把它建在components文件夹下，命名为footer.vue。

底部导航组件页面内容

div的fixed样式写在了公共样式public.css里面，并在App.vue中引入，作用域设为全局

公共样式public.css

引入外部css

对这个页面主要讲两点：

（1）<router-link>

可以看到footer.vue使用了<router-link>标签，该标签主要实现跳转链接功能，属性to='/'即是跳转到path为'/'的路径（即我们在路由配置中定义的Index路由）

（2）scoped

在<style>标签上添加scoped，声明作用域，样式效果只在该页面内生效，不污染全局。

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去访问

增加/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对象。这一点官网也有说明vuejs官网——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属性

查看效果

到这里，我们也就实现了一个具有增删改功能的小demo。

我再把本例中用到的重要的知识点简单梳理一遍

1.每一个单文件组件.vue通常都是由三部分构成template、style、script（为什么说通常，因为也可以只有模板template，不写任何样式和功能，但大多数组件都会有自己的样式和功能）。其中style有2个点，第一，可以引用外部样式，第二，作用域scoped。

2.单文件组件的引用，需要先在script中用import引用（同时命名）格式为

import [命名] from [相对路径]

再用components:{ [命名] }局部注册

最后在模板中使用，注意命名格式。如果是驼峰HeadNav或headNav，使用时就是<head-nav>

3.多使用vue指令，常用的有v-show，v-if，v-on，v-bind，v-model