ele-admin-front v1.1.25

前端开发框架使用说明书

目录

1. 框架总览........................................................................................................................................1
2. 框架概述.............................................................................................................................1
3. 框架技术栈.........................................................................................................................2
4. 基础篇............................................................................................................................................2
5. 开发工具配置.....................................................................................................................2
6. 项目搭建.............................................................................................................................3
7. 项目配置说明.....................................................................................................................5
8. 应用篇............................................................................................................................................7
9. Vuex......................................................................................................................................8
10. Vue-router..........................................................................................................................10
11. api 请求..............................................................................................................................13
12. 内置封装...........................................................................................................................14
13. list....................................................................................................................................16
14. form.................................................................................................................................20
15. Utils.....................................................................................................................................23
16. 过滤器...............................................................................................................................26
17. 指令...................................................................................................................................26
18. 框架总览
19. 框 架 概 述

框架基于 vue 体系搭建而成,包括项目构建、依赖管理、开发过程

技术。框架基于 vue-cli 构建，使用 yarn 包管理工具，集成 docker 部署插件，依赖版本默认使用 package.json 中规定版本。

2. 框 架 技 术 栈

• Vue 2.6.11
• Vue-cli 4.5.4
• Vue-router 3.5.1
• Vuex 3.6.2
• Axios 0.21.0
• Node-sass 5.0.0
• Eslint 6.7.2
• Es6-promise 4.2.8

2. 基础篇

此篇章将讲解框架基础性的内容，能支撑普通的 web 项目开发。 内容包括：开发工具配置、项目搭建

1. 开 发 工 具 配 置

为了统一代码格式规范项目中集成了 eslint，推荐使用 VSCode 开发 并保持 VSCode 配置一致，项目开发时请保持 eslint 为开启状态

• VSCode 配置

• 开启 eslint

在 vue.config.js 中设置 lintOnSave : true

2. 项 目 搭 建

• 使用 vue-cli 初始化一个 vue 项目

1. vue create demo

2. 运行 yarn 或 cnpm install 安装依赖
3. yarn add
4. 在 main.js 中引入

import ele-admin-front from 'fosung-front' import 'fosung-front/lib/fosung-front.css'

5. fosung-front 配置

// 引入 elemtntUI

// 此处根据自身项目情况引入 ui 框架可引入 vant 或不引入 import ElementUI from 'element-ui'

import 'element-ui/lib/theme-chalk/index.css

// 页面跳转时的权限验证（函数） 类似 router.beforeEach

import routerBefore from '@/router/routerBefore'

// 创建 fosungFe 实例

const ele-admin-front = new ele-admin-front()

// vuex 配置 ele-admin-front

.addModules(require.context('@/store/', true, /.js$/)) //

// http 配置

ele-admin-front

.httpBuilder()

.api(require.context('@/api/', true, /.js$/))

.error((error) => new Promise((resolve, reject) => {

const Store = window.appContext.storeInstance

if (error.response ? error.response.status === 401 : false) {

const { loginUrl, loginProfile } = Store.getters.configInfo // 本地传 dev,线上环境传 configure 获取到的 loginProfile

const hrefUrl = loginUrl + (process.env.NODE_ENV === 'production' ? l oginProfile : 'dev')

window.location.href = hrefUrl

} else {

reject(error)

}

}))

// router 配置

ele-admin-front

.routerBuilder()

// .whiteList('404', '403', 'error') // 设置白名单 // .menu(menu) // 静态路由传入

.before(routerBefore) // routerBefore 配置

// vue 配置

ele-admin-front

.vueBuilder()

.install(ElementUI, { size: 'mini' }) // 安装第三方插件 .components(require.context('@/components/', true, /.vue$/)) // 注册全局

组件

// 全局构建 ele-admin-front.build()

3. 项 目 配 置 说 明

httpParams()配置：

3. 应用篇

此篇章将讲解框架具体使用的内容，内容包括：vuex 使用、路由

配置、http 接口请求使用，工具函数

1. Vuex

• 框架内置对象

• 新增 vuex 对象

在 src 下新建 store 文件夹，在 store 中新建 js 文件

• 页面中获取 vuex 中的数据

在 vue 生 命 周 期 函 数 同 级 加 入 $stores 关 键 字 并 传 入 一 个 数 组 （Array）或字符串(String)，同时获取多个 vuex 数据使用 Array， Array 中数据为所要获取数据的 key，只获取一个 vuex 数据时使用 String，String 为所要获取数据的 key。然后直接使用 this 关键字点 key 即可

• 页面中修改 vuex 中的数据 this.$store.commit('SAVE_ROLE', role)

与 vue 原生一样使用 commit 修改 vuex 数据 this.$store.commit(参数 1，参数 2)

参数 1：mutations 函数名（String）

参数 2：需要存入的数据

2. Vue-router

• 静态路由配置

import Layout from '@/layout'

