脚本宝典收集整理的这篇文章主要介绍了

基于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

下一节

总结

以上是脚本宝典为你收集整理的

基于requirejs的vue2项目 (一)

全部内容,希望文章能够帮你解决

基于requirejs的vue2项目 (一)

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过