单页面架构升级版

单页面架构升级

使用手册

还需要做的事情：
pc 新增的功能都还未做命令删除，需要后续加上
优化pc架构，新增功能， 大家有什么好的想法，好的建议可以提出
移动架构需要搭建完善，命令配置功能

构建项目

1、全局安装脚手架

• npm install -g wlg-cli-temp

2、初始化项目

• 1、ff2 init

• 2、选择架构

  • PC
  • Mobile 移动应用还未完善，能简单使用

• 3、输入项目名称

• 4、输入项目简介

• 5、输入作者名称

• 6、选择配置功能

  • Breadcrumb (添加面包屑)
  • SwitchEnvironment (添加切换环境按钮)
  • HeaderSearch (添加菜单搜索)
  • New（添加菜单new！标志)
  • UnifiedLogin (接入统一登入)
  • GameShow (添加展示游戏平台)
  • NavBarMenu（导航栏显示一级目录)

• 7、会自动运行项目

  • npm run dev:mock 带mock数据运行项目

3、脚手架命令

• ff2 -h

  • init|i 初始化项目
  • addNew|addN 添加菜单new！标志
  • add [options] [name] 添加集合,name可选可配
  • addBreadcrumb|addB 添加面包屑
  • addHeaderSearch|addH 添加菜单搜索
  • addSwitchEnvironment|addS 添加切换环境按钮
  • addUnifiedLogin|addU 接入统一登入
  • addGameShow|addG 添加展示游戏平台
  • updateLayout|upL 修改layout布局
  • addNavBarMenu|addNBM 添加导航栏显示一级目录
  • addNewEnvironment|addENV 添加新环境
  • addTagsView|addT 添加导航标签
  • deleteNavBarMenu|delNBM 删除导航栏显示一级目录
  • deleteTagsViews|delT 删除导航标签
  • addTemp|temp 初始化模板文件，里面选择模板
  • sentry|s 接入sentry
  • qiankun|qk 接入微前端
  • list|l 查看命令说明
  • help [command] display help for command
  • 1、详细信息可以使用-h来展示 例如：ff2 add -h
  • 2、这里面命令包含的PC和Mobile，如果是Mobile会标注说明，未标注的是PC。PC和Mobile命令会对其校验

4、需要注意的问题

• 脚手架生成的项目，一般初始化就要配置好。layout 里面的东西最好不要去修改，不然会导致命令添加某些功能会失败。如果失败了，请按提示看是否改动文件。如果一定要修改layout 里面的东西，最好后续不要使用命令行添加功能，如不清楚可咨询。

自动路由插件

1、安装插件

• npm i ff-auto-route

2、使用插件

• 修改vue.config.js

  • const autoRouter = require('ff-auto-router/lib/router-webpack-plugin')

configureWebpack(config) {
config.plugins = [
...config.plugins,
// eslint-disable-next-line new-cap
new autoRouter({
pages: 'src/views/autoRouter',
importPrefix: '@/views/autoRouter',
routePath: 'src/router/routes.js'
})
]
}

• 页面配置

  • meta: {
    title: '系统管理',
    icon: 'form',
    redirect: '/system/user',
    permissionArray: [1, 2, 3],
    sortIndex: 1,
    newTime: '2022-05-20'
    }

• 创建目录

  • 自动路由目录创建在src/views/autoRouter中

  • 注意事项：

    • 1、如果菜单只有一级菜单，没有子菜单 可以建一个目录下建index.vue 例如：user/index.vue 或者 user.vue
    • 2、如果菜单下有二级菜单或以上， 可以建二级目录，父目录下建立_layout.vue ， _layout.vue的目录是为了展示父菜单信息，以及在三级菜单时，需要配置 例如：system/user/index.vue 和system/_layout.vue
    • 3、如果在自动路由文件里面部分.vue 文件不想生成路由，可以在该目录下新建common目录。插件中已做过滤处理。
    • 4、排序问题，开发阶段可以先不管排序功能，等开发完以后统一排序。在后续需要插入功能时，为了不修改每个页面排序，提供了使用小数排序。例如： 1，2，3，4 在1，2之间插入一个功能，可以写1.1-1.9。 （这个排序，暂时还没想到更好的办法）。

mock数据

项目使用的mock数据是用node+koa简单搭建的一个服务。

• 启动mock服务 npm run mock 或 npm run dev:mock

如果有正式服务，不需要mock数据时 可以使用 npm run dev

项目使用mock接入方式

• npm i ff-koa
• import myKoa from 'ff-koa/lib/mock.js' const router = myKoa.router
  router可以自己定义接口名，数据返回
• 默认端口是9000，可自行添加其他端口

说明：

• 1、接入统一登入，登录接口是正式服务器，但由于获取用户信息接口是mock的，所以登入成功之后设置的token是mock的token。接入正式环境，需要改过来。代码有注释。
• 2、如果不使用mock服务，那需要修改permission.js 里面获取用户信息的接口

公共组件

预览效果

文档地址

说明：文档地址可以查看属性，方法。但不要直接复制代码。如果需要复制代码最好去git库里面查看。

公共函数

文档地址

请求服务

请求方式与上一版的有所不同。

• 接口配置url只需要在api.js 和apiURL.js配置
• 如果需要扩展自定义请求方法可以在request.js定义
• 请求返回的数据格式，判断成功失败的参数不同的话，需要在server.js里面配置

项目中的其他配置项

1、修改全局颜色配置

• styles/variables.scss

2、全局filters

• filters/index.js

3、图片配置

• assets

4、svg配置

• icons/svg

5、本地储存信息

• utils/auth.js

6、项目名称配置

• utils/get-page-title.js

XMind - Trial Version