Vue-CLI 对比 HTML 的架构

hivesplace

已于 2022-03-29 18:00:55 修改

阅读量1.7k

点赞数

分类专栏：个人想法文章标签： vue html5

于 2022-03-29 17:40:03 首次发布

本文链接：https://blog.csdn.net/hivesplace/article/details/123811801

版权

文章探讨了Vue-CLI与HTML5在前端开发中的架构差异，指出Vue-CLI的复杂性和学习曲线，以及HTML的简洁性。通过对比main.js和root.css在Vue-CLI项目中的角色，强调两者架构的相似性。作者认为虽然Vue等框架有其优势，但学习成本和复杂性不容忽视。

摘要由CSDN通过智能技术生成

前言

前端开发，我一直都是用 HTML(5)+Javascript+jQuery+Ajax+CSS3/DIV 架构去开发。这架构很直观、很强大而且很简单。最近因为公司发展需要，要跟新进来的同事合作开发。为了能够跟他们沟通，最近就学习了近几年都很火的 Vue。

Vue-CLI/AngularJS/ReactJS 其实很复杂

刚学习 Vue，尤其是Vue-CLI 时，觉得这东西跟AngularJS 和 ReactJs一样sb（尤其是当你要跨组件传递参数及组件状态的时候）。这个技术的最大卖点就是所谓不用操作DOM、渲染图层时只对当前受影响的组件进行等等。

老实说，本人觉得这两个所谓的卖点都不是卖点。举例说，当我们学习画画时，老师跟你说不用动画笔、不用学光影，光动动嘴巴给点指令，有个“工具”就能帮你作画。DOM就是画布，操作DOM就是在画布上作画。学前端，操作DOM来渲染图层就怎么变成笨作法？

至于速度方面，以现在的多核CPU和宽带的速度，我敢说如果我不跟你说一个APP后面是在用什么技术，你根本不能分辨那个APP是用Vue/AngularJs/ReactJs写的，那个是用HTML(5)+Javascript+jQuery+Ajax+CSS3/DIV写的。再说，影响一个APP的加载速度、响应速度、渲染速度的因素，远远不止因为你选择用什么框架来开发。

用像 Vue/AngularJs/ReactJs 的好处可圈可点，但是用这些框架的不好处却显而易见。首先这些工具的学习曲线很陡，实施起来也比较困难。比如说在Vue-CLI里面要实现BootstrapVue，我们需要了解如下（截屏由BootstrapVue官网摘取）：

1. 先决条件

在这里插入图片描述

2. 响应式meta标记

在这里插入图片描述

3. 兼容问题

在这里插入图片描述

4. 一连串的安装及引用步骤

在这里插入图片描述

5. 第三方模块引用及当中可能出现的错误

在这里插入图片描述
老实说，只是安装一个BootstrapVue就要花这么大气力。累啊！

相比 HTML(5)+Javascript+jQuery+Ajax+CSS3/DIV 方法，安装及使用就简单得多。步骤如下（截屏由Bootstrap官网摘取）：

A. 安装 Bootstrap 4

在这里插入图片描述

B. 【没有B了】

安装好了，一步搞定。

除了安装困难，Vue/AngularJs/NativeJs 的框架结构对于 HTML 也复杂很多，概念也相对不清晰。

传统的HTML架构如下：

<!doctype html>
<html>
	<head>
		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
		<link rel="stylesheet" href="root.css">
		<link rel="stylesheet" href="addon.css">
	</head>
	<body>
		<script src="aaa.js"></script>
		<script src="bbb.js"></script>		
	</body>
</html>