VUE2的单页运用框架有人分享了，多页运用框架也有人分享了，这里分享一个单页+多页的夹杂运用框架吧，node.js写了一个简朴的mock效劳也集成在里面，团体初现雏形，另有许多须要优化和改良的处所。。。
项目构造
│
├─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 /* 开辟东西设置 */
├─── index.html /* 大众模板文件 */
├─── package.json /* 包形貌文件 */
└─── postcss.config.js /* postcss相干插件设置 */项目简介
一个集 多页运用 + 单页运用 的夹杂项目框架。
适用于重要进口页面天生多页，子页面和次要页面运用单页情势的项目。
手艺栈
项目打包申明
- npm模块(vue、vuex之类)打包成一个零丁的js文件
- 大众组件和大众函数打包成一个零丁的js文件
- 单页和多页，都按页面打包，即每一个页面组件都打包成零丁的js文件，按需加载
- 大众款式和各页面款式均各自打包成零丁的css文件
怎样设置多页?
“多页面”依据增加一个简朴的进口文件(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模板。
一切页面默许运用项目根目次下的 /index.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
mock数据效劳
概述
- 一切mock文件直接放在
./api目次的根目次下。(不支撑子目次,可自行修正mock-server.js来完成) - mock文件名必需和接口文件名一致，才能将要求接口婚配上mock文件。
- mock文件能够是
.js文件或.jso文件，假如对统一接口离别创建了js和json两个mock文件，会优先取js文件的数据。 - json文件用来寄存牢固的mock数据，而js文件可越发自在的处置惩罚并返回mock数据。
- 修正api目次下的mock文件后，无需重启node效劳，从新挪用接口会返回新的数据。
启动mock效劳
有两种体式格局：
1、实行敕令 npm start 启动当前项目时，会自动启动mock效劳（此为默许体式格局，在package.json中设置）。
$ npm start2、手动实行node效劳文件 ./mock/mock-server.js
$ node ./mock/mock-server.js项目中运用mock接口
在设置文件 /build/webpack.dev.conf 中，运用webpack插件 webpack-dev-server 的代办属性 (proxy) ，将接口效劳器转发到mock效劳器。
mock效劳器吸收到转发过来的要求后，截取URL要求途径中的接口名，再用API接口的名字去婚配 ./mock/api 目次下的mock文件名，
终究返回mock文件中的数据。
mock文件定名划定规矩
mock文件名必需和接口文件名一致
例1：
假如接口为 “/service/user/getUserInfo”
则mock数据文件名为 “getUserInfo.js” 或许 “getUserInfo.json”
例2：
假如接口为 “/service/user/getUserInfo.do”
则mock数据文件名为 “getUserInfo.do.js” 或许 “getUserInfo.do.json”
mock文件编写划定规矩
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: {}
}
}
末了，框架源码地点：https://github.com/ahbool/vue-mix-pages，迎接 +Star
demo很烂，将就着看吧 !-_-
在运用过程中假如发明有待优化的处所或许好的发起，迎接提出。。。
