1.目录结构
├── app\
│ ├── controller //解析用户的输入，处理后返回相应的结果(控制层)\
│ │ ├── test\
│ │ │ └── test.js\
│ ├── middleware //中间件配置\
│ ├── router.js //定义 URL 路由规则\
│ ├── view \
│ │ ├── home\
│ │ │ └── home.js // 服务器编译的jsbundle文件\
│ │ └── layout // 用于根据指定的layout生成对应的html页面, 用于服务器渲染失败时,采用客户端渲染\
│ │ └── layout.html\
│ └── web // 前端工程目录\
│ ├── asset // 存放公共js,css资源\
│ ├── framework // 前端公共库和第三方库\
│ │ ├── untils //公共js方法\
│ │ │ └── untils.js \
│ │ └── vue // 与vue相关的公开代码\
│ │ ├── app.js // 前后端调用入口, 默认引入componet/directive/filter\
│ │ ├── component.js // 组件入口, 可以增加component目录,类似下面的directive\
│ │ ├── directive // directive 目录,存放各种directive组件\
│ │ ├── directive.js // directive引用入口\
│ │ └── filter.js // filter引用入口\
│ ├── page // 前端页面和webpack构建目录, 也就是webpack打包配置entryDir\
│ │ ├── home // 每个页面遵循目录名, js文件名, less文件名, vue文件名相同\
│ │ │ ├── home.less\
│ │ │ ├── home.vue\
│ │ │ ├── images // 页面自有图片,公共图片和css放到asset下面\
│ │ │ └── components // 页面自有组件,公共组件放到web/component下面\
│ └── component // 公共业务组件\
│ │ └── layout // header、footer和内容区\
│ │ │ └──header.vue \
│ │ │ ├── footer.vue\
│ │ │ ├── content.vue\
├── build // webpack 自定义配置入口, 会与默认配置进行合并\
│ ├── base\
│ │ └── index.js // 公共配置\
│ ├── client // 客户端webpack编译配置\
│ │ ├── dev.js\
│ │ ├── prod.js\
│ │ └── index.js\
│ ├── server // 业务逻辑封装的server层\
├── config //多环境配置（当指定env时会同时加载默认配置和对应的配置文件），可使用app.config获取到相应环境下的配置\
│ ├── config.default.js //默认配置（所有环境都会加载这个配置文件）\
│ ├── config.local.js //本地配置\
│ ├── config.prod.js //线上配置\
│ ├── config.test.js //测试配置\
│ └── plugin.js\
├── public // webpack编译目录结构, render文件查找目录\
│ ├── manifest.json // 资源依赖表\
│ ├── static\
│ │ ├── css\
│ │ │ ├── home\
│ │ │ │ ├── home.07012d33.css\
│ └── vendor.js // 生成的公共打包库
2.功能实现
2.1多页面服务端渲染
2.1.1多页面前端渲染
在app/web/page 目录下面创建home目录, home.vue 文件
