npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

framework4js

v2.3.10

Published

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

Downloads

9

Readme

Framework4Js [ES6+]

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

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

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

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

Tips

使用方法

  • 当您在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 函数库