yarn create vite创建vue3项目

一、首先安装node.js

安装了node才可以使用npm命令

二、通过npm安装yarn

全局安装yarn: npm install -g yarn 验证是否安装成功,查看yarn版本: yarn -v

三、yarn创建vue项目

yarn create vite

  • 输入项目名称,如:helloVue3
  • 输入软件包名称,如:package.json
  • 选择框架,如:Vue
  • ...... 根据提示输入命令:
bash 复制代码
cd helloVue3  #切换到项目目录
yarn          #安装项目的全部依赖
yarn dev      #启动服务

完成之后就可以通过这个地址打开本地服务

四、yarn与npm包管理工具的区别

  • 使用npm安装同一个包时,每次安装都需要重新下载,而yarn会缓存每个下载过的包,再次使用时无须重复下载。
  • npm按照队列安装每个包,也就是说,必须要等到当前包安装完成后才能继续安装后面的包,而yarn可以利用并行下载的方式提高资源利用率,安装速度更快。
  • npm的输出信息比较冗长,在执行npminstall命令时,命令提示符里会输出所有被安装的包的信息。相比之下,yarn的输出信息比较简洁,只输出必要的信息,同时也提供了一些命令供开发者查询额外的安装信息。

五、vite与webpack构建的区别

  1. 构建方式
  • Webpack是一个传统的打包工具,基于文件系统的构建。它将所有的代码、资源(如图片、CSS)打包成一个或多个文件,然后在浏览器中加载。
  • Vite 是基于现代浏览器特性的开发服务器,它采用了按需编译和热模块替换(HMR)。Vite 在开发模式下不进行打包,而是通过 ES 模块直接加载源码。
  1. 构建性能
  • Webpack 在开发时需要较长时间的初始构建,因为它会将整个项目打包成一个文件,导致构建时间较长,特别是在大型项目中。
  • Vite 采用了浏览器原生支持的 ES 模块,能够在开发时通过按需加载和模块热替换显著提高性能,尤其是对于大型项目,它的构建速度较快。
  1. 构建产物
  • Webpack 输出的构建产物通常是优化后的 JavaScript、CSS 和图片等,适合生产环境。
  • Vite 采用了基于 Rollup 的优化,生成高效的生产构建,且支持更灵活的模块化处理。 vite构建: 直接Server Ready,看哪个就加载哪个 webpack构建: 每个路由和模块分析完之后才Server Ready
相关推荐
雪碧聊技术13 分钟前
深入解析Vue中v-model的双向绑定实现原理
前端·javascript·vue.js·v-model
百锦再1 小时前
重新学习Vue中的按键监听和鼠标监听
javascript·vue.js·vue·计算机外设·click·up·down
快起来别睡了2 小时前
Vue 3 中的组件通信与组件思想详解
vue.js
不讲道理的柯里昂2 小时前
Vue MathJax Beautiful,基于Mathjax的数学公式编辑插件
vue.js·开源
啷咯哩咯啷2 小时前
Vue3构建低代码表单设计器
前端·javascript·vue.js
用户26124583401612 小时前
vue学习路线(10.监视属性-watch)
前端·vue.js
慧一居士2 小时前
Vite 完整功能详解与 Vue 项目实战指南
前端·vue.js
Hilaku2 小时前
说实话,React的开发体验,已经被Vue甩开几条街了
前端·javascript·vue.js
艾克马斯奎普特2 小时前
为什么响应性语法糖最终被废弃了?尤雨溪也曾经试图让你不用写 .value
前端·vue.js·代码规范
MR_发2 小时前
万字实现带@和表情包的输入框
vue.js·typescript