html5加vue架构,GitHub - acthtml/vgg: vue的SPA框架，允许以插件的形式来扩展框架本身。...

vgg

vgg是根据vue技术栈的最佳实践总结而来的技术架构，它能以插件的形式扩展框架本身。支持单页面应用

的服务端和客户端渲染。

架构如下：

|--------------------|

| vgg + vgg-plugin-* |

|--------------------|

| egg-vgg |

|--------------------|

| eggjs |

|--------------------|

**重要：**我们基于egg-vgg可快速开始开发。

1. 文件目录结构

- api api service层

- modules api对应的接口模块

- user.js

- index.js api实例扩展

- common 通用资源

- context vue上下文，这里的资源会绑定到vue原型，允许你以this.$的形式访问。

- filter vue filter

- directive vue directive

- plugins vue plugin

- utils vgg.utils工具库

- commponents 全局组件

- index.js

- config 配置

- config.default.js

- config.local.js

- config.stage.js

- config.prod.js

- plugin.json 插件配置

- plugins 插件约定存放文件夹

- plugin_a

- router 路由

- router.js router实例扩展

- routes.js 路由注册

- store vuex store

- modules store对应命名空间的模块

- user.js

- index.js vuex实例扩展

- views 单页面应用视图层

- home.vue

- app.template.html 服务端渲染基础html

- app.vue 根组件

- pages 多页面应用视图层

- page_a.vue

- app.js 根实例扩展

从目录结构我们可以看出，框架分为如下几个重要的部分：

配置(config)

通用vue资源(common和commponents)

store

api服务层

路由系统

插件系统

2. 环境与配置

根据当前的环境读取对于的配置，运行环境配置参考eggjs运行环境。

配置上的约定也跟eggjs一致，即config.default.js为默认配置，环境配置覆盖默认配置，覆盖采用

_.defaultsDeep方式。

通过vgg.env获取当前环境，vgg.config获取当前配置。

// config/config.default.js

export default {

auth: {

enabled: false,

mod: 'sso'

}

}

// config/config.local.js

export default {

auth: {

enabled: true

}

}

// 当在本地开发环境(local)时

vgg.config.auth.enabled === true;

vgg.config.auth.mod === 'sso';

3. 通用vue资源

框架支持几种vue资源全局性的注入，分别是：

组件(componetns)

上下文(common/context)

vue的过滤器、指令、插件

工具类库(utils)

只要按照约定，框架会自动注入你配置的资源。

3.1 组件(components)

在components/index.js中声明组件，key为组件名称，value为需要引入的组件。

// components

import MyApp from './app.vue';

export default {

MyHeader: () => import('./header.vue'),

MyApp

}

// 也可以使用辅助函数来自动添加前缀。

let components = vgg.utils.prefix('My', {

Header: () => import('./header.vue'),

App: () => import('./app.vue')

});

export default components;

3.2 上下文(common/context)

在common/context/index.js中声明上下文，key为上下文名称，value为上下文创建函数。

// common/context/index.js

import axios from 'axios';

export default {

/**

* 创建一个axios实例，并注入上下文。

* @param {[type]} appContext koa app context，是服务端返回的上下文。

* @param {[type]} context 注入好的上下文。

* @return {[type]} 上下文对应的内容。

*/

http: (appContext, context) => {

return axios.create();

}

}

注入好之后，你能在其他appContext中使用，例如appContext.http，或则在组件中以this.$http来

访问。

框架内置的上下文有：cookies, http, logger。

3.3 vue的过滤器、指令、插件

分别对应这些文件夹：common/filter、common/directive、common/plugin。

这3类资源跟context的声明方式类似，在各自文件夹下的index.js中声明，key为资源名称，value为

创建方法，最终都会交给Vue来进行全局性的注入：

// 对于filter

Vue.filter(key, filters[key]);

// 对于directive

Vue.directive(key, directives[key]);

// 对于plugin

Vue.use(plugins[key]);

3.4 工具类库(common/utils)

全局性的工具类库，注入到vgg.utils中。

