概述

PAI前端脚手架

PAI前端脚手架，是一个可以快速开发业务应用页面的框架，基于最新技术组合（vue + vuex + axios + nuxt + element-ui + paiui），主要目的让开发者注重专注业务，降低技术难度，从而节省人力成本，缩短项目周期。

背景

为了在应用市场快速上线应用，并提供给园区用户/企业用户使用丰富的业务应用，需要利用PAI创建一个工程，该工程则是搭配较完善的技术以及功能模块给开发者使用。

主要特性

• 支持Nginx客户端模式（SPA）运行 与 Node服务端模式（SSR）运行
• 对常用js插件进行二次封装，使js代码变得简洁，更加易维护
• 国际化支持
• 强大的路由功能，支持异步数据
• 路由守卫，鉴权认证
• 使用Pai-ui组件
• 打包/预览WEB/APP小组件
• Axios请求统一处理
• Mock模拟接口请求
• 集成ESLint

技术栈选型

Nuxt.js

• 无需为了路由划分而烦恼；内置了webpack，nuxt 会根据配置打包对应的文件；无需考虑数据传输问题，nuxt 会在模板输出之前异步请求数据（需要引入 axios 库），而且对 vuex 有进一步的封装。

Axios

• 选择axios的原因很简单，它是vue官方推荐的包，并且axios可以运行于浏览器端和服务器端，减少了前端工程师的学习成本。

ElementUI

• elementUI是基于vue的很全面的ui组件库，可以快速开发，快速上线。

PaiUI & PaiSpUI

• PaiUI和PaiSpUI是基于ElementUI进行二次封装的组件库，内置组织架构、OSS上传/预览、图表、Lottie动画、主题化等功能。

版本规格

• docker 镜像
  pai 在构建时使用的docker源镜像版本为 node:14-alpine

• node

  $ node -v
  v14.15.1

• npm

  $ npm -v
  6.14.8