一键生成基于Vue3+Webpack5开箱即用的管理台

乐潇游
1,997 阅读6分钟

互联网时代，形形色色的H5应用、小程序……各种C端B端业务都少不了中后台管理系统，市面上有antd、iview等各种UI框架组件库，但是一个管理台往往涉及到公司统一的登录、权限管理、统一的请求处理、数据管理、自动化测试、甚至还有国际化等场景，如果从零搭建，这些都是我们需要考虑的，但是这些其实是和业务解耦的，所以本着以后再次创建管理台时不想复制粘贴，于是选用了新鲜出炉的Fes.js 2.0来构建。

关于Fes.js

Fes.js是基于最新 Vue3 + webpack5 的前端应用框架，通过插件化提供了统一的布局、登录、权限管理、Vuex、国际化等能力，关于fes.js更多了解可以参考官方文档。话不多说，下面就来带你从零搭建一个开箱即用的中后台管理系统。

准备

首先确保本地Node版本是12.0.0以上（也别12了，都1202年了，秦朝都灭亡了，升级最新吧）~

如果你喜欢用yarn，那就用以下三部曲：

1.创建模板

yarn create @fesjs/fes-app fes-demo

根据自己的需求选择创建PC或H5项目，创建完项目后cd到刚刚创建的目录：cd fes-demo，然后继续下一步。

2.安装依赖

yarn

3.运行开发环境

yarn dev

如果你喜欢用npm（你怕毛），那就用以下三部曲：

# 创建模板
npx @fesjs/create-fes-app fes-demo

# 安装依赖
npm install

# 运行
npm run dev

初见

执行完以上操作之后，在浏览器访问：http://127.0.0.1:8080， 我们就可以看到初始的系统界面了，如下图：

fes-demo-init

开干

新建页面

接下来我们试着新建几个页面，在pages目录下新建以下目录和文件：

├─pages
│  ├─order
|  	  └─ list.vue
|     └─ detail.vue
│  └─product
|     └─ list.vue

fes会根据我们的目录结构自动生成Vue的routes，如果想知道生成的路由具体结构可以在src\.fes\core\routes\routes.js 文件中查看。

页面配置

页面新建之后，我们来配置一下页面的name及title等相关信息，这里我们以pages/product/list.vue 文件为例，代码如下：

// src/pages/product/list.vue

<template>
	<div>...</div>
</template>
<config>
{
    "name": "productManage",
    "title": "产品管理"
}
</config>
<script>
import { ref, reactive, toRaw } from 'vue';
...
</script>

配置菜单和权限

页面配置好了之后，在根目录的.fes.js文件中配置一下菜单和权限，.fes.js 文件为项目基础配置文件，详情可参考官网文档，这里我们修改内容如下：

export default {
    ... // 其他配置略
    access: {
        roles: {
            superAdmin: ["/", "/product/list", "/order/list", "/order/detail"],
            admin: ["/", "/product/list"]
        }
    },
    layout: {
        ...
        menus: [
            {
                name: 'index'
            },
            {
                name: 'productManage'	// 产品管理
            },
            {
                name: 'orderManage',	// 订单管理
                title: '订单管理',
                children: [
                    {
                        name: 'orderList'	// 订单列表
                    }
                ]
            }
        ]
    }
    ...
};

可以看到，这里我们设置了两个角色，超级管理员（superAdmin）和普通管理员（admin），超级管理员比普通管理员可以访问更多的页面，在页面渲染前通过setRole这个方法设定角色为superAdmin（超级管理员），这里参考app.js的代码如下：

import { access } from '@fesjs/fes';

export const beforeRender = {
    loading: <PageLoading />,
    action() {
        const { setRole } = access;
        return new Promise((resolve) => {
            setTimeout(() => {
                setRole('superAdmin');	// 设定角色
                resolve({
                    userName: 'Hello, World!'
                });
            }, 1000);
        });
    }
};

同时，menus中的name要与页面配置的name相匹配，比如menus中【产品管理】那一项配置的name: 'productManage' 需要和具体页面文件src/pages/product/list.vue文件中<config></config> 的name相匹配。

根据配置好的menus，以及设置对应的权限后我们就可以看到以下界面：

fes-demo-01

到这里我们完成了常见的新建页面、菜单、权限等场景的开发，是不是觉得很简单？

接下来我们简单看看其他一些常见的开发配置场景~

常见配置问题FAQ

1.UI组件库按需加载怎么配？

这里以ant-design-vue 为例，在 .fes.js 中增加如下配置：

export default {
    ...
    extraBabelPlugins: [
        ['import', { libraryName: 'ant-design-vue', libraryDirectory: 'es', style: 'css' }]
    ],
    ...
};

将babel的配置Copy过来就行，简单So easy~

2.HTTP请求怎么玩？

import { request } from '@fesjs/fes';

export default {
    add: (data, option) => request('/api/product/add', data, option),
    getList: (data, option) => request('/api/product/list', data, option)
};

更多玩法可参考request插件文档。

3.统一的请求处理在哪配置？

比如想要对接口相应的数据做统一处理，可以添加responseDataAdaptor这个钩子函数，参数data就是接口返回的报文部分，又比如对接口的code进行统一处理，可以添加errorHandler。

示例：

假如后端返回的JSON数据如下：

{
	"code": "8888",
	"msg": "未登录或登录态过期，请重新登录"
}

那么在app.js中做如下配置：

import { getRouter } from '@fesjs/fes';

export const request = {
    responseDataAdaptor: (data) => {
        // data.code = data.retCode;
        return data;
    },
    errorHandler: {
        8888: (err) => {
            const router = getRouter();
            alert('登录态过期，请重新登录');
            router.push('/account/login');
        }
    }
};

以上配置中8888对应的是接口code字段返回的值，如果接口返回的code字段叫别的名称，比如叫retCode，可以在responseDataAdaptor 进行转换，如：data.code = data.retCode;。

4.支持移动端应用的开发吗？

Fes.js 同时支持 PC 和移动端的开发，同时为 PC 和移动端提供了一些标配的能力。例如 PC 端的布局、权限管理、国际化等；移动端的屏幕适配、1px 问题、hover 态等，相信在初始化应用的时候你已经看到了，PC or H5 任你选~

5.文件引入别名配置

在.fes.js中添加如下配置：

alias: {
    '@common': 'src/common/',
    '@utils': 'src/utils/',
    '@images': 'src/images/',
    '@services': 'src/services/'
}

文件中导入方式：

import xxx from '@/common/xxx.js';

6.换个Logo？

在.fes.js文件中添加Logo字段，换成你的图片路径（可以是一个完整的图片链接）就行了，需要注意的是如果这个Logo是本地的，需要将Logo文件拷贝到public目录下（如果没有，自行在项目根目录建立一个public目录），public目录可以放置一些其他不需要经过webpack打包的文件。

这里在public目录中新建了一个img目录，并将Logo图片放入，那么Logo路径配置如下：

export default {
    ...
    layout: {
        title: 'xx管理系统',
        logo: './img/logo.png',
        ...
    },
    ...
};

最后，如果还想了解更多的开发场景配置，可以自己参考官方文档一点点体验。

结语

经过在一个新的内部管理系统实践fes.js，整体下来感觉还是能够提升很大的开发效率，很多常见的开发场景都可以通过插件化添加，省去自己一点点编码的时间。不过fes 2.0 刚刚新鲜出炉，还有很多的开发场景待支持，希望后续能够出更多的插件，提供更多的能力。

参考链接

avatar
文章
阅读
粉丝