zoukankan
html css js c++ java
VueCli 原理与实践
目前我们的主要目的是:将VueCli2 与 VueCLi3,4进行对比,同时我们还会将 React-Script进行剖析和对比,并实现一个简单的【基础框架】开发
一、VueCli2 实践
根据
VueCli2
的官网,我们看到有三个点需要注意:
1. VueCli2 使用的安装名与 VueCli3 的安装名不同
2. 当 vue init 时需要一个模版名,并根据模版名安装对应的项目,不只有weboack一个模版
3. 看到
vuejs-templates/webpack
点击进入
二、剖析 VueCli 2 生成 目录,及存在问题
结论:
从以上代码中,我们可以清楚的明白,webpack是安装在了项目目录下,可通过自己配置相关webpack
存在的问题:
VueCli2拉取的项目中,其实我们更改编辑的只有业务代码,对于基础代码类似webpack,我们并不会频繁使用,加上如果很多和项目,使用的基础代码相同的情况下,导致在后期基础代码的升级和维护上需要一些花费时间和成本。
解决办法:
1. 将基础代码封装
2. 所有的项目,共用同一个基础代码
保留目前存在的问题
三、VueCli 3 的实践
1. 安装
2. 使用
3. 分析
疑问:
为什么要做了再一次的封装
解答:@vue/cli-service 这个脚手架,主要是帮我们将基础代码进行了封装,例如webpack
疑问:
为什么将基础代码封装?它会给我带来什么好处?
解答:在vueCli2 的时候我们会发现,我们需要新增的只有业务代码,在基础代码webpack上我们并没有对其进行大的更改,当我们开发的项目越来越多的时候,我们会发现基本代码很类似,但webpack的维护成本就很大,基本每个项目我们都需要维护,如果我们共用一套基础代码的话,就只会维护一套代码就可,在版本更新或者修改版本的情况下,我们就会节省人力和时间
疑问:
@vue/cli-plugin 是什么?
解答:
脚手架我们在设计的时候会有这么几种情况,
1. 根据脚手架的规则去设计,但有弊端,扩展性不是很好
2. 将所有可以考虑用到的插件和逻辑,全部在一个脚手架实现,但有弊端,扩展性
1. @vue/cli-plugin 主要是插件,在vueCli2安装项目时,会提示我们是否安装 router, less 等等插件,
2. 因每个人选择的插件会不同,比如有的人喜欢less,有的喜欢sass,但vueCLi2的模式,就是将所有的可能性都包含在脚手架里面,就会让脚手架变得很重,
3. 所以我们以插件的形式把基础代码跟插件分开,就会使脚手架只做自己需要做的事,不需要考虑太多
疑问:
在项目中我需要额外配置基础代码,那应该如何修改基础代码里面的内容呢?
1. 在项目的根目录下,新建Vue.config.js 文件,可通过该文件进行配置基础代码的一些配置,也可覆盖基础代码
四、react-Script 实践
1. 安装
2. 使用
总结:
1. 执行npm run eject 命令,会提示我这是一个不可逆的操作,
2. 如果我们需要执行这个操作,那么就表示我们的webpack后期需要我们自己去维护,但如果我们但项目脚手架内的webpack已经满足不了我们的需求的时候,我们就不得不执行这个不可逆的操作,那后期我们就需要自己去维护webpack ,
3. 项目下就会安装webpack和一些其他文件,
4. 目录下就会多出一个config文件,内部是webpack的配置文件,可自行修改
查看全文
相关阅读:
[windows phone开发]新生助手的开发过程与体会三
安卓真机调试 出现Installation error: INSTALL_FAILED_UPDATE_INCOMPATIBLE....
Easyui columns列图片移位问题!!!
Easyui 去掉datagrid 行的样式,并点击checked 改边行颜色!
安卓手机 虚拟键盘输入用 position:fixed解决 !!!
Linux下用Perl产生新的EXCEL文档 zhumao
在 Perl 中使用内联 zhumao
牛郎织女 zhumao
打开.bz2文件 zhumao
perl中的特殊内置变量(转) zhumao
原文地址:https://www.cnblogs.com/gqx-html/p/14024406.html
最新文章
解码base64文件
shell排序法
统计各个数字、空白符(空格符,制表符,换行符)以及所有其他字符出现次数
统计行数、单词数、字符数
循环打印
二进制转换为十进制
俄罗斯方块小游戏
【转】Flash AS3.0 Socket编程
容联云通讯B轮融资1500万美元,任性送豪礼!!!
shader之uniform
热门文章
shader之attribute
开头只是开头,路还很长
TCP TIME_WAIT
Linux内核参数优化总结
net.ipv4.tcp_timestamps
net.ipv4.tcp_tw_reuse & net.ipv4.tcp_tw_recycle
Linux内核参数官方文档查询指引
net.ipv4.tcp_max_syn_backlog & net.core.somaxconn
.NET陷阱之一:IDeserializationCallback带来的问题
.NET陷阱之二:行为诡异的光标
Copyright © 2011-2022 走看看