Vue开源框架-vue-element-admin-任务列表项目

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

注意

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，详细内容见书本。