The eva.js from cuulee

eva.js is a complete solution to
building modern webs with Vue.js.

tl;dr

// model
app.model()
// router
app.router()
// bootstrap
app.start()

Play with the JSBin example or the simple webpack example 😀

Table of Contents

Sites using eva.js
Features
Install
Usage
Concepts
API
License

Sites using eva.js

Feel free to add your project here!

vbuild.js.org (source)
vue-play (source)

Features

Battery included, Vue 2 and its friends (Vuex & Vue-Router)
Inspired by the choo framework which is inpired by the elm architecture

Install

$ npm install --save eva.js

In case you may want to use it directly in browser instead, view https://unpkg.com/eva.js/dist/, and add:

<!-- global variable `EVA` is available as a constructor(class) -->
<!-- note that, you should use new EVA.default() to create app instance in browser -->
<script src="/path/to/eva.js"></script>

Usage

import EVA from 'eva.js'

// Create app instance
const app = new EVA()

// A counter model
app.model({
  state: {count: 0},
  mutations: {
    INCREMENT(state) {state.count++}
  }
})

// A home view
const Home = {
  computed: {
    count() {
      return this.$store.state.count
    }
  },
  render(h) {
    return (
      <div>
        <h1>Home</h1>
        <button on-click={() => this.$store.commit('INCREMENT')}>
          {this.count}
        </button>
      </div>
    )
  }
}

// Apply views to relevant routes
// route(path, view, child_routes)
app.router(route => [
  route('/', Home)
])

// Start app
const App = {
  render(h) {
    return (
      <div id="app">
        <router-view></router-view>
      </div>
    )
  }
}
app.start(App, '#app')

Concepts

Models

A model contains it's initial state and the methods you use to update its state, in fact, it's a typical Vuex module too.

Top-level model:

// An app instance only have at most one top-level model
app.model({
  state: {count: 0},
  mutations: {
    INCREMENT(state) {state.count++}
  }
})

Namespaced model:

// An app could have multiple namespaced models
app.model({
  name: 'user',
  state: {login: false},
  mutations: {
    LOG_IN(state) {state.login = true}
  }
})

In most cases using namespaces is beneficial, as having clear boundaries makes it easier to follow logic.

Helpers:

As how you use Vuex^2, you can use its helpers too:

const {mapState, mapActions, mapGetters} = require('eva.js')
// or ES6 modules
import {mapState, mapActions, mapGetters} from 'eva.js'

Router

The router could render the component which matches the URL path. It has a route helper for creating an actual route object used in vue-router. routes are passed in as a nested array.

app.router(route => [
  route('/', Home),
  route('/settings', Settings, [
    route('/profile', SettingsProfile),
    route('/password', SettingsPassword)
  ])
])

The router state is effortlessly synced in vuex store.

Views

A view is a simple Vue component, that easy :)

API

new EVA([options: object])

Create an app instance.

options.mode

The router mode, can be either hash (default) or history.

app.model(model: object)

app.router(handler: function)

app.use(plugin: function, [options: object])

The same as Vue.use, you can apply any Vue plugin.

app.start(instance: object, selector: string)

Mount app to a domNode by given selector.

app.$store

The vuex store instance.

app.$router

The vue-router instance.

Development

# build and watch source files
$ npm run watch

# launch server for simple html example
$ http-server .
# run webpack example
$ npm run webpack

# build for publish to npm
# cjs and umd and compressed umd
$ npm run build

cuulee / eva.js Goto Github PK

eva.js's Introduction