vue-element-admin是一个vue开源框架,可以很方便的进行前端开发。
搭建框架
# 复制项目
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
注意
Windows 用户若安装不成功,很大概率是node-sass
安装失败,解决方案。
另外因为 node-sass
是依赖 python
环境的,如果你之前没有安装和配置过的话,需要自行查看一下相关安装教程。
npm install 后报错
可以看到提示没有找到python2。
添加路由
编辑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,详细内容见书本。