Vuexpress

Vuexpress 是一个小型的应用框架，用于快速构建 Web App 项目。

Vuexpress 基于Express(4) + Vue(2) + Vuex + Vue Router，内置了构建 Web App 常用的工具和组件。

Vuexpress 目前没有提供编译后的版本，需要调用方自行编译

快速上手

Server

import vuexpress from 'vuexpress/node'
import routes from './routes'
import webpackConfig from '../webpack.conf.js'
import path from 'path'
 
const app = vuexpress()
 
app.set('port', '3333')
app.set('webpack', webpackConfig)
app.set('views', path.resolve(__dirname, 'views'))
 
app.router(routes)
 
app.start()

Client

import vuexpress from 'vuexpress'
import modules from './store'
import routes from './views'
 
const app = vuexpress()
 
app.store(modules)
 
app.router({
  mode: 'history',
  routes: routes,
  beforeEach(to, from, next) {
    next()
  }
})
 
app.start()

API - Server

Vuexpress 全局方法

vuexpress()

创建一个 Vuexpress 实例

const app = vuexpress()

http(options, callback)

发起XHR请求，默认支持 Callback 模式，如果调用 then() 方法，会转入 Promise 模式。Promise 模式下，Callback 函数不会触发。此方法支持全局配置，并会对 application/json 响应类型的数据进行 JSON.parse

// Callback 模式
const xhr = http({
  url: 'http://',
  method: 'get',
  headers: {},
  data: {},
  timeout: 0,
  formdata: false
}, callback)
 
// Promise 模式
xhr.then()
 
// 中止请求
xhr.abort()

Vuexpress 实例方法

app.set(key, value)

同 Express app.set()

• port 端口号
• views 模板目录，Vuexpress 默认使用 Pug 模板引擎
• webpack Webpack 配置文件，用于开发环境

app.use()

同 Express app.use()

app.static(rootPath)

将 /static 路径设置为静态目录

app.router(routes, middlewares)

简化的的 Router 管理，支持自定义中间件

app.router([
  {
    path // 请求路径，支持正则表达式和字符串
    method // 请求类型，支持 `all`
    formdata // 是否支持 formdata 请求类型
    transport // 请求回调函数
  }
])

Vuexpress 内置了 proxy 中间件，用于快速转发 http 请求

app.router([
  {
    path // 请求路径，支持正则表达式和字符串
    method // 请求类型，支持 `all`
    formdata // 是否支持 formdata 请求类型
    transport // 请求回调函数
    proxy: {
      url // 转发目标路径
      prefilter // 对请求数据进行预处理
      convert // 对请求结果进行处理
    }
  }
], ['proxy'])

自定义中间件

export default function (route, routeSet) {
 
  return function (req, res, next) {
    ...
  }
 
}

app.on(eventName, handler)

同 Express app.on

app.start()

启动一个 Server

API - Client

样式

Vuexpress 内部使用 Stylus 预处理器，集成了 Nib 的部分功能，提供了一些全局样式和实用函数

Vuexpress 建议在 750px 下 1rem = 100px

函数

• debug 开启布局高亮，用于样式调试
• font-face(filename) 自定义字体，传入不带后缀的字体文件路径，Vuexpress 会默认添加 woff 后缀

自动修复

• 自动添加 webkit 浏览器前缀
• 修复 flex 浏览器兼容性

全局样式

• [data-icon]:before 合体字ICON支持，读取 data-icon 属性值

全局函数

vuexpress()

创建一个 Vuexpress 实例

const app = vuexpress()

http(options, callback)

发起XHR请求，默认支持 Callback 模式，如果调用 then() 方法，会转入 Promise 模式。Promise 模式下，Callback 函数不会触发。此方法支持全局配置，并会对 application/json 响应类型的数据进行 JSON.parse

// Callback 模式
const xhr = http({
  url: 'http://',
  method: 'get',
  headers: {},
  data: {},
  timeout: 0,
  formdata: false
}, callback)
 
// Promise 模式
xhr.then()
 
// 中止请求
xhr.abort()
 
// 全局配置选项
http.setup(options)

Vuexpress 实例方法

app.set(key, value)

自定义配置

dock 配置 Dock 栏

app.set('dock', [
  {
    label: 'home',
    icon: 'home',
    path: '/home'
  },
  {
    label: 'user',
    icon: 'profile'
    path: '/user'
  }
])

app.store(modules)

创建 Vuex store 对象，如果忽略参数会返回之前创建的 store 对象， Vuexpress 强制开启 namespace，并且提供了一对默认的 mutation 和 action，称作 update

const app = vuexpress()
// 创建 Vuex store 对象
app.store({
  user: userModule
})
// 访问之前创建的 Vuex store 对象
app.store().state....

app.router(options)

创建 Vue router 实例，beforeEach()、beforeResolve、afterEach()三个钩子可以作为参数参数

const app = vuexpress()
// 创建 Vue router 实例
app.router({
 mode: 'history',
 beforeEach() {} // 同 router.beforeEach(func)
})
// 访问之前创建的 Vue router 实例
app.router().push...

plugin(factory)

同 Vue.use()

app.plugin(Vue => {
  ...
})

Vuexpress 不推荐直接操作 Vue 对象，请尽量使用 plugin()

app.on(eventName, handler)

监听程序生命周期钩子事件，包含但不局限于 beforeCreate、created、beforeMount、mounted

app.on('mounted', () => {
  ...
})

app.start()

创建一个 Vue 实例以启动程序

Vue 组件内方法

$http(options, callback)

同全局 http 方法

License

Licensed under the MIT license