webpack4+vue2+axios+vue-router的多页+单页混合应用框架
2018-09-06 10:59
771 查看
VUE2的单页应用框架有人分享了,多页应用框架也有人分享了,这里就分享一个单页和多页的混合应用框架吧,初现雏形,还有很多需要优化和改善的地方。。。
结尾有github地址。
适用于主要入口页面生成多页,子页面和次要页面使用单页形式的项目。
Vue2.0
Vuex
Vue-Router
Axios
Webpack4
公共组件和公共函数打包成一个单独的js文件
单页和多页,都按页面打包,即每个页面组件都打包成单独的js文件,按需加载
公共样式和各页面样式均各自打包成单独的css文件
打包时,自动遍历"/src/pages/"目录,查找所有目录下的"entry.js"文件,
每个"entry.js"文件都作为一个单独的打包入口,每个入口生成单独的.html文件
给公共入口函数传递一个当前html页面默认要展示的页面组件。
所有页面默认使用项目根目录下的
如果某个页面需要单独的html模板,可在其目录下新建名为
注:只有在有入口文件(entry.js)的目录下添加单独的html模板,才有效。
每个html页面都是共用的同一个路由配置
如果你需要它们,可以在
所用插件在package.json文件中可查看,具体插件功能及配置可到插件的npm包主页查看
mock文件名必须和接口文件名一致,才能将请求接口匹配上mock文件。
mock文件可以是
json文件用来存放固定的mock数据,而js文件可更加自由的处理并返回mock数据。
修改api目录下的mock文件后,无需重启node服务,重新调用接口会返回新的数据。
1、执行命令 npm start 启动当前项目时,会自动启动mock服务(此为默认方式,在package.json中配置)。
2、手动执行node服务文件
mock服务器接收到转发过来的请求后,截取URL请求路径中的接口名,再用API接口的名字去匹配
最终返回mock文件中的数据。
例1:
如果接口为 "/service/user/getUserInfo"
则mock数据文件名为 "getUserInfo.js" 或者 "getUserInfo.json"
例2:
如果接口为 "/service/user/getUserInfo.do"
则mock数据文件名为 "getUserInfo.do.js" 或者 "getUserInfo.do.json"
最后,框架源码地址:https://github.com/ahbool/vue-mix-pages,欢迎 +Star
demo很烂,将就着看吧 !-_-
在使用过程中如果发现有待优化的地方或者好的建议,欢迎提出。。。
结尾有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相关插件配置 */
项目简介
一个集 多页应用 + 单页应用 的混合项目框架。适用于主要入口页面生成多页,子页面和次要页面使用单页形式的项目。
技术栈
ES6+Vue2.0
Vuex
Vue-Router
Axios
Webpack4
项目打包说明
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很烂,将就着看吧 !-_-
在使用过程中如果发现有待优化的地方或者好的建议,欢迎提出。。。
相关文章推荐
- vue学习之二:vue-router简单配置搭建单页应用
- 单页应用 WebApp SPA 骨架 框架 路由 页面切换 转场
- Web API应用架构在Winform混合框架中的应用(2)--自定义异常结果的处理
- Vue.js使用vue-router构建单页应用
- 【单页应用】我们该如何处理框架弹出层层级关系?
- 手把手教你vue-cli单页到多页应用的方法
- 基于Vue2.0+Vue-router构建一个简单的单页应用
- Web API应用架构在Winform混合框架中的应用(3)--Winfrom界面调用WebAPI的过程分解
- 详解下一代开源混合应用框架Reapp(转)
- vue-router单页应用简单示例(一)
- 记、基于react-router的单页应用
- Web API应用架构在Winform混合框架中的应用(4)--利用代码生成工具快速开发整套应用
- Web API应用架构在Winform混合框架中的应用(1)
- 使用 angularjs router 做单页应用
- 三张图区别多页和单页应用模式
- Web API应用架构在Winform混合框架中的应用(5)--系统级别字典和公司级别字典并存的处理方式
- vue-cli单页应用改成多页应用配置详解
- React-router在混合应用开发中的注意事项。
- 混合App应用实现本地头像剪切,压缩上传功能(支持任何H5框架)
- 最简单的混合APP开发框架——搭建你的第一个Ionic应用(二)