这段时间遇到类似的问题,第一反应便是使用 cli 搭建项目,但是细想一下立马否决了,原因如下:

  1. 工程量太大,猴年马月能重构完,此期间原项目还是没有任何变动(如果没人跟你一起同步修改之前老项目的话
  2. 无法继承,除非每次都单独复制粘贴,然后修改兼容代码,把 dist 里面代码弄过去,否则整个项目搬运过去是很繁琐的
  3. 考虑过 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 等框架重构的思路的更多相关文章

  1. SpringBoot+Vue豆宝社区前后端分离项目手把手实战系列教程01---搭建前端工程

    豆宝社区项目实战教程简介 本项目实战教程配有免费视频教程,配套代码完全开源.手把手从零开始搭建一个目前应用最广泛的Springboot+Vue前后端分离多用户社区项目.本项目难度适中,为便于大家学习, ...

  2. 仿B站项目——(1)计划,前端工程

    计划 现打算: 计划用webpack打包 + 模板语言 + jquery + jquery ui + bootstrap做一个仿B站的静态网站. 网站兼容手机浏览器端. 部分模块打算仿照SPA用js加 ...

  3. 前端工程之模块化(来自百度FEX)

    模块化 是一种处理复杂系统分解成为更好的可管理模块的方式,它可以把系统代码划分为一系列职责单一,高度解耦且可替换的模块,系统中某一部分的变化将如何影响其它部分就会变得显而易见,系统的可维护性更加简单易 ...

  4. JAVAEE——宜立方商城01:电商行业的背景、商城系统架构、后台工程搭建、SSM框架整合

    1. 学习计划 第一天: 1.电商行业的背景. 2.宜立方商城的系统架构 a) 功能介绍 b) 架构讲解 3.工程搭建-后台工程 a) 使用maven搭建工程 b) 使用maven的tomcat插件启 ...

  5. 2019前端面试系列——Vue面试题

    Vue 双向绑定原理        mvvm 双向绑定,采用数据劫持结合发布者-订阅者模式的方式,通过 Object.defineProperty()来劫持各个属性的 setter.getter,在数 ...

  6. 前端工程模块化——以一个php项目为例

    实现一个页面功能总是需要 JavaScript.CSS 和 Template 三种语言相互组织,所以我们真正需要的是一种可以将 JavaScript.CSS 和 Template 同时都考虑进去的模块 ...

  7. 前端工程精粹(一):静态资源版本更新与缓存(附精简js的工具)

    转自:http://www.infoq.com/cn/articles/front-end-engineering-and-performance-optimization-part1/ 每个参与过开 ...

  8. require.context实现前端工程自动化

    require.context是什么 一个webpack的api,通过执行require.context函数获取一个特定的上下文,主要用来实现自动化导入模块,在前端工程中,如果遇到从一个文件夹引入很多 ...

  9. 阶段5 3.微服务项目【学成在线】_day02 CMS前端开发_16-CMS前端工程创建-导入系统管理前端工程

    提供了基于脚手架封装好的前端工程 H:\BaiDu\黑马传智JavaEE57期 2019最新基础+就业+在职加薪\阶段5 3.微服务项目[学成在线]·\day02 CMS前端开发\资料\xc-ui-p ...

随机推荐

  1. 微信小程序中如何获取for循环的item相关值到JS页面的问题

    今天小程序开发过程中,遇到了这个棘手的问题.由于我没有前端基础,只是知道一点儿基本的HTML标签,所以卡了好久,特此分享,望后来的你,可以有所收获. measure  step 1  *.WXML: ...

  2. [Python][小知识][NO.1] Python字符串前 加 u、r、b 的含义

    1.字符串前加 u 例:u"我是含有中文字符组成的字符串." 作用:后面字符串以 Unicode 格式 进行编码,一般用在中文字符串前面,防止因为源码储存格式问题,导致再次使用时出 ...

  3. Orchard详解--第三篇 依赖注入之基础设施

    Orchard提供了依赖注入机制,并且框架的实现也离不开依赖注入如模块管理.日志.事件等.在前一篇中提到在Global.asax中定义的HostInitialization创建了Autofac的IoC ...

  4. [20180808]exists and not exists.txt

    [20180808]exists and not exists.txt --//生产系统遇到的一个性能问题,通过例子来说明: 1.环境:SCOTT@test01p> @ ver1 PORT_ST ...

  5. 洗礼灵魂,修炼python(75)--全栈项目实战篇(3)—— 账户注册登录管理系统

    要求: 1.系统可以创建用户和登录用户,根据用户的输入不同,做出不同的反应(创建还是登录) 2.创建用户不能创建已存在的用户名 3.登录用户的操作最多只能有三次,超过三次冻结账户,每使用一次提示用户还 ...

  6. e lisp 自定义函数

    自定义函数 (defun multi-by-seven (number) "multi number by seven" (interactive "p") ( ...

  7. Linux 忘记登录密码?破解系统登陆密码

    1.重启或者开启系统,在如下界面按e 进入救援系统: 2.在linux16 这一行末尾输入:rd.break,以rd.break 的方法重置密码 3.分别执行以下命令 mount -o remount ...

  8. Linux 小知识翻译 - 「动态DNS」(DDNS)

    这次聊聊「动态DNS」. DNS上周已经介绍过了,就是提供主机名和IP地址对应关系的结构.「动态DNS」是对主机名和IP地址的对应关系提供动态管理的结构. 以前的DNS没有考虑IP地址变化的情况.但是 ...

  9. C语言 大小写字母转换

    //凯鲁嘎吉 - 博客园 http://www.cnblogs.com/kailugaji/ 方法1: #include<stdio.h> #include<stdlib.h> ...

  10. Django forms 关于select和checkbox设置初始选中值

    Django的forms和models一样很牛逼.他有两种功能,一是生成form表单,还有就是form表单的验证. 这里主要说一下生成form表单时经常用到的需要设置 初始值 / 默认值 的情况. 1 ...