历时一个月，从开始学习vue到能用vue开发一个简单的系统，以下是开发这个系统的简单报告。

所用的技术：

git：管理代码的开发node.js:vue.js运行环境vue3.0：最新版本vue-cli3.0：脚手架最新版本，支持图形化操作webstorm：代码编辑器

项目新增插件：

vue-cli-plugin-element:element UI库

项目新增的依赖：

运行依赖：echarts：画图工具，画统计图用的element-uivue-table-with=tree-grid:树状结构的UI库开发依赖：less、less-loader：使css样式只在当前组件里生效

eslinttr我新增禁止检查的命令：

'indent': 0,'quotes': 0,'quote-props': 0,'no-unused-vars': 0

对时间显示的处理

// originVal：单位需要是毫秒Vue.filter('dateFormat', function(originVal) {const dt = new Date(originVal)const y = dt.getFullYear()const m = (dt.getMonth() + 1 + '').padStart(2, '0')const d = (dt.getDate() + '').padStart(2, '0')const hh = (dt.getHours() + '').padStart(2, '0')const mm = (dt.getMinutes() + '').padStart(2, '0')const ss = (dt.getSeconds() + '').padStart(2, '0')return `${y}-${m}-${d} ${hh}:${mm}:${ss}`})

路由的设计

routes: [{ path: '/', redirect: '/login' },{ path: '/login', component: Login },{path: '/home',component: Home,redirect: '/welcome',children: [{ path: '/welcome', component: Welcome },{ path: '/users', component: Users },{ path: '/rights', component: Rights },{ path: '/roles', component: Roles },{ path: '/cate', component: Cate },{ path: '/params', component: Params },{ path: '/goods', component: GoodsList },{ path: '/goods/add', component: Add },{ path: '/orders', component: Order },{ path: '/reports', component: Report }]}]

系统展示：