基于requirejs的vue2项目 (一)

jackzou 发布于2019-08-21 11:31 / 848人阅读

摘要：项目截图项目演示地址该项目主要是解决如何让不了解前端构建，并负责大部分业务逻辑的后端开发出一个单页应用觉得有用请给个推荐，谢谢最近做了一次小更新配置文件可以配置模块是否异步加载以及是否关联开发背景公司推进手机端项目，但目前开发模式依旧是后端

项目截图

项目演示地址

该项目主要是解决：

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

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

最近做了一次小更新,配置文件可以配置模块是否异步加载以及是否关联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

私有云云服务器基于webrtc的项目基于webrtc的开源项目 vue2.0 cdn Vue2x

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/86796.html

基于requirejs的vue2项目 (三)

摘要：这里是打包篇使用的是的进行打包思路是通过里面的进行项目的初打包因为和里面的引用是动态生成的所以无法对其进行处理这里我们用到了来进行文件整合具体看代码这里是通过配置文件来组装配置信息对设置了同步的模板进行打包这里是通过这里是打包篇使用的是requirejs的r.js进行打包思路是,通过entrance.js里面的require.config进行项目的初打包因为router.js和...

lijy91 2019-08-20 16:36 评论0 收藏0
基于requirejs的vue2项目(二)

摘要：减少服务器的请求对于和这两个特殊写发的文件因为的打包不识别，要进行特殊处理上一节提完了构思和大体实现下面来看具体的配置文件config 配置文件主要是是用来让后端开发自主添加页面，并通过该配置生成route和加载对应的store，这样就省去了后端去了解vue-router和vuex的用法了; 配置文件格式如下这里采用umd格式开头是为了后续nodejs进行调用 (function...

tianren124 2019-08-21 11:30 评论0 收藏0
前端资源系列（4）-前端学习资源分享&前端面试资源汇总

摘要：特意对前端学习资源做一个汇总，方便自己学习查阅参考，和好友们共同进步。特意对前端学习资源做一个汇总，方便自己学习查阅参考，和好友们共同进步。本以为自己收藏的站点多，可以很快搞定，没想到一入汇总深似海。还有很多不足&遗漏的地方，欢迎补充。有错误的地方，还请斧正... 托管: welcome to git，欢迎交流，感谢star 有好友反应和斧正，会及时更新，平时业务工作时也会不定期更...

princekin 2019-08-20 11:28 评论0 收藏0
大前端 - 收藏集 - 掘金

摘要：是目前唯一一个支持同步调用的跨平台年度上最多的个项目前端掘金年接近尾声，在最近的几篇文章中，会整理总结一些年度开源项目。 JS 全栈教程 - 前端 - 掘金本课程是基于阮一峰的 js 全栈教程的视频版本，免费供大家观看... 2016 年 10 个最佳的 CodePen 作品 - 前端 - 掘金说到 CodePen，前端开发者们肯定不会陌生。如果说 Dribbble 是设计师们聚集的圣...

honhon 2019-08-20 17:03 评论0 收藏0
angularjs + requirejs 完整的手脚架

摘要：还记得一年半前转向后端的那种无助的感觉，独自一人摸黑走路，学习各种前端知识，走了不少弯路，现在终于算是入门了前端我相信不少人也有我当时同样的无助，所以我在空闲时间整理了下所用到的知识，便编写了一个手脚架，希望能给其他正学习前端的同学一些参考还记得一年半前转向后端的那种无助的感觉，独自一人摸黑走路，学习各种前端知识，走了不少弯路，现在终于算是入门了前端～我相信不少人也有我当时同样的无助...

anyway 2019-08-19 17:18 评论0 收藏0