// 在`common/utils/index.js`中进行注入对应的方法。

export default {

now(){return new Date()}

}

// 其他地方使用

import vgg from 'vgg';

vgg.utils.now();

4. store

store是vuex的实现，文章和架构参考。

4.1 创建store module

在文件夹store/modules中创建模块，创建之后，即可使用store.register对模块进行注册，文件

命名采用snake_case规则。

// 创建store模块

// store/modules/my_book.js

export default (namespace, appContext) => {

return {

namespaced: !!namespace,

state(){

return {}

},

// getters,

// mutations,

// actions

}

}

4.2 使用store module

要使用模块，先要使用store.register()进行模块注册。注册的本质是获取对应的store模块，调用

store.registerModule()注册到对应的命名空间中。

// 某某组件：my_component.vue

export default {

async asyncData({store}){

// 注册模块到指定命名空间上

// store.register(namespace, modulepath, ...args)

// 向命名空间example/some添加模块example/some

store.register('example/some', 'example/some');

// 该语句有个简写

store.register('example/some');

},

created(){

this.$store.register('example/some')

},

methods: {

...mapState('example/some', ['some'])

}

}

store.register(namespace[, modulepath[, ...args]])

store.unregister(namespace)

store.isRegistered(namespace)

store.once(type, namespace, name[, ...args])

store.ensure(type, namespace, name)

store.has(type, namespace, name)

store.try(type, namespace, name, ...args)

注意点

如果模块需要在组件beforeCreate生命周期(包含beforeCreate)前使用，那么这个模块需要在路由

组件的asyncData中注入。参考服务器端数据预取

5. api服务层

类似于service层，用于跟后端进行数据交互。

5.1 api的创建

api在文件夹api/modules中创建，创建后可在组件、store中使用，文件名采用snake_case规范。

// 创建api book。

// 文件：api/modules/book.js

// 整个模块的默认格式为如下，其函数返回内容即为这个api的可使用接口。

export default (http, api, logger) => {

return {

async getList(){

return http( /* ...do some http request */)

},

async getDetail(){

return http( /* ...do some http request */)

}

}

}

5.2 api的使用

在store中，api被注入到上下文appContext中。

export default (namespace, appContext) => {

const {api} = appContext;

return {

// ....

// 某某store

actions: {

async init(){

let data = await api('book').getList();

}

}

}

}

在组件中可通过$api这个对象访问：

// 某某组件中

export default {

methods: {

async init(){

let data = await this.$api('book').getList();

}

},

// 但在asyncData方法中，因为组件还没有实例化，所以通过参数进行注入了。

async asyncData({api}){

let data = await api('book').getList();

}

}

6. 路由

路由是基于vue-router实现的，在router/routes.js

中添加路由，配置同vue-router。

在config的router属性中配置路由初始化属性，配置项参考

通过hook系统可扩展router实例本身：

hook router.alter

hook router.onError

hook router.beforeEach

hook router.afterEach

7. 插件

框架通过插件来扩展自身，可以扩展框架的所有内容。

7.1 使用插件

在文件夹config/plugin.js中来声明要使用的插件。

// config/plugin.js

export default {

// 命名空间。(插件的命名空间，使用的时候，因为技术限制，不能自定义命名空间。命名空间是由插件作者指定好的。)

pluginA: {

// 对应插件的包名称或相对地址。例如'./plugin/plugin_a'

package: 'plugin-a',

// 默认注入组件。关闭之后需要手动注入，这样有助于减少打包体积。

components: true,

// 默认注入路由。关闭之后需要手动注入，这样有助于减少打包体积。

routes: true

},

// 当components和routes都是需要注入时，配置可以简写：

// pluginA: 'plugin-a'

}

引入其他插件的资源：import('$pluginA/foo/bar')。这样就是找根目录是插件pluginA，文件

相对地址是./foo/bar的模块。

使用插件的api和store:

// api

this.$api('myapi', 'pluginA');

// store

this.$store.register('pluginA/user', '$pluginA/user');

// 等同于

this.$store.register('$pluginA/user');

7.2 创建插件

@todo