vue-element-admin是一个vue开源框架，可以很方便的进行前端开发。

主页：介绍 | vue-element-admin

搭建框架

# 复制项目
git clone -b study https://github.com/five3/vue-element-admin.git
# 进入项目目录
cd vue-element-admin
# 建议不用 cnpm 安装，否则会有各种诡异的bug
npm install --registry=https://registry.npm.taobao.org
# 本地开发，启动项目
npm run dev

启动完成后会自动打开浏览器访问 http://localhost:9527

添加路由

编辑src/router/index.js文件，并在constantRoutes列表中追加一个路由子项即可 

顶层的path指定了当前路由的主路径为/todo，children列表成员中的path指定了该子菜单的路由为index，而子菜单的全路径则为/todo/index。子菜单中的component节点指定了具体要展示的内容页面的路径，后面会为这个路径添加对应的页面。子菜单中的meta节点则用于配置子菜单的相关属性，title用于配置菜单名称，icon用于配置菜单图标。主菜单中的redirect则表示当访问主菜单时，会直接跳转到指定的子菜单页面。

 添加页面

子菜单的component节点指定要展示的页面路径，接下来就要为该路径添加具体的页面内容。示例中设置的路径为@/views/todo/index，这是一个相对于src主目录的路径，因此该页面路径的具体位置为src/views/todo/index。为此需要创建一个路径为src/views/todo的目录，同时在该目录下创建一个名为index.vue的文件，内容如下

＜template＞＜div class="app-container"＞＜h1＞{{ title }}＜/h1＞＜/div＞
＜/template＞
＜script＞
export default {name: 'Todo',data() {return {title: '任务列表'}}
}
＜/script＞

该页面就是任务列表的展示页面，后面将基于该页面添加任务列表的页面元素及元素操作事件。保存好相关修改的文件后，刷新浏览器页面，会发现左侧菜单栏多出一个名为任务列表的菜单，单击该菜单会跳转到上述初始页面。

添加元素

基础页面配置完成后，需要为任务列表设计具体的页面元素。具体而言，需要把任务拆分为当前任务、未完成任务、已完成任务。其中当前任务为当天有效的任务，未完成任务为状态为没有完成的任务，已完成任务为状态为已完成的任务

＜div＞＜el-row :gutter="20"＞＜el-col :span="24" :xs="24"＞＜el-card＞＜el-tabs v-model="activeTab" @tab-click="handleClick"＞＜el-tab-pane label="当前任务" name="current"＞＜/el-tab-pane＞＜el-tab-pane label="未完成" name="unfinish"＞＜/el-tab-pane＞＜el-tab-pane label="已完成" name="finished"＞＜/el-tab-pane＞＜/el-tabs＞＜/el-card＞＜/el-col＞＜/el-row＞
＜/div＞
＜script＞
export default {name: 'Todo',data() {return {activeTab: 'current'}}
}
＜/script＞

示例中的＜el-row＞、＜el-col＞、＜el-card＞、＜el-tabs＞等都是element-ui组件库中提供的标准组件，使用这些组件可以快速地搭建所需的页面元素

添加事件

页面代码中通过@click属性来绑定事件处理函数，还需要在methods对象中定义对应的处理函数对象

export default {name: 'Todo',data() {…},methods: {createTask () {console.log('createTask');},editTask (row) {console.log(row);}}
}
＜/script＞

内容来源：《Python测试开发入门与实践》5.2.4，详细内容见书本。