基於Vue3.0的電商後臺管理系統---前端

歷時一個月，從開始學習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 }
      ]
    }
  ]

 

系統展示：