# Framework4Js [ES6+]

## Framework-for-js is a better Javascript's framework .

Framework4Js 是一个专为Vue.js开发的一个前端框架。

[适用uni-app/React.js/NG等]

>3.x开始不可平稳升级，请修改入口文件

## Tips

- 更优雅的JavaScript's Framework

- 本项目长期维护

- Nuxt.js [请访问 framework4nuxt](https://www.npmjs.com/package/framework4nuxt)

- 欢迎指正 Thanks.

- 我是SunnyXu xy@ztes.com Hefei China

- [详细文档链接 Document link](http://framework4js.ztes.com/2220290)

- QQ 713001938 Email xy@ztes.com 有问题可以联系我

## 使用方法

- 当您在Vue.js的环境下

- Install

```
npm i framework4js
```

Framework4Js 是一个专为js开发的一个前端框架。适用于Vue.js/React.js/Angular.js/uni-app等。

## Install 安装

```
npm i framework4js
```

## Use 使用

```
// Core Application 核心应用
import Application from "framework4js"
// Structure modules 解构获得各个模块 
import {
        Container,
        Middleware,
        Pipeline, 
        Exception,
        Model,
        Service,
        ServiceProvider,
        Command,
        Transformer,
        Lib,
        Vue2Adapter,
        VuexAdapter,
        AxiosAdapter,
        UniappRequestAdapter
} from 'framework4js';
// Start using 开始使用
import App from 'framework4js';
// Get container instance 得到一个容器实例
const app = App.getInstance();
// Import  Vue.js Family bucket 引入Vue全家桶
import Vue from 'vue';
import Page from '@/App';
import router from '@/router';
// Bind Vue.js [2.x] adapter , You can use Vue.js [3.x] 绑定Vue.js适配器，你亦可自定义Vue.js[3.x]适配器并绑定
app.bindAdapter(Vue2Adapter, Vue);
// Get Vue.js Adapter instance 获得Vue.js适配器实例
const vueAdapter = app.getAdapter(Vue2Adapter);
// Use & Bind VuexAdapter
import Vuex from 'vuex';
vueAdapter.use(Vuex);
app.bindAdapter(VuexAdapter, Vuex);
const store = app.getAdapter(VuexAdapter).getStore();
// How to use ElementUI 如何使用 ElementUI 
import 'element-ui/lib/theme-chalk/index.css';
import './styles/theme/index.css';
import ElementUI from 'element-ui';
// Vue.js Use method Vue.js Use 方法
vueAdapter.use(ElementUI);
// AppConfig is very important AppConfig 是整个框架的核心配置文件
import AppConfig from '@/app/config/AppConfig';
app.setAppConfig(AppConfig);
// set Vue config
vueAdapter.setConfig({ router, store, render:callback=>callback(Page) })
// Vue.js Run 运行Vue.js
vueAdapter.run('#app');
// Uniapp Run Uniapp 运行
// Adaptive Mpvue 适配 Mpvue 注意$mount方法
// vueAdapter.instance().$mount();
// Application Run 运行应用程序
app.run((services) => {
    // Services come from the framework's own providers and custom providers
    // 服务来自于框架自带providers和自定义providers
    vueAdapter.Vue.prototype['$helper'] = services['$helper']();
});
```

## The life cycle of framework 4js framework4js 的生命周期

1. create Registered service providers 注册服务提供者
2. mounted
3. unmounted

## App.getInstance() 获取应用实例的方法

- App.getInstance().version 获取框架版本号

- App.getInstance().setProviders() 设置服务提供者 - 自动注册服务提供者 需在framework的run方法运行前使用

- App.getInstance().registerProvider() 注册服务提供者

- App.getInstance().registerProviders() 批量注册服务提供者

- App.getInstance().setAdapter() 设置适配器

- App.getInstance().getAdapter() 获取适配器实例

- App.getInstance().setAppConfig() 设置APP配置

- App.getInstance().getAppConfig() 获取APP配置

- App.getInstance().run() 运行框架

- App.getInstance().get('$helper') 获取容器中的对象实例 例如获取$helper

## Mark

- Pipeline Class OK 管道

- Middleware Class OK 中间件

- Helper Class OK 助手函数

- ServiceProvider Class OK 服务提供者

- RESTful Class OK 扳手工具 自动替换请求参数和携带默认值

- Exception Class OK 扳手工具 自定义 Exception

- Model Class OK 模型 基于Vuex

- Transformer Class OK 转换器

- Container Class OK 容器

- Lib Class OK 函数库