const load = require('./import/_import_' + process.env.NODE_ENV) // 静态路由配置示例

const menu= [

{

name: '/',

path: '/',

component: Layout,

redirect: 'dashboard',

children: [

{

name: 'dashboard',

path: 'dashboard',

component: load('view/dashboard/index'),

meta: { title: '首页', icon: 'main-home-page' }

},

{

name: 'list',

path: 'list',

component: load('view/list/index'),

meta: { title: '表单', icon: 'table' },

redirect: 'list1',

children: [

{

name: 'list1',

path: 'list1',

component: load('view/list/index1'), meta: { title: '表单 1' }

}, {

name: 'list2',

path: 'list2',

hidden: true,

component: load('view/list/index2'), meta: { title: '表单 2' }

}

]

}, {

name: 'baidu',

path: 'https://www.baidu.com', meta: { title: '百度', icon: 'link' }

}

]

}

]

export default menu

（注：对应 demo 项目中 src/router/menu.js 文件）

Layout 布局文件，其中包括左侧菜单栏，顶部 header，面包屑 导航,以及内容区域

path:’/’ 项中的子路由（children 中）为菜单展示路由，内容 展示在 Layout 布局文件中的内容区域。

配置项说明：

1. name：路由名称，请保持唯一性（String）
2. path：路由地址（String），当 path 传入的是一个 http 或 https 地址时对应菜单是一个外链，点击会新开窗口访问该地址
3. component：路由指向的文件地址
4. redirect：重定向（String），传入重定向的目标子路由名称
5. hidden：是否在菜单中隐藏（Boolean）,传入 true 该路由在菜 单中不显示
6. meta.title：菜单名称（String）
7. meta.icon：菜单 icon（String）

将 上 述 配 置 中 暴 露 出 来 的 menu 在 main 中 引 入 ， 使 用 ele-admin-front.routerBuilder().menu(menu)传入即可完成静态路由 配置

• 动态路由配置

动 态 从 后 端获 取 路 由 数 据 后 在 前端 生 成 路 由 与 菜 单 栏可 以 通 过 routerBuilder().before()实现， before 中除了 to、form、 next 这 些常用的路由拦截参数以外,还可以通过 window.appContext 获取 到 httpInstance、storeInstance、routerInstance、Utils 等内置对 象的实例，例：

const { storeInstance, Utils } = window.appContext

注意：

目 前 获 取 用 户 信 息 、 配 置 信 息 、 获 取 菜 单 等 已 经 封 装 到 框 架 内 ， 具 体 见 [demo 项 目 ](http://ngit.fosung.com/demo/fosung-front-demo.git)内 的 routerBefore.js** 内使用 因为动态路由逻辑是在路由拦截中完成的，这段代码每次路由跳转都会执行，必须添加判 断保证只有进入项目后第一次通过路由拦截的时候才去动态加载路由，目前我们通过判断

vuex 中是否存在用户信息来完成。

动态路由已在 demo 项目 src/router/routerBefore.js 中完成，请自 行查看

3. api 请 求

• 内置方法：

目前框架内置了$api 和$ajax 两个方法

• vm.$api(apiName, methodName，params) 该方法依赖于框架初始化时， ele-admin-front.httpBuilder().api(context)扫 描 进 来 的 api 文 件夹，apiName 为 api 文件夹内文件名称，文件内代码示例:

export default function (http) {

return {

/**

• 获取配置
• http 为 axios 实例，除 postJson 外还可以使用 axios 的其他方法, 例

如.get()、.post()等

• @return {*}

*/

getConfigure () {

return http.postJson('/api/user/configure')

}

}

}

• vm.$ajax

u Axios 原生请求

• axios 扩展：

框架内部的 http 请求是基于 axios 进行的扩展，除了保留 axios 原有的请求方式外，还扩展了如下请求方式：

postJson(url, params, config)

• axios 请求方式
  • http.postJson('接口 url', data, config)
  • http.post('接口 url', data, config)
  • http.get('接口 url', config)
  • http({url: '接口 url', method: 'get', data, ...config})
• config 常用字段：

除了常配置字段 headers、responseType、responseEncoding 外，扩展了如下字段：

loading，默认 true，控制请求时加载状态是否显示

• get 请求传参方式

1. axios.get('/user?ID=12345')
2. axios.get('/user', {

params: {

ID: 12345

}

})

4. 内 置 封 装

注意：本章节介绍的是基础封装，所有内置封装均继承自基础封装并进行了扩展！

• 内置属性

• 内置方法：(编写顺序按照执行顺序排列)

1. list

注意：使用 list 时必须加上 $plugins: 'page'或 $plugins: 'list'

page 为带分页的列表，list 为无分页

• 列表内置属性：

• 列表内置函数：

2. form

注意：使用 form 时必须加上 $plugins: 'form'

• 表单内置属性

• 表单内置方法

5. Utils

6. 过 滤 器

7. 指 令