欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

webpack4+vue2+axios+vue-router的多页+单页混合应用框架

程序员文章站 2022-05-08 13:49:16
VUE2的单页应用框架有人分享了,多页应用框架也有人分享了,这里分享一个单页+多页的混合应用框架吧,node.js写了一个简单的mock服务,也集成在里面,整体初现雏形,还有很多需要优化和改善的地方。。。 ......

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数据服务

概述

  1. 所有mock文件直接放在 ./api 目录的根目录下。(不支持子目录,可自行修改mock-server.js来实现)
  2. mock文件名必须和接口文件名一致,才能将请求接口匹配上mock文件。
  3. mock文件可以是 .js 文件或 .jso 文件,如果对同一接口分别创建了js和json两个mock文件,会优先取js文件的数据。
  4. json文件用来存放固定的mock数据,而js文件可更加*的处理并返回mock数据。
  5. 修改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: {}
  }
}

 

最后,框架源码地址:,欢迎 +star

demo很烂,将就着看吧 !-_-

在使用过程中如果发现有待优化的地方或者好的建议,欢迎提出。。。