element-plus vite创建项目

青柠2022年7月13日大约 3 分钟约 965 字

完整项目地址：xhwy-v3-ts-elementplus

前言

项目所用技术栈

vue3.2 setup 语法糖 + typescript + element Plus + vue-router4 + vuex4

api

目前该模板的 api 文件当中只存放了用于登录验证的两个文件

layout

模板使用的布局组件都在这里

布局内容主要由 3 部分组成，侧边栏，顶部，页面内容

appMain 用于页面内容切换
menuBar 侧边栏
logoBar logo 图片和文字
tabBar 顶部 tab 栏
headerBar 顶部

router

路由信息存放位置，可以按照个人需求更改路由模板，个人建议最多不要超过三级菜单，影响用户体验，本模板都是二级菜单

这里使用的是静态路由，如何根据自己的项目使用动态路由请看系列二

本项目路由信息

  {
    path: '/login',
    component: () => import('@/views/login/Login.vue'),
  },
  {
    path: '/',
    redirect: '/index',
    name: 'Index',
    component: Layout,
    meta: {
      title: '首页',
      icon: 'house',
    },
    children: [
      {
        path: 'index',
        name: 'Index',
        component: () => import('@/views/index/Index.vue'),
        meta: {
          title: '首页',
          icon: 'house',
        },
      },
    ],
  },
  {
    path: '/user',
    redirect: '/user/manger',
    name: 'User',
    component: Layout,
    meta: {
      title: '用户管理',
      affix: true,
      icon: 'UserFilled',
    },
    children: [
      {
        path: 'manger',
        name: 'UserManger',
        component: () => import('@/views/user/User.vue'),
        meta: {
          title: '用户管理',
          icon: 'UserFilled',
        },
      },
    ],
  },
  {
    path: '/stores',
    redirect: '/stores/Location',
    name: 'storesLocation',
    component: Layout,
    meta: {
      title: '门店管理',
      icon: 'LocationInformation',
    },
    children: [
      {
        path: 'Location',
        name: 'storesLocation',
        component: () => import('@/views/storesLocation/StoresLocation.vue'),
        meta: {
          title: '门店管理',
          icon: 'LocationInformation',
        },
      },
    ],
  },
  {
    path: '/order',
    name: 'Order',
    component: Layout,
    meta: {
      title: '订单管理',
      icon: 'Notebook',
      roles: ['admin', 'editor'],
    },
    children: [
      {
        path: 'orderQuery',
        name: 'orderQuery',
        component: () => import('@/views/orders/OrderQuery.vue'),
        meta: {
          title: '订单查询',
          icon: 'Notification',
        },
      },
      {
        path: 'orderAction',
        name: 'orderAction',
        component: () => import('@/views/orders/OrderAction.vue'),
        meta: {
          title: '订单处理',
          icon: 'Money',
        },
      },
    ],
  },
  {
    path: '/good',
    name: 'good',
    component: Layout,
    meta: {
      title: '商品管理',
      icon: 'TakeawayBox',
    },
    children: [
      {
        path: 'category',
        name: 'category',
        component: () => import('@/views/goods/Goods.vue'),
        meta: {
          title: '商品种类',
          icon: 'ShoppingBag',
        },
      },
      {
        path: 'goodQuery',
        name: 'goodQuery',
        component: () => import('@/views/goods/Category.vue'),
        meta: {
          title: '商品查询',
          icon: 'SoldOut',
        },
      },
    ],
  },
  {
    path: '/system',
    name: 'system',
    component: Layout,
    meta: {
      title: 'system',
      icon: 'Wallet',
      roles: ['admin', 'editor'],
    },
    children: [
      {
        path: 'account',
        name: 'account',
        component: () => import('@/views/system/Account.vue'),
        meta: {
          title: 'account',
          icon: 'User',
          roles: ['editor'],
        },
      },
      {
        path: 'group',
        name: 'group',
        component: () => import('@/views/system/Group.vue'),
        meta: {
          title: 'group',
          icon: 'Refrigerator',
          roles: ['admin'],
        },
      },
      {
        path: 'task',
        name: 'task',
        component: () => import('@/views/system/Task.vue'),
        meta: {
          title: 'account',
          icon: 'Clock',
          roles: ['editor'],
        },
      },
      {
        path: 'Setting',
        name: 'Setting',
        component: () => import('@/views/system/Setting.vue'),
        meta: {
          title: '系统设置',
          icon: 'Setting',
          roles: ['admin'],
        },
      },
    ],
  }

store

封装好的 vuex

讲一下为什么有 modules 文件夹，项目里会有好多 vuex 状态，如果都写在 store 文件夹下的 index.ts 中，看起来会杂乱无章，都不知道哪个 vuex 的状态是哪个模块中使用的，所以就有了 modules 文件夹

该模板的 modeles 文件夹中存放的是用于登录和 tab 的状态

另外，本模板是使用 ts 开发的所以该文件夹下还有一个 type.ts 的文件，用于初始化定义用户和 tab 的类型

使用 js 开发可忽略

styles

该文件夹下存放了 vite 中添加的全局变量

variables.scss

/* Variables */
// Base color
$blue: #324157;
$light-blue: #3a71a8;
$red: #c03639;
$pink: #e65d6e;
$green: #30b08f;
$tiffany: #4ab7bd;
$yellow: #fec171;
$panGreen: #30b08f;
// Sidebar
$sideBarWidth: 300px;
$subMenuBg: #1f2d3d;
$subMenuHover: #001528;
$subMenuActiveText: #f4f4f5;
$menuBg: rgb(50, 65, 87);
$menuText: #162b64;
$menuActiveText: #435ebe; // Also see settings.sidebarTextTheme
// Login page
$lightGray: #eee;
$darkGray: #889aa4;
$loginBg: #2d3a4b;
$loginCursorColor: #fff;

这就是该项目的全局样式，为了方便统一管理修改

我们需要引入全局使用

在 vite 中进行配置，该模板已经配置完成，在后续开发中，如果有想要全局使用的 css 可以配置在该文件中

utils

该模板中写入的全局公用方法目前只有一个 isMObile 用于判断当前设备是否为移动端设备，用于在移动端登录时折叠菜单

export const isMobile = (): boolean => {
  let flag = navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)
  if (flag === null) {
    return false
  } else {
    return true
  }
}

也可在其他项目中使用

views

该文件夹下存放的是菜单下的页面，主要留给二次开发页面

页面和菜单路由是一一对应的，如果修改页面，记得修改路由信息