Vue CLI 2.x与3.x架构差异与迁移指南

Vue CLI 2.x与3.x对比与迁移指南 Vue CLI是Vue.js生态中的核心工具链,作为基于Node.js的命令行工具,它通过封装webpack等构建工具,为开发者提供标准化的项目脚手架。其核心价值在于简化前端工程化配置,支持从项目初始化到构建优化的全流程。Vue CLI 2.x采用显式配置方式,适合需要深度定制webpack的场景;而Vue CLI 3.x引入插件系统和零配置理念,通过vue.config.js实现更优雅的配置扩展。在企业级应用中,Vue CLI尤其适合需要兼容旧浏览器或复杂构建配置的项目迁移。随着Vite等新型构建工具兴起 阅读详情

1. Vue CLI脚手架核心概念解析

Vue CLI作为Vue.js官方提供的标准开发工具链,经历了从2.x到3.x的架构革新。CLI2采用基于Webpack的模板化方案,而CLI3升级为插件化体系。虽然官方已推荐使用Vite作为新项目的首选构建工具,但现存项目中仍有大量基于Vue CLI的工程需要维护。理解这两个版本的差异,对处理遗留项目和技术升级至关重要。

注意:Vue CLI 3+版本开始使用 @vue/cli 作为包名,与CLI2的 vue-cli 存在显著区别。安装时需特别注意版本标识。

1.1 版本架构差异对比

CLI2采用固定模板机制,通过 vue init <template-name> 命令初始化项目时,实际上是从vue-templates仓库下载预置配置。这种方式的优势在于开箱即用,但定制化需要直接修改webpack配置,导致不同项目的构建配置可能差异很大。

CLI3引入插件化设计,核心变化包括:

  • 将Webpack配置抽象为可组合的插件
  • 提供 vue.config.js 作为统一配置入口
  • 内置了交互式项目创建UI(通过 vue ui 命令启动)
  • 采用零配置起步理念,隐藏复杂配置项

版本对比表:

特性 CLI2 CLI3+
安装方式 npm install -g vue-cli npm install -g @vue/cli
项目初始化 vue init webpack my-project vue create my-project
配置修改 直接编辑webpack配置文件 通过vue.config.js覆盖
构建工具 Webpack 3 Webpack 4+
扩展机制 模板定制 插件系统

1.2 现代项目迁移建议

对于新启动的项目,建议直接采用Vite

Vue 2 vs Vue 3:深入对比 vue.config.js 配置差异与迁移指南 配置文件中的差异不大,但随着 Vue 3 的推出,Vue CLI 和相关工具也做了一些更新和变化。:在这两个配置中,你可以通过简单的 Webpack 配置或者更细粒度的 Webpack 链式 API修改配置,如设置别名、修改图片处理逻辑等。目前 Vue 版本已发布至 Vue 3.x,而 Vue 2.x 和 Vue 3.x 在项目配置和开发方式上有些差异。在 Vue 3 中,的配置文件结构和 Vue 2 是相似的,以下是一个适用于 Vue 3 的完整配置文件示例,兼顾开发环境、生产环境优化以及常用功能配置。 阅读详情

相关推荐

uni-app项目升级指南:如何无损从HbuilderX迁移到vue-cli5.x(含sass配置)

本文详细介绍了如何将uni-app项目从HbuilderX无损迁移到Vue CLI 5.x的完整指南,包括依赖管理、UI库兼容性和构建配置调整等关键步骤。特别关注了Sass配置和项目迁移中的常见问题解决方案,帮助开发者顺利过渡到更现代的Vue CLI生态系统。

vulkan6gpu的博客 891

【Ruoyi 解密 - 07. 前后端分离】:Vue2 与 Vue3 版本该如何抉择?

Ruoyi框架Vue2与Vue3选型指南 核心结论 新项目/团队无历史包袱:直接选Vue3 + RuoYi-Vue3,长期收益更高 现有Vue2项目:先用Vue2 + RuoYi-Vue2,后续渐进式迁移 新人学习:从Vue3开始,与最新技术生态同步 关键差异 Vue2基于Options API+Vue CLI,Vue3采用Composition API+Vite Vue3性能优势显著:冷启动快10倍+,Tree-Shaking减少40%体积 Vue3生态更活跃:Element-Plus、Pinia等

个人总结 1698

Trae AI开发工具:大前端环境配置与避坑指南

