介绍

R3.js 是什么？

R3.js是一套用于构建用户界面的简单易用的单应用构造器

起步

官方指南假设你已了解关于 HTML、CSS 和 JavaScript 的中级知识以及已经熟练使用vue.js框架。如果你刚开始学习前端开发，可能需要你将框架作为你的第一步可能不是最好的主意——掌握好基础知识再来吧！之前有其它框架的使用经验会有帮助，但这不是必需的。

快速上手

第一步 拉取模版项目 （权限问题联系框架开发人员）

仓库地址：https://gitee.com/bojun_front_end/r3-project-template.git
⚠️：模版项目提供的登陆界面，作为框架内置的登陆界面，如不符合项目需求，可按照自定义界面配置；

第二步 ArkUi使用方式

ArkUi: npm对应的包名为 @syman/ark-ui

⚠️：你需要先安装@syman/ark-ui

🔗ArkUi

⚠️：以下内容为友情提示，具体使用方法以ArkUi官网为主

不设置主题：有两种方式

            为了使项目代码在打包时包体不过大，可尽量将相关依赖使用cdn的方式引入，可达到缩小包体的目的
            1.使用cdn：在html页面内引入
                    使用方式：
                            <link href="https://cdn.jsdelivr.net/npm/@syman/burgeon-r3@1.0.21/r3.publish/r3.min.css" rel="stylesheet">
                            <script src="https://cdn.jsdelivr.net/npm/@syman/burgeon-r3@1.0.21/r3.publish/r3.min.js"></script>
            2.使用npm包：在index.js入口文件引入
                            import arkUI from '@syman/ark-ui';//引入arkUI框架
                            import '@syman/ark-ui/dist/styles/ark-ui.css';  //引入arkUI样式文件
                        友情提示，这种使用npm包的方式，会将框架包和项目包在打包的过程中打到一起，包体会过大，请求时间可能会较长

设置主题：你需要改变使用arkUi的方式

        为了减小包体，js文件依然可以使用cdn的方式引入，在html页面内引入
            1.使用cdn：在html页面内引入

                    使用方式：
                            <script src="https://cdn.jsdelivr.net/npm/@syman/burgeon-r3@1.0.21/r3.publish/r3.min.js"></script>

                            此时css样式文件的引入方式需要一点改变，首先你需要执行
                            npm install @syman/ark-ui  拉取最新的ArkUi包，也可拉取指定版本，根据项目需求
                            ArkUi 对应的npm包安装成功后，你需要在入口文件index.js引入你设置好主题样式的less文件，文件内需要引入  @syman/ark-ui包内的主题文件
                            import '文件路径/custom.less';// 主题文件


            2.使用npm包：在index.js入口文件引入
                            import arkUI from '@syman/ark-ui';//引入arkUI框架
                            import '文件路径/custom.less';// 引入你设置的arkUI主题文件 
                            友情提示，这种使用npm包的方式，会将框架包和项目包在打包的过程中打到一起，包体会过大，请求时间可能会较长

custom.less如何编写？

🔗ArkUi定制主题文档

第三步 R3框架 @syman/burgeon-r3使用方式

R3框架:npm包名为@syman/burgeon-r3

提示：@syman/burgeon-r3依赖以下三方资源包，在使用前请确保项目已经安装了相关依赖。

PackageSemantic VersionPackageSemantic Version
vue^2.6.8vue-router^3.1.2
vuex^3.1.0ark-ui^1.0.58
axios^0.18.0
 
  使用R3框架 有两种方式
            为了使项目代码在打包时包体不过大，可尽量将相关依赖使用cdn的方式引入，可达到缩小包体的目的

            1.使用cdn：在html页面内引入
                    使用方式：

                           <script src="https://cdn.jsdelivr.net/npm/@syman/burgeon-r3@1.0.21/r3.publish/r3.min.js"></script>
                           <link href="https://cdn.jsdelivr.net/npm/@syman/burgeon-r3@1.0.21/r3.publish/r3.min.css" rel="stylesheet">

                    R3框架包的使用名为：R3 ，R3所有抛出的方法在R3.default内
                            R3.default={
                                components: {ContentDisplayArea: {…}, PopDialog: {…}, ComAttachFilter: {…}, DownComponent: {…}, WaterMark: {…}, …}
                                config: {extentionForColumn: Array(18), extentionForTable: Array(19)}
                                deleteFromSessionObject: (e,t)=> {…}
                                getModuleName: ()=> {…}
                                getObjdisType: e=> {…}
                                getSeesionObject: e=>JSON.parse(window.sessionStorage.getItem(e))||{}
                                launchApplication: launchApplication(e){const t={isQualified:!0,message:"xxx"};if(t.isQualified){if(e.externalModules){const t=e.externalModules;e.externalModules=Object.keys(t).reduce((e,n)=> {…}
                                menuClick: (e,t)=> {…}
                                network: {post: ƒ, get: ƒ, axios: ƒ}
                                packageTime: "2020.08.17.11.11"
                                removeSessionObject: e=>{window.sessionStorage.removeItem(e)}
                                router: VueRouter {app: null, apps: Array(0), options: {…}, beforeHooks: Array(1), resolveHooks: Array(0), …}
                                store: Store {_committing: false, _actions: {…}, _actionSubscribers: Array(0), _mutations: {…}, _wrappedGetters: {…}, …}
                                updateSessionObject: (e,{k:t,v:n})=> {…}
                                urlSearchParams: e=> {…}
                                user: "npm"
                                version: "1.0.21"
                            }
                            当你想启动框架时：可在入口文件index.js
                                    R3.default.launchApplication({
                                        对R3框架的设置
                                        ...
                                    })
                            当你想在某个.vue文件内使用框架抛出的方法或者组件：
                                 const { network, urlSearchParams  } = R3.default;


            2.使用npm包：在index.js入口文件引入

                            import arkUI from '@syman/ark-ui';//引入arkUI框架
                            import '@syman/ark-ui/dist/styles/ark-ui.css';  //引入arkUI样式文件
                        友情提示，这种使用npm包的方式，会将框架包和项目包在打包的过程中打到一起，包体会过大，请求时间可能会较长



                         R3框架包的使用名为：根据你导出@syman/burgeon-r3定义的名称 
                           如： import R3 from '@syman/burgeon-r3'   则R3框架包的使用名为R3
                           如： import R4 from '@syman/burgeon-r3'   则R3框架包的使用名为R4

第四步 安装依赖

$ npm install
...这个过程需要一些时间

第五步 配置框架启动参数

🔗具体配置可查看： R3.launchApplication

第六步 配置环境代理

⚠️：你需要先了解webpack配置 模版项目会默认提供一份，可根据项目需求修改

第七步 启动框架

$ npm start

R3 API →