《京东E维》基于VUE+Webpack的单页面实践

本篇文章和大家聊一聊我们近期的项目——京东E维平台,这是一个专门为运维工程师设计的工单处理系统。它所要肩负的任务是,针对公司内部所有员工在办公时遇到的有关计算机、网络、软件方面等问题,通过E维平台发起问题上报请求。工程师通过该系统可以根据上报工单的紧急程度进行抢单、解决事件单、流转事件单、退回请求广场、挂起事件单等操作,这个系统一定程度上起到了提高办公效率的作用。 在与产品和研发沟通过后,我们发现,这个项目基本上所有交互部分都放在前端这里,研发只提供接口,可以做到前后端分离。因此经过小组讨论后,决定用 Vue 去实现。基于京东 E 维平台视觉稿的统一性,且页面较少,关联性较强,加上之前在会员PLUS项目中使用 Vue + Webpack 的经验教训,对该项目我们决定尝试着用vue的单页面开发模式进行开发。 初试Vue单文件组件开发页面,我们遇到了一些问题,也总结了一些经验,以下是我们的一些总结 (下图为界面总览): 请求广场页面: 我的事件页面: 事件单详情页: 本篇文章适合具有 Vue 和 webpack 基础的同学,里面的具体配置和vue用法并未写的过于详细。 Vue+Webpack 单页面的文档结构与构建方法 项目构建的目录结构如下: 先和大家介绍下我们的思路,进入项目的第一层,是src文件夹以及各种配置文件。 接下来src目录下的文件功能如下: ♦  component 用来存放功能组件 ♦  css 存放所有样式文件 ♦  image 用于存放图片 ♦  view 存放业务上的各个单文件 vue 页面组件 ♦  app.js 是入口文件 ♦  app.vue 渲染最高级路由匹配到的组件用的出口 vue 文件 ♦  index.html 页面模板 ♦  router.js 为配置各种跳转信息的路由文件 1、首先是 package.json […]

© 2017 JDC. All Rights Reserved.