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 /* 开发工具配置 */
├─── 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 start
2、手动执行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很烂,将就着看吧 !-_-
在使用过程中如果发现有待优化的地方或者好的建议,欢迎提出。。。