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 相关插件配置 */
项目简介
一个集 多页应用 + 单页应用 的混合项目框架.
适用于主要入口页面生成多页, 子页面和次要页面使用单页形式的项目.
技术栈
- ES6+ http://es6.ruanyifeng.com/
- Vue2.0 https://github.com/vuejs/vue
- Vuex https://github.com/vuejs/vuex
- Vue-Router https://github.com/vuejs/vue-router
- Axios https://github.com/axios/axios
- Webpack4 https://github.com/webpack/webpack
项目打包说明
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 很烂, 将就着看吧 !-_-
在使用过程中如果发现有待优化的地方或者好的建议, 欢迎提出...
来源: https://www.cnblogs.com/liaojunbo/p/9597099.html