基于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的电商后台管理系统---前端

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

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

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • window10蓝屏终止代码system service_win10蓝屏driverpowerstatefailure

    window10蓝屏终止代码system service_win10蓝屏driverpowerstatefailureWindows10蓝屏代码:SYSTEM_SERVICE_EXCEPTION排查及解决方案问题描述win10正常使用过程中,出现蓝屏,蓝屏代码为SYSTEM_SERVICE_EXCEPTION,出现时间或时机没有明显规律,但最近两次出现均是在电脑待机睡眠后重新唤醒时。电脑配置环境如下其中:内存为阿斯加特32GB300051°灰套条解决方案因最近出现时机为睡眠唤醒中,考虑与主板芯片组驱动及睡眠机制有关,故重新安装系统[可选]:如条件允许,重新安装系统是最好的解决方案,可以基本排除掉系

  • pycharm 2021.11.3 激活码[最新免费获取][通俗易懂]

    (pycharm 2021.11.3 激活码)好多小伙伴总是说激活码老是失效,太麻烦,关注/收藏全栈君太难教程,2021永久激活的方法等着你。IntelliJ2021最新激活注册码,破解教程可免费永久激活,亲测有效,下面是详细链接哦~https://javaforall.cn/100143.html1M3Q9SD5XW-eyJsaWNlbnNlSWQi…

  • 10分钟入门 – 微信小程序开发

    10分钟入门 – 微信小程序开发注册微信小程序如果你还没有微信公众平台的账号,请先进入微信公众平台首页,点击“立即注册”按钮进行注册。注册的账号类型可以是订阅号、服务号、小程序以及企业微信,我们选择“小程序”即可。接着填写账号信息,需要注意的是,填写的邮箱必须是未被微信公众平台注册、未被个人微信号绑定的邮箱,而且每个邮箱仅能申请一个小程序。激活邮箱之后,选择主体类型为“个人类型”,并按要求登记主体信息。主体信息提…

  • python deepcopy_python中的深拷贝(deepcopy)和浅拷贝(copy)介绍及代码参考「建议收藏」

    python deepcopy_python中的深拷贝(deepcopy)和浅拷贝(copy)介绍及代码参考「建议收藏」在python中,对象赋值实际上是对象的引用。当创建一个对象,然后把它赋给另一个变量的时候,python并没有拷贝这个对象,而只是拷贝了这个对象的引用。以下分两个思路来分别理解浅拷贝和深拷贝:(1)利用切片操作和工厂方法list方法拷贝(2)利用copy中的deepcopy方法进行拷贝1、利用切片操作和工厂方法list方法拷贝代码场景:有一个小伙jack,tom通过切片操作拷贝jack,anny通…

  • javascript undefined_setvalidator

    javascript undefined_setvalidator解决DvaJS在models中的effects无法setInterval和setTimout的问题

  • Java链表应用

    Java链表应用链表类publicclassListNode{intval;ListNodenext=null;ListNode(intval){this.val=val;}}1、返回倒数第k个结点前后指针法需要考虑k大于链表长度的情况publicclassSolution{publicL…

发表回复

您的电子邮箱地址不会被公开。

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