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的配置文件,可自行修改
查看全文
相关阅读:
mysql8.0.21下载安装详细教程
ORDER BY 高级用法之CASE WHEN继续研究
前端实用在线小工具推荐
从nodejs的AES加密解密之后文件大小不一致的问题谈谈AES加密中的补位
纯前端如何实现多语言切换
[React] React Virtual
[Kotlin] Compare Functional Programming in Java and Kotlin
[Kotlin] Catch Error in Java
[Angular] Saving draft form into Cookies
[Angular] Data Resolver
原文地址:https://www.cnblogs.com/gqx-html/p/14024406.html
最新文章
nodejs传递参数
Nodejs cannot find installed module on Windows
What's the difference between dependencies, devDependencies and peerDependencies in npm package.json file?
An Absolute Beginner's Guide to Using npm
前端工具
Vue cli
NPM self_signed_cert_in_chain
'cnpm' is not recognized as an internal or external command
nodemon command is not recognized in terminal for node js server
XJar: Spring-Boot JAR 包加/解密工具,避免源码泄露以及反编译。
热门文章
集群环境下防止并发的一种实现
spring-boot-quartz-scheduler-email-scheduling
mybatis generator 为数据库保留字段 转义
Spring Cloud: High Availability for Eureka
Spring Boot Quartz Scheduler Example: Building an Email Scheduling app
JDK8的LocalDateTime用法
Java Jar 包加密
使用ColumnType注解解决/过滤/转义tk mybatis插入insertSelective、insert语句中遇到sql关键字
Stream和parallelStream
Node Web开发ORM框架 Sequelize
Copyright © 2011-2022 走看看