基于Vue3.0的电商后台管理系统—前端

基于Vue3.0的电商后台管理系统—前端历时一个月,从开始学习vue到能用vue开发一个简单的系统,以下是开发这个系统的简单报告。所用的技术:git:管理代码的开发node.js:vue.js运行环境vue3.0:最新版本vue-cli3.0:脚手架最新版本,支持图形化操作webstorm:代码编辑器项目新增插件:vue-cli-plugin-element:elementUI库项目新增的依赖:…

大家好,又见面了,我是你们的朋友全栈君。

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

所用的技术:

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

项目新增插件:

vue-cli-plugin-element:element UI库

项目新增的依赖:

运行依赖:
echarts:画图工具,画统计图用的
element-ui
vue-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 }
      ]
    }
  ]

系统展示:

基于Vue3.0的电商后台管理系统---前端

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/133670.html原文链接:https://javaforall.net

赞 (0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • dom4j 解析 xml

    dom4j 解析 xml

    2022年6月21日
  • 手机端禁止默认长按复制功能[通俗易懂]

    手机端禁止默认长按复制功能[通俗易懂]若要将全部的文字都取消长按复制,只需在css样式中加入如下代码:*{-webkit-touch-callout:none;/*系统默认菜单被禁用*/-webkit-user-select:none;/*webkit浏览器*/-khtml-user-select:none;/*早期浏览器*/-moz-user-select:none;/*火狐*/-ms-use

    2022年9月28日
  • javascript Date format(js日期格式化)

    javascript Date format(js日期格式化)这个很不错,好像是csdn的Meizz写的://对Date的扩展,将Date转化为指定格式的String//月(M)、日(d)、小时(h)、分(m)、秒(s)、季度(q)可以用1-2个占位符,//年(y)可以用1-4个占位符,毫秒(S)只能用1个占位符(是1-3位的数字)//例子://(newDate()).Format(“yyyy-MM-ddhh:mm:ss.S”)==>2006-07-0208:09:04.423//(newDate())

    2022年4月30日
  • dynamic中文_dynamic cast

    dynamic中文_dynamic castC# 反射、与dynamic最佳组合

    2022年4月21日
  • Java走向中国

    Java走向中国             今天,工作之余浏览sun网站的文档中心,惊喜地看到j2se5.0viewchinese!!! 毫不犹豫,先点之而后快。 进入网页: http://gceclub.sun.com.cn/chinese_java_docs.html         虽然只有一个包被翻译了,但不管怎么说,这是一个好的开始!而且更令人高兴的是,这次,j2se5.0版

    2022年7月9日
  • 计算机主机网关的作用是什么?(转 )[通俗易懂]

    计算机主机网关的作用是什么?(转 )[通俗易懂]假设你的名字叫小不点,你住在一个大院子里,你的邻居有很多小伙伴,在门口传达室还有个看大门的李大爷,李大爷就是你的网关。当你想跟院子里的某个小伙伴玩,只要你在院子里大喊一声他的名字,他听到了就会回应你,

    2022年8月4日

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号