大前端开发的第一步往往不是选框架,而是搭建一套可靠的工具链。IDE作为编码、调试与AI能力协同的载体,直接决定后续开发的顺畅度。传统编辑器需要手动拼装插件生态,而新一代AI开发工具将对话、代码生成与项目脚手架能力内置到编辑器底层,降低了环境准备的门槛。Trae基于VS Code内核,兼容其插件体系,同时提供Chat、Builder、内联对话三种AI交互模式,适合从VS Code迁移的开发者,也适合大前端新人快速上手。安装时需认准官方渠道,注意Node.js、Git版本联动,配置自动格式化与手动更新策略,并结

weixin_26833139的博客 268

OpenResty无损升级内嵌nginx版本0DAY漏洞

OpenResty无损升级内嵌nginx版本,nginx

qq1071643762的博客 6896

大模型呼叫中心场景分享之六:大模型外呼IT运维告警——智能监控与自动化响应的未来

在数字化运维(IT Operations)中,实时监控系统健康状态并及时响应告警是保障业务连续性的关键。传统的IT告警方式(如邮件、短信、钉钉/企业微信通知)存在信息过载、响应延迟、人工处理效率低等问题。而大模型(LLM)与语音技术(TTS/ASR)的结合,为IT运维告警提供了更智能的解决方案——大模型外呼告警系统。大模型外呼告警系统正在重新定义IT运维的效率和体验。通过实时语音交互+智能自动化,企业能够将平均故障修复时间(MTTR)从小时级缩短至分钟级。

开源呼叫中心系统FreeIPCC的博客 918

1位2路选择器设计

1位2路选择器设计

好好学习,天天向上 3573

YOLOv11改进 | Conv篇 | DWRSeg扩张式残差助力小目标检测 (附创新修改后的C3k2DWRSeg)

本文内容给大家带来的DWRSeg中的DWR模块来改进YOLOv11中的C2f和Bottleneck模块,主要针对的是小目标检测,主要创新点可以总结如下:多尺度特征提取机制的深入研究和创新的DWR模块和SIR模块的提出这种方法使得网络能够更灵活地适应不同尺度的特征,从而更准确地识别和分割图像中的物体。DWRSeg的基本原理和框架,并且能够在你自己的网络结构中进行添加DWRSeg需要增加一定的计算量一个DWR模块大概增加0.4GFLOPsYOLOv11改进系列专栏——本专栏持续复习各种顶会内容——科研必备。

Snu77的博客 4163

Matlab实现雷达波位编排

