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的配置文件,可自行修改
查看全文
相关阅读:
hive数据仓库入门到实战及面试
clickhouse入门到实战及面试
透过源码看懂Flink核心框架的执行流程
hive经典练习题
flink批处理从0到1学习
flink基础篇
flink进阶篇
flink源码阅读
spark优化总结
uni-app跨平台移动应用开发
原文地址:https://www.cnblogs.com/gqx-html/p/14024406.html
最新文章
vue-cli3开启gzip压缩
配置项目按eslint规范格式化代码
Vue tinymce富文本编辑器整合
git常用命令
warning: LF will be replaced by CRLF in public/tinymce/langs/zh_CN.js
在Mac上安装mysql数据库【多测师】
Mac上的抓包工具Charles【多测师】
用Fiddler实现手机抓包【多测师】
HDU6579 Operation(线性基)
ACM-ICPC实验室周赛2020.3.13(2019山东)
热门文章
BZOJ1004 [HNOI2008]Cards(并查集+动态规划)
BZOJ1003 [ZJOI2006]物流运输(最短路+动态规划)
BZOJ1001 [Beijing2006]狼抓兔子(对偶图+最短路+最小割)
ZUCC jiubei and TFT
ZUCC jiubei and list
ZOJ4100 Vertices in the Pocket(并查集+权值线段树+二分)
Spark_Streaming整合Kafka
Spark Streaming 整合 Flume
Spark Streaming与流处理
Spark Streaming 基本操作
Copyright © 2011-2022 走看看