传统前端工程使用 Vue 等框架重构的思路
这段时间遇到类似的问题,第一反应便是使用 cli 搭建项目,但是细想一下立马否决了,原因如下:
- 工程量太大,猴年马月能重构完,此期间原项目还是没有任何变动(如果没人跟你一起同步修改之前老项目的话
- 无法继承,除非每次都单独复制粘贴,然后修改兼容代码,把 dist 里面代码弄过去,否则整个项目搬运过去是很繁琐的
- 考虑过 submodule 方案,不靠谱,舍弃(管理成本太高
于是换种思路,恩,传统方案用的大多是 JQ 处理,那么如果把 JQ 给弄出来或者说使用 Vue 替换掉,那么答案就呼之欲出了,没错,直接 <sciprt src="vue.xxx.js"></script> 标签引用 Vue 即可。
具体替换方案,拿程序员客栈的页面举例如下:

<div id="test">{php} echo $vo["class_name"]; {/php}</div>
<!-- 替换 -->
new Vue({
el: '#test',
// todo...
})
即可。
然后当某页面所有内容都替换完毕后,再抽成组件或独立页面,均可。
单页面 => 组件
多页面 => 独立页面
传统前端工程使用 Vue 等框架重构的思路的更多相关文章
- SpringBoot+Vue豆宝社区前后端分离项目手把手实战系列教程01---搭建前端工程
豆宝社区项目实战教程简介 本项目实战教程配有免费视频教程,配套代码完全开源.手把手从零开始搭建一个目前应用最广泛的Springboot+Vue前后端分离多用户社区项目.本项目难度适中,为便于大家学习, ...
- 仿B站项目——(1)计划,前端工程
计划 现打算: 计划用webpack打包 + 模板语言 + jquery + jquery ui + bootstrap做一个仿B站的静态网站. 网站兼容手机浏览器端. 部分模块打算仿照SPA用js加 ...
- 前端工程之模块化(来自百度FEX)
模块化 是一种处理复杂系统分解成为更好的可管理模块的方式,它可以把系统代码划分为一系列职责单一,高度解耦且可替换的模块,系统中某一部分的变化将如何影响其它部分就会变得显而易见,系统的可维护性更加简单易 ...
- JAVAEE——宜立方商城01:电商行业的背景、商城系统架构、后台工程搭建、SSM框架整合
1. 学习计划 第一天: 1.电商行业的背景. 2.宜立方商城的系统架构 a) 功能介绍 b) 架构讲解 3.工程搭建-后台工程 a) 使用maven搭建工程 b) 使用maven的tomcat插件启 ...
- 2019前端面试系列——Vue面试题
Vue 双向绑定原理 mvvm 双向绑定,采用数据劫持结合发布者-订阅者模式的方式,通过 Object.defineProperty()来劫持各个属性的 setter.getter,在数 ...
- 前端工程模块化——以一个php项目为例
实现一个页面功能总是需要 JavaScript.CSS 和 Template 三种语言相互组织,所以我们真正需要的是一种可以将 JavaScript.CSS 和 Template 同时都考虑进去的模块 ...
- 前端工程精粹(一):静态资源版本更新与缓存(附精简js的工具)
转自:http://www.infoq.com/cn/articles/front-end-engineering-and-performance-optimization-part1/ 每个参与过开 ...
- require.context实现前端工程自动化
require.context是什么 一个webpack的api,通过执行require.context函数获取一个特定的上下文,主要用来实现自动化导入模块,在前端工程中,如果遇到从一个文件夹引入很多 ...
- 阶段5 3.微服务项目【学成在线】_day02 CMS前端开发_16-CMS前端工程创建-导入系统管理前端工程
提供了基于脚手架封装好的前端工程 H:\BaiDu\黑马传智JavaEE57期 2019最新基础+就业+在职加薪\阶段5 3.微服务项目[学成在线]·\day02 CMS前端开发\资料\xc-ui-p ...
随机推荐
- Testlink1.9.17使用方法(第九章 测试结果分析)
第九章 测试结果分析 QQ交流群:585499566 TestLink根据测试过程中记录的数据,提供了较为丰富的度量统计功能,可以直观的得到测试管理过程中需要进行分析和总结的数据.点击首页横向导航栏中 ...
- [iOS]创建界面方法的讨论
以前在入门的时候,找的入门书籍上编写的 demo 都是基于 Storyboards 拖界面的.后来接触公司项目,发现界面都是用纯代码去写复杂的 autoLayout 的.再然后,领导给我发了个 Mas ...
- Flutter 布局(四)- Baseline、FractionallySizedBox、IntrinsicHeight、IntrinsicWidth详解
本文主要介绍Flutter布局中的Baseline.FractionallySizedBox.IntrinsicHeight.IntrinsicWidth四种控件,详细介绍了其布局行为以及使用场景,并 ...
- 【效率工具】SSH一键登录脚本(可一键从跳板机登录线上服务器)
说明 前阵子上线,一次性上了十个服务,一直上到凌晨才完事,期间每个服务都要先输入跳板机的登录信息来登录跳板机,然后再输入线上服务器的信息来登录线上服务器,实在是太过于麻烦,而且有些服务还有好几台服务器 ...
- 关于bug的一些思考
上午看了两道算法,自己编译器上面敲了一遍,然后又去网站上敲了一遍: 编译器上面无论哦如何都调不出来,网站上面也是: 吃个午饭,睡个觉,醒来重新手撸了一遍,然后就过了 : 面对这种事情,真的是自己应该多 ...
- getprop从哪获取属性
Android SystemProperties设置/取得系统属性的用法总结 通过调查得知,Android系统中取得/设置系统属性的用法参考以下3篇文章就足够了. 1.Android SystemPr ...
- [20190227]简单探究tab$的bojb#字段.txt
[20190227]简单探究tab$的bojb#字段.txt --//上午做了删除tab$表,其对应索引i_tab1的恢复,我一直以为这个索引会很大,没有想到在我的测试环境仅仅139个键值.--//查 ...
- mssql sqlserver in 关键字在值为null的应用举例
转自:http://www.maomao365.com/?p=6873 摘要: 下文通过案例分析in 关键字在值为null的应用举例, 分析出not in关键字在null值产生的异常信息 如下所示: ...
- 解决tomcat中文传输乱码问题
<Connector URIEncoding="utf-8" connectionTimeout="20000" encoding="utf-8 ...
- 下载安装Emacs和基本配置--待更新中
Emacs下载地址 下载好后,解压到D:\Emacs,并设置环境变量D:\Emacs\bin 熟悉基本操作 光标的移动 文件的创建与打开