1 简介 %本程序用于雷达球坐标系到正弦空间坐标系的转换,以及相控阵雷达的波位编排。 2 完整代码 ​%070228添加波位数据保存clear allclose allclc%波束宽度,单位:度BeamWidth = 3.6;theta05 = round(sin(BeamWidth*pi/180)*1000)/1000;%雷达作用空域AZ = [-15 15]; %方位角范围(雷达球坐标系),单位:度EL = [0 30]; %俯仰角范围(雷

qq_59747472的博客 2477

【系统架构设计师】预测试卷十:综合知识(75道选择题)

本文包含75道选择题,覆盖计算机系统、操作系统、网络、数据库、软件工程等核心知识域,其中系统架构设计与评估占比最高(19题)。题目难度稍高,注重灵活应用,题干全新且不与前8套重复。部分典型题目解析包括:计算机性能比较(CPU时间公式TLB/页表机制)、Cache写策略、流水线分支惩罚、管程条件变量、LRU近似算法、自旋锁适用场景、TCP字节流特性、Anycast应用、MVCC机制、分布式事务选型等。答案详解强调易错点,如性能比较需综合计算、TLB缺失不等于缺页、

数据知道的博客 469

使用 MATLAB/Simulink 构建一个电机-液压联合控制系统的仿真模型

本文详细介绍了基于Simulink的电机与液压执行机构联合控制系统建模方法。通过7个步骤,系统讲解了从创建项目、搭建PMSM电机模型、建立逆变器与矢量控制模块,到构建液压泵和执行机构模型的完整过程。重点展示了如何设置关键参数、添加测量反馈模块,并提供了实用的代码片段。教程还包含仿真运行流程、结果分析指标及进阶建议,帮助读者掌握多物理场耦合系统建模的核心技术。该方法适用于机电液一体化系统设计,为工程实践提供有效参考。

amy_mhd的博客 607

ET2012新版免狗免安装绿色软件

ET2012新版免狗免安祖昂绿色软件。,新界面,新视觉,

深度学习工具包 DeepLearningToolbox

深度学习工具包Deprecation notice.-----This toolbox is outdated and no longer maintained.There are much better tools available for deep learning than this toolbox, e.g. [Theano](http://deeplearning.net/software/theano/), [torch](http://torch.ch/) or [tensorflow](http://www.tensorflow.org/)I would suggest you use one of the tools mentioned above rather than use this toolbox.Best, Rasmus.DeepLearnToolbox================A Matlab toolbox for Deep Learning.Deep Learning is a new subfield of machine learning that focuses on learning deep hierarchical models of data.It is inspired by the human brain&#39;s apparent deep (layered, hierarchical) architecture.A good overview of the theory of Deep Learning theory is[Learning Deep Architectures for AI](http://www.iro.umontreal.ca/~bengioy/papers/ftml_book.pdf)For a more informal introduction, see the following videos by Geoffrey Hinton and Andrew Ng.* [The Next Generation of Neural Networks](http://www.youtube.com/watch?v=AyzOUbkUf3M) (Hinton, 2007)* [Recent Developments in Deep Learning](http://www.youtube.com/watch?v=VdIURAu1-aU) (Hinton, 2010)* [Unsupervised Feature Learning and Deep Learning](http://www.youtube.com/watch?v=ZmNOAtZIgIk) (Ng, 2011)If you use this toolbox in your research please cite [Prediction as a candidate for learning deep hierarchical models of data](http://www2.imm.dtu.dk/pubdb/views/publication_details.php?id=6284)```@MASTERSTHESIS\{IMM2012-06284, author = "R. B. Palm", title = "Prediction as a candidate for learning deep hierarchical models of data", year = "2012",}```Contact: rasmusbergpalm at gmail dot comDirectories included in the toolbox-----------------------------------`NN/` - A library for Feedforward Backpropagation Neural Networks`CNN/` - A library for Convolutional Neural Networks`DBN/` - A library for Deep Belief Networks`SAE/` - A library for Stacked Auto-Encoders`CAE/` - A library for Convolutional Auto-Encoders`util/` - Utility functions used by the libraries`data/` - Data used by the examples`tests/` - unit tests to verify toolbox is workingFor references on each library check REFS.mdSetup-----1. Download.2. addpath(genpath(&#39;DeepLearnToolbox&#39;));Example: Deep Belief Network---------------------```matlabfunction test_example_DBNload mnist_uint8;train_x = double(train_x) / 255;test_x = double(test_x) / 255;train_y = double(train_y);test_y = double(test_y);%% ex1 train a 100 hidden unit RBM and visualize its weightsrand(&#39;state&#39;,0)dbn.sizes = [100];opts.numepochs = 1;opts.batchsize = 100;opts.momentum = 0;opts.alpha = 1;dbn = dbnsetup(dbn, train_x, opts);dbn = dbntrain(dbn, train_x, opts);figure; visualize(dbn.rbm{1}.W&#39;); % Visualize the RBM weights%% ex2 train a 100-100 hidden unit DBN and use its weights to initialize a NNrand(&#39;state&#39;,0)%train dbndbn.sizes = [100 100];opts.numepochs = 1;opts.batchsize = 100;opts.momentum = 0;opts.alpha = 1;dbn = dbnsetup(dbn, train_x, opts);dbn = dbntrain(dbn, train_x, opts);%unfold dbn to nnnn = dbnunfoldtonn(dbn, 10);nn.activation_function = &#39;sigm&#39;;%train nnopts.numepochs = 1;opts.batchsize = 100;nn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.10, &#39;Too big error&#39;);```Example: Stacked Auto-Encoders---------------------```matlabfunction test_example_SAEload mnist_uint8;train_x = double(train_x)/255;test_x = double(test_x)/255;train_y = double(train_y);test_y = double(test_y);%% ex1 train a 100 hidden unit SDAE and use it to initialize a FFNN% Setup and train a stacked denoising autoencoder (SDAE)rand(&#39;state&#39;,0)sae = saesetup([784 100]);sae.ae{1}.activation_function = &#39;sigm&#39;;sae.ae{1}.learningRate = 1;sae.ae{1}.inputZeroMaskedFraction = 0.5;opts.numepochs = 1;opts.batchsize = 100;sae = saetrain(sae, train_x, opts);visualize(sae.ae{1}.W{1}(:,2:end)&#39;)% Use the SDAE to initialize a FFNNnn = nnsetup([784 100 10]);nn.activation_function = &#39;sigm&#39;;nn.learningRate = 1;nn.W{1} = sae.ae{1}.W{1};% Train the FFNNopts.numepochs = 1;opts.batchsize = 100;nn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.16, &#39;Too big error&#39;);```Example: Convolutional Neural Nets---------------------```matlabfunction test_example_CNNload mnist_uint8;train_x = double(reshape(train_x&#39;,28,28,60000))/255;test_x = double(reshape(test_x&#39;,28,28,10000))/255;train_y = double(train_y&#39;);test_y = double(test_y&#39;);%% ex1 Train a 6c-2s-12c-2s Convolutional neural network %will run 1 epoch in about 200 second and get around 11% error. %With 100 epochs you&#39;ll get around 1.2% errorrand(&#39;state&#39;,0)cnn.layers = { struct(&#39;type&#39;, &#39;i&#39;) %input layer struct(&#39;type&#39;, &#39;c&#39;, &#39;outputmaps&#39;, 6, &#39;kernelsize&#39;, 5) %convolution layer struct(&#39;type&#39;, &#39;s&#39;, &#39;scale&#39;, 2) %sub sampling layer struct(&#39;type&#39;, &#39;c&#39;, &#39;outputmaps&#39;, 12, &#39;kernelsize&#39;, 5) %convolution layer struct(&#39;type&#39;, &#39;s&#39;, &#39;scale&#39;, 2) %subsampling layer};cnn = cnnsetup(cnn, train_x, train_y);opts.alpha = 1;opts.batchsize = 50;opts.numepochs = 1;cnn = cnntrain(cnn, train_x, train_y, opts);[er, bad] = cnntest(cnn, test_x, test_y);%plot mean squared errorfigure; plot(cnn.rL);assert(er<0.12, &#39;Too big error&#39;);```Example: Neural Networks---------------------```matlabfunction test_example_NNload mnist_uint8;train_x = double(train_x) / 255;test_x = double(test_x) / 255;train_y = double(train_y);test_y = double(test_y);% normalize[train_x, mu, sigma] = zscore(train_x);test_x = normalize(test_x, mu, sigma);%% ex1 vanilla neural netrand(&#39;state&#39;,0)nn = nnsetup([784 100 10]);opts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samples[nn, L] = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.08, &#39;Too big error&#39;);%% ex2 neural net with L2 weight decayrand(&#39;state&#39;,0)nn = nnsetup([784 100 10]);nn.weightPenaltyL2 = 1e-4; % L2 weight decayopts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, &#39;Too big error&#39;);%% ex3 neural net with dropoutrand(&#39;state&#39;,0)nn = nnsetup([784 100 10]);nn.dropoutFraction = 0.5; % Dropout fraction opts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, &#39;Too big error&#39;);%% ex4 neural net with sigmoid activation functionrand(&#39;state&#39;,0)nn = nnsetup([784 100 10]);nn.activation_function = &#39;sigm&#39;; % Sigmoid activation functionnn.learningRate = 1; % Sigm require a lower learning rateopts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, &#39;Too big error&#39;);%% ex5 plotting functionalityrand(&#39;state&#39;,0)nn = nnsetup([784 20 10]);opts.numepochs = 5; % Number of full sweeps through datann.output = &#39;softmax&#39;; % use softmax outputopts.batchsize = 1000; % Take a mean gradient step over this many samplesopts.plot = 1; % enable plottingnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, &#39;Too big error&#39;);%% ex6 neural net with sigmoid activation and plotting of validation and training error% split training data into training and validation datavx = train_x(1:10000,:);tx = train_x(10001:end,:);vy = train_y(1:10000,:);ty = train_y(10001:end,:);rand(&#39;state&#39;,0)nn = nnsetup([784 20 10]); nn.output = &#39;softmax&#39;; % use softmax outputopts.numepochs = 5; % Number of full sweeps through dataopts.batchsize = 1000; % Take a mean gradient step over this many samplesopts.plot = 1; % enable plottingnn = nntrain(nn, tx, ty, opts, vx, vy); % nntrain takes validation set as last two arguments (optionally)[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, &#39;Too big error&#39;);```[![Bitdeli Badge](https://d2weczhvl823v0.cloudfront.net/rasmusbergpalm/deeplearntoolbox/trend.png)](https://bitdeli.com/free "Bitdeli Badge")

TMS_WebGMaps_1.9.8.0_Full_Source

TMS_WebGMaps_1.9.8.0_Full_Source 全源码 delphi cbuilder

温度PID控制PLC程序

温度PID稳定控制程序,适用于欧姆龙PLC,对其他PLC也具有很大参考价值

上一篇: BIM轻量化引擎选型:Unity与Three.js技术对比与实战指南
下一篇: 2026年十大国产OpenClaw替代方案评测与选型指南
weixin_34327223
博客等级 码龄11年 4783粉丝 1218原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符  | 博主筛选后可见
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值