vue2的单页应用框架有人分享了，多页应用框架也有人分享了，这里就分享一个单页和多页的混合应用框架吧，初现雏形，还有很多需要优化和改善的地方。。。
结尾有github地址。
│ ├─build /* webpack的配置目录 */ │ ├─config.js /* 公共常量，用于配置文件 */ │ ├─utils.js /* 工具函数，用于配置文件 */ │ ├─webpack.base.conf.js /* 公共配置文件 */ │ ├─webpack.dev.conf.js /* 开发环境配置文件 */ │ └─webpack.prod.conf.js /* 生产环境配置文件 */ │ ├──mock /* mock服务和mock数据 */ │ ├─api /* 存放mock数据 */ │ └─mock-server.js /* mock服务 */ │ ├──src /* 项目源码 */ │ │ │ ├─api /* 所有后端接口 */ │ │ ├──index.js │ │ └──product.js │ │ │ ├─assets /* 公共的静态文件 */ │ │ ├─fonts │ │ ├─img │ │ └─style │ │ │ ├─utils /* 业务无关的工具函数 */ │ │ │ ├─common /* 业务相关的公共函数 */ │ │ config.js │ │ http.js │ │ │ ├─components /* 公共组件, 如dialog、loading等 */ │ │ └─navbar │ │ │ ├─pages /* 页面 │ │ │ │ │ ├─index/ 每个页面一个文件夹，当前页面的样式、图片、子组件都存放在自已的文件夹下。 │ │ │ 为了项目结构清晰，一级目录以模块划分，二级目录则为页面目录。 │ │ ├─my/ */ │ │ │ └─order/ │ │ │ │ │ ├─product/ │ │ │ └─list/ │ │ │ │ │ ├─app.vue /* 多页应用的公共入口页面 */ │ │ │ │ │ └─main.js /* 多页应用的公共入口函数 */ │ │ │ ├─router /* 路由配置 */ │ │ router.js │ │ │ └─store /* 状态管理 */ │ │ actions.js │ │ getters.js │ │ index.js │ │ mutation-types.js │ │ mutations.js │ │ │ └─modules │ ├─── .babelrc /* babel配置 */ ├─── .editorconfig /* 开发工具配置 */ ├─── /* 公共模板文件 */ ├─── package.json /* 包描述文件 */ └─── postcss.config.js /* postcss相关插件配置 */
一个集 多页应用 + 单页应用 的混合项目框架。
适用于主要入口页面生成多页，子页面和次要页面使用单页形式的项目。
"多页面"根据添加一个简单的入口文件(entry.js)即可自动生成html页面。
打包时，自动遍历"/src/pages/"目录，查找所有目录下的"entry.js"文件，
每个"entry.js"文件都作为一个单独的打包入口，每个入口生成单独的.html文件
在需要生成单独html页面的目录下新建一个entry.js文件，并引入一个公共的入口js文件 /src/pages/main.js，
给公共入口函数传递一个当前html页面默认要展示的页面组件。
entry.js 入口文件，只需要修改要加载的页面组件即可，比如此例中的 ./list.vue
//导入公共入口文件 (必须) import main from '@/pages/main' //默认加载的页面组件 (必须) import list from './list.vue' //传递一个要展示的页面组件给公共入口函数 (必须) main.init(list)
一个打包入口对应一个html模板。
所有页面默认使用项目根目录下的 / 作为模板。
如果某个页面需要单独的html模板，可在其目录下新建名为 entry.html 的文件，打包时会自动将其识别为当前页面的模板。
注:只有在有入口文件(entry.js)的目录下添加单独的html模板，才有效。
根据 vue-router 插件的路由配置 (./router/router.js) 来生成单页js文件。
每个html页面都是共用的同一个路由配置 (router.js文件) ，因此单页的页面组件可渲染在任意一个html中。
此示例中没有使用 generator函数 和 async/await，所以排除了对应的babel插件，打包文件也小了20几kb，
如果你需要它们，可以在 .babelrc 文件中去掉排除项。
所用插件在package.json文件中可查看，具体插件功能及配置可到插件的npm包主页查看
npm install or yarn install
执行以下命令预览非常简单的demo
//启动 web 开发服务器与 mock 服务器 npm start //构建生产文件 npm run build
我要评论./api 目录的根目录下。(不支持子目录,可自行修改mock-server.js来实现).js 文件或 .jso 文件，如果对同一接口分别创建了js和json两个mock文件，会优先取js文件的数据。有两种方式：
1、执行命令 npm start 启动当前项目时，会自动启动mock服务（此为默认方式，在package.json中配置）。
$ npm start
2、手动执行node服务文件 ./mock/mock-server.js
$ node ./mock/mock-server.js
在配置文件 /build/webpack.dev.conf 中，使用webpack插件 webpack-dev-server 的代理属性 (proxy) ，将接口服务器转发到mock服务器。
mock服务器接收到转发过来的请求后，截取url请求路径中的接口名，再用api接口的名字去匹配 ./mock/api 目录下的mock文件名，
最终返回mock文件中的数据。
mock文件名必须和接口文件名一致
例1：
如果接口为 "/service/user/getuserinfo"
则mock数据文件名为 "getuserinfo.js" 或者 "getuserinfo.json"
例2：
如果接口为 "/service/user/getuserinfo.do"
则mock数据文件名为 "getuserinfo.do.js" 或者 "getuserinfo.do.json"
api接口名.json 文件只支持json格式的数据，例:
{
"code": 1,
"msg": "失败",
"data":{
"age": 520,
"card": 10099
},
"servertime": 1534835882204
}
api接口名.js 文件必须导出一个函数，函数接收两个参数，需在函数中返回mock数据，例：
/*
返回mock数据
@param {object} getdata 接口的get数据
@param {object} postdata 接口的post数据
*/
module.exports = function(getdata, postdata) {
//to do something...
return {
code: 0,
msg: "成功"
data: {}
}
}
最后，框架源码地址：，欢迎 +star
demo很烂，将就着看吧 !-_-
在使用过程中如果发现有待优化的地方或者好的建议，欢迎提出。。。
如对本文有疑问， 点击进行留言回复！！
150Vue-Router路由概述+基本使用router-view占位符+重定向redirect
网友评论