10.VueCLI和Vite

最新推荐文章于 2024-06-27 15:23:53 发布
最新推荐文章于 2024-06-27 15:23:53 发布
阅读量779 收藏 3
点赞数
分类专栏： vue 文章标签： vue.js javascript webpack
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/phoebemeng/article/details/126540925
版权
本文详细介绍了VueCLI脚手架的使用，包括安装、创建项目、配置选项等，并对比介绍了Vite，一个基于ES模块的快速开发工具。Vite提供了快速的热更新和预配置的Rollup构建，支持Vue3、CSS处理和TypeScript。同时，文章还展示了Vite创建项目、配置及打包的过程。
摘要由CSDN通过智能技术生成

一、VueCLI脚手架

1.什么是vue脚手架
在软件工程中帮助我们搭建项目的工具称之为脚手架，vue项目使用的就是vue脚手架。
vue CLI
vue的脚手架就是vue CLI （Commend-Line Interface）命令行界面。通过CLI选择项目的配置和创建出自己的项目。

vue CLI 已经内置了webpack相关的配置，不需要从零开始配置。
2. Vue CLI 安装和使用
安装Vue CLI ：
全局安装：npm install @vue/cli -g
升级Vue CLI：
如果已经有旧的版本可以升级：npm update @vue/cli -g

通过Vue的命令创建项目
vue create 项目名

?  Your connection to the default yarn registry seems to be slow.
   Use https://registry.npmmirror.com for faster installation? Yes

选择预设

? Please pick a preset: Manually select features

然后根据项目需要进行选择，

? Check the features needed for your project: Babel, Linter
? Choose a version of Vue.js that you want to start the project with 3.x
最低0.47元/天 解锁文章
phoebemeng
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vite与Vue-cli的区别和特点
m0_60970928的博客
02-07 4213
Vite是创建vue3.0时的一个基本项目脚手架和开发服务器的构建工具，他和vue-cli类似，本期就给大家讲解一下两个脚手架之间的区别和特点。以上就是在Vite与Vue-cli的区别和特点以及如何使用这两种脚手架搭建Vue3.0的项目。希望本篇文章能够帮助到你，不懂得可以评论区或者私信问我，我也会一 一解答。我的其他文章:https://blog.csdn.net/m0_60970928?
VueCLI和Vite
桑桑和阿战
03-30 8026
1. VueCLI 1.1 Vue CLI脚手架 什么是Vue脚手架？ 我们前面学习了如何通过webpack配置Vue的开发环境，但是在真实开发中我们不可能每一个项目从头来完成所有的webpack配置，这样显示开发的效率会大大的降低； 所以在真实开发中，我们通常会使用脚手架来创建一个项目，Vue的项目我们使用的就是Vue的脚手架； 脚手架其实是建筑工程中的一个概念，在我们软件工程中也会将一些帮助我们搭建项目的工具称之为脚手架。 Vue的脚手架就是Vue CLI： CLI是Comman.
Vue CLI VS Vite
最新发布
警警的博客
06-27 1969
vue cli 、vite、webpack......
Vue脚手架（cli和vite详解）
stc_ljc的博客
11-29 6556
Vue 不会强制你选择某种开发、打包方式，但vue的生态系统提供了许多工具，例如 Vue CLI 和最近的推出的Vite js。那么你应该使用 Vite 还是 Vue CLI？在做出选择的时候，了解 Vite 和 Vue CLI 之间的区别会对我们有很大的帮助。在本文中，我将带着了解一下 Vite 与 Vue CLI，以便你可以根据自己的需求做出最佳选择。
vue-cli 和 vite
呆呆狗
06-06 653
1、vue-cli 1.1 vue cli 安装和使用 当前最新版本是 4.5.13 npm install @vue/cli -g 如果已经安装了，再次执行 安装 命令 会自动进行升级操作 也可以 用 命令 进行升级 npm update @vue/cli -g 1.2 创建项目 vue create 项目名称 输入 vue create 项目名称 看到如下截图 选择 Man ………… ，这个选项，表示 手动进行配置 会看到如下截图 # choose vue version 是否选
vue-cli-plugin-vite：与vue-cli一起使用Vite Today
03-04
无需任何代码库修改即可直接使用的vue-cli项目。 目录 用法 vue add vite 插件的生成器将为相应的main。{js，ts}编写一些main.html ，因为vite需要html文件作为dev-server条目文件 动机 我们有很多现有的vue-cli...
vue之（vue-cli和vite）环境搭建与项目创建
weixin_52084329的博客
10-18 576
详细的选择过程就不放在这里了，需要的可以戳这篇https://blog.csdn.net/weixin_44882488/article/details/124220864。检查是否安装了cnpm, 用以下命令查看一下你是否安装了cnpm。安装完成以后查看安装的版本（显示版本号说明安装成功）选择对应创建条件，创建成功后cd到项目文件夹下面。出现版本号则说明安装成功（最新的以官网为准）进入任意一个想要创建项目的文件夹输入。安装完成后使用以下命令查看版本号。vue create “文件名”
vue-cli-plugin-component-创建组件的Vue CLI 3插件-Vue.js开发
05-27
vue-cli项目的vue-cli-plugin-component组件插件│README.md│LICENSE（可选）└───src│├──index.js│└───components│vue-cli-plugin-component组件vue-cli项目的插件│README.md│LICENSE（可选）└─...
基于vue-cli / vite + vue3.0 + antd2.0 + ts4.0 的后台管理系统模板
10-15
本项目基于 Vue.js 3.0 框架构建，采用了 Vue CLI 和 Vite 两种构建工具，结合了 Ant Design Vue 2.0 UI 库，并且利用了 TypeScript 4.0 的强类型特性，打造了一个功能完善的后台管理系统模板。下面将详细介绍这个...
vue-cli-plugin-vite-use
04-18
vue-cli-plugin-vite 项目设置 yarn install 编译和热重装以进行开发 yarn serve 编译并最小化生产 yarn build 运行单元测试 yarn test:unit 整理和修复文件 yarn lint 自定义配置 请参阅。
Vue-Cli脚手架和Vite
m0_58118986的博客
10-10 676
vue-cli(俗称：vue脚手架)是 vue 官方提供的、快速生成 vue 工程化项目的工具。特点：① 开箱即用，② 基于webpack，③ 功能丰富且易于扩展，④ 支持创建 vue2 和 vue3 的项目如果每个项目都使用webpack一个个去配置，就太过于麻烦了，因此vue-cli出现了。
Vue-cli 与Vite 环境搭建与项目构建
淘小欣的博客
08-27 1817
官网地址：https://cli.vuejs.org/zh/Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统，提供：通过@vue/cli实现的交互式的项目脚手架。通过@vue/cli实现的零配置原型开发。一个运行时依赖 (@vue/cli-service)，该依赖：3.1 可升级；3.2 基于 webpack 构建，并带有合理的默认配置；3.3 可以通过项目内的配置文件进行配置；3.4 可以通过插件进行扩展。一个丰富的官方插件集合，集成了前端生态中最好的工具。
vite初识，vite与vuecli对比
weixin_41711593的博客
08-05 1470
vite初识，vite与vuecli对比
Vite 与 Vue Cli 对比 - 尤雨溪: Vite 会取代 vue-cli 吗？
热门推荐
蒋川@卡拉云
05-20 2万+
尤雨溪在发布 Vite 之后写了一条推，感觉不会在用 webpack 了（Vue-cli 基于 Webpack 开发，并配置了 Webpack 打包规则），Sean 是 Webpack 核心开发者，会一些中文，在尤大这条下面直接感叹。 Vue-cli 一直是 Vue 2 默认官方脚手架工具，Vue-cli 基于 Webpack 开发。Vue 3 发布后，尤大同时发布了 Vite ，那么 Vue 3 同时有两个前端打包工具 Vite 和 Vue CLI，那么他们俩应该怎么选呢？
vite和vue-cli实现原理和优化及区别
qq_25416827的博客
02-02 1271
它利用原生 ESModule 的特性，将每个文件作为一个模块，通过浏览器去解析和执行，而不需要提前将文件打包成一个单独的 bundle。Vite 利用浏览器的原生 ESModule 支持，实现了快速的开发环境启动和热模块替换（HMR）。Webpack 是一个模块打包工具，它将项目中的所有资源打包成一个或多个 bundle，以优化加载性能。Vite 在开发环境中通过将源代码直接发送到浏览器，避免了传统的打包过程，实现了更快的开发启动速度。此外，Vite 还通过按需加载模块和使用缓存来提高构建和打包的性能。
vue-cli 迁移 vite2 实践小结
Cool的博客
03-03 5499
两周前（202.02.17），vite2.0 发布了，作为使用了浏览器原生 ESM 为下一代前端工具，vite 2.0 相较于 1.0 更加成熟。在此之前笔者就开始关注这类「新型」的前端工具。这次趁着 vite 2.0 发布，也成功将一个基于 vue-cli(-service) + vue2 的已有项目进行了迁移。 迁移工作比较顺利，花了不到半天时间。但整个迁移过程中也遇到了一些小问题，这里汇总一下，也方便遇到类似问题的朋友一起交流和参考。 项目背景 在介绍具体迁移工作前，先简单介绍下项目情况。目前该
vue vite 多页面应用与vue cli多页面应用 (MPA)及其比较(避坑)
qq_51165365的博客
03-27 1577
vue-cli和vite安装默认的应用后，对其进行多页面应用改造，总结vite多页面应用与cli多页面应用的异同点，实际需要和避坑总结。vue vite 多页面应用与vue cli多页面应用 (MPA、SPA)及其比较(避坑)
vuecli和 vite 一样吗
02-22
不一样，Vue CLI 是一个完整的脚手架，提供了项目管理、工具链、构建系统等功能，可以帮助开发者快速搭建 ...而 Vite 则是一个基于现代浏览器原生 API 的轻量级开发服务器，可以更快速地编译、调试和发布 Vue.js 应用。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值