runxinzhi.com
首页
百度搜索
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的配置文件,可自行修改
相关阅读:
Linux连接字符串
【aws】
运行mlflow命令报错 The 'nose' distribution was not found and is required by nose-exclude
【apt install】Unable to locate package python3-pip
python package打包发布,安装
【mlflow】mlflow打包、启动、换用mysql backend、mysql配置
【mlflow】打包:npm run build + python setup.py sdist
【css flex】将多个<div>放在同一行
【react 条件渲染】在render的html中使用 三元运算符 进行条件渲染
由于无法验证发布者 所以windows阻止此软件
原文地址:https://www.cnblogs.com/gqx-html/p/14024406.html
最新文章
【CodeForces706E】Working routine(二维链表)
【HDU5950】Recursive sequence(矩阵快速幂)
【POJ1083】 Moving Tables (并行的搬运)
【POJ 1001】Exponentiation (高精度乘法+快速幂)
【HDU4947】GCD Array (莫比乌斯反演+树状数组)
POJ 2965 The Pilots Brothers' refrigerator
POJ 1753 Flip Game
POJ 1129 Channel Allocation
cout快捷转换进制
CF 445A DZY Loves Chessboard
热门文章
CF510B Fox And Two Dots(搜索图形环)
POJ 2386 Lake Counting(搜索联通块)
洛谷2723 丑数(简单数学推导)
HDU 2102 A计划(BFS/DFS走迷宫)
Rope整理(可持久化神器)
CF 672D Robin Hood(二分答案)
POJ 3579 Median(二分答案)
CF 1073C Vasya and Robot(二分答案)
CF 1100E Andrew and Taxi(二分答案)
UVA 1335 Beijing Guards(二分答案)
Copyright © 2020-2023
润新知