.
├── build                                       // 使用 vue-cli 2.9.3(有修正)
├── config                                      // 使用 vue-cli 2.9.3(有修正)
├── server                                      // 服务端(koa,nodejs)
│    ├── lib                                    //     库
│    ├── controller                             //     控制器
│    ├── router                                 //     路由(koa-router,或者在前端用vue-router)
│    ├── service                                //     数据(api)
│    ├── view                                   //     视图
│    ├── server.js                              //     服务器入口
├── dist                                        // 生产目录
├── mock                                        // 模拟数据目录
├── public                                      // 公共资源
│    ├── images                                 //     图片
│    └── vendor                                 //     第三方插件
├── web                                         // 前端(vue,js,css...)
│    ├── component                              //     组件
│    ├── lib                                    //     库
│    ├── locale                                 //     多语言文件
│    ├── page                                   //     页面(目录下的每个文件夹都应是一个应用)
│    ├── style                                  //     样式(应用样式)
│    ├── webpack.entry.conf.js                  //     webpack入口配置文件
│    ├── webpack.dev.conf.js                    //     webpack开发模式配置文件
│    └── webpack.pord.conf.js                   //     webpack生产模式配置文件
│   config.yml                                  //     通用配置文件,整个脚手架很多功能都与它有关

安装

import exampleService from '../../service/example/example';

const index = async (ctx, _next) => {
    let locals = {
        title: 'example'
    };
    //appName开发模式下不会加载生产后的css
    ctx.state.appName = 'example';
    await ctx.render('page/example', locals);
};

const list = async (ctx, _next) => {
    const service = new exampleService(ctx);
    let locals = {
        list: service.getList()
    };
    ctx.body = locals;
};

module.exports = {
    index,
    list
};

3.新建应用视图

• {{#extend "layout-example"}}         //使用layout-example布局
      {{#content "head"}}
          {{{parseUrl 'example.css'}}} //exmaple应用的css,直接引用
      {{/content}}                     //不需要新建,build时会抽取vue的style成独立的文件.否则生产模式看不到样式.
      {{#content "body"}}
          <div id="app"></div>
          {{{parseUrl 'example.js'}}}  //exmaple应用的js(相应webpack.entry)
      {{/content}}
  {{/extend}}
  
  

  /server/view/layout/**.hbs 以文件名注册为handlebars partial.

  引用:

• handlebars(模板引擎)

handlebars-layouts(模板引擎布局helpers)

parseUrl

解析url, handlebars自定义helpers.根据当前开发环境返回正确的url.

• /web/page/example/index.js

import Vue from 'vue';
import axios from 'axios';
Vue.prototype.$http = axios;
import exampleApp from './example.vue';
//公共资源样式
import '../../../public/style/common.scss';
$(document).ready(function(){
    new Vue({
        el: '#app',
        template: '<exampleApp/>',
        components: {exampleApp}
    });
});

module.exports ={
    header: './web/lib/header/index.js', //全局头部通用文件
    footer: './web/lib/footer/index.js', //全局底部通用文件
};

module.exports ={
    entry: {
        example: './web/page/example/index.js'
    },
    //devtool: '#cheap-module-eval-source-map'
    ...
};

module.exports ={
    ...
    new ManifestPlugin({
        publicPath: 'http://localhost:3333/example'
    })
    ...
};

...
#多语言路由前缀
locales: ['zh', 'en'[,.]]
#webpack构建路径(entry)
buildPath:
     -
       name: './web/locale'
...

window.locale = {
    'desc': 'vue koa 多页应用脚手架'
};

window.locale = {
    'desc': 'vue koa scaffold'
};

getLocale('desc')

...
# 是否使用模拟数据api(production模式无效)
isMockAPI : true
# apiServer api服务器
apiServer : 'http://localhost:3334'
...

<script src="/public/vendor/mockjs/dist/mock-min.js"></script><script src="/public/mock.js"></script><script src="header.js"></script>

• /public/mock.js

这是个全局受影响的mock文件.

Mock.mock('/example/list', 'post', function () {
    return Mock.mock({
        "list|1-10": [{
            'name': '@cname',
            'imageUrl': 'https://placeholdit.imgix.net/~text?txtsize=50&bg=323232&txtclr=ffffff&txt=150%C3%97300&w=300&h=150',
            'description': '@cname'
        }
        ]
    });
});

...
#webpack构建路径(entry)
buildPath:
    # name 路径
    # isIndexEntry 是否使用index.js作为webpack.entry.
    # isIndexEntry = true
    # './web/page/example/index.js'  --> /dist/static/js/example[chunkhash].js
    # 使用index.js上一级目录名作为打包文件名(example.js).

    # isIndexEntry = false
    # './web/locale/zh.js'           --> /dist/static/js/zh[chunkhash].js
    # 使用当前文件作为打包文件名(zh.js).
     -
       name: './web/page'
       isIndexEntry : 'ture'
     -
       name: './web/locale'
...