基于requirejs的vue2项目 (一)

项目截图

项目演示地址

该项目主要是解决：

如何让不了解前端构建，并负责大部分业务逻辑的后端 开发出 一个单页应用

觉得有用请给个推荐，谢谢

最近做了一次小更新,配置文件可以配置模块是否异步加载以及是否关联store

开发背景

公司推进手机端项目，但目前开发模式依旧是后端渲染为主，后端开发对前端的自动化打包与构建工具一窍不通，并且没有外网；在这样的情况下，如何才能让后端不改变开发模式的情况下，做出单页应用呢？
要解决的问题有以下几点：

• 采用什么前端框架

• 前端如何开发

• 后端如何快速上手

• 后端如果协同开发

• 后端实时的在无构建环境下查看页面效果

• 如何打包

采用什么前端框架

react无前端构建环境开发难度是很大的，而且有一定门槛，直接排除；目前比较倾心于vue，上手容易，API简单易懂；对于后端来说基本无门槛；
控件库我选择了饿了么的mint-ui进行移植，后续将有介绍

前端如何开发

主要用到了gulp来进行css预处理，基本的内容都是画页面（没什么技术含量）

后端如何上手

因为决定使用vue，这个情况而可以忽略；

后端如何协同开发

协同我想到的是分页面，vue的字符串模板和requirejs的text插件正好可以实现；

无构建环境下查看页面效果

无构建环境下查看页面可以使用requirejs来加载各个模板
初始化vue-router的时候通过配置了生成router和加载指定页面（模块）

如何打包

requirejs提供了r.js，可直接在开发完成后交由前端进行打包

实现

• 一个页面包含tpl.html和index.js;tpl.html为vue的template字段通过requirejs加载；index.js 返回一个vue实例化须要用到的对象,里面包含了该页面的逻辑；

• 添加配置文件，添加vue-router，通过配置文件在new VueRouter 生成 routes；在项目new Vue的时候指定该router实例；这样页面中的跳转就可以通过配置的router进行切换

• 添加vuex,以处理可能的全局状态处理，同样通过配置文件来指定每一个页面是否加载store

• 添加gulp处理sass文件以供前端开发

这里提供一下项目的目录结构截图

业务模块与公用控件的文件内容

后续文章还将介绍：

• 控件库的移植;

• 通过配置加载模块

• 模块之间切换的动效实现

• 通过配置进行最终打包

• 通过nodejs对打包过程的特殊处理 (配置文件的引入引起的问题)

项目源码下载

git clone https://github.com/heruiwoniou/vue-requirejs-mobile-ui.git

安装

npm install

运行

gulp

下一节