撰于 阅读 28

vue3+vite初始化项目

为什么使用vite

1. 启动速度和热更新速度

Vite:Vite 利用了现代浏览器原生支持的 ES 模块(ESM),在开发环境下直接使用原生 ESM 进行模块加载,无需打包,因此启动速度非常快。热更新(HMR)也几乎是即时的,因为 Vite 只更新发生变化的模块,而不是整个应用。

Vue CLI:Vue CLI 使用 Webpack 进行打包,启动和热更新速度相对较慢,尤其是在大型项目中。

2. 开发体验

Vite:Vite 的开发体验更加流畅,因为它不需要等待整个应用打包完成就可以开始开发。开发者可以更快地看到代码变化的效果。

Vue CLI:Vue CLI 在开发过程中需要等待打包完成,尤其是在项目规模较大时,开发体验相对较差。

3. 现代工具链

Vite:Vite 是一个现代化的构建工具,支持 TypeScript、JSX、CSS 预处理器等现代前端开发所需的工具链。它还内置了对 Vue 3 的支持,并且可以轻松集成其他工具和插件。

Vue CLI:虽然 Vue CLI 也支持现代工具链,但它的架构和配置相对复杂,尤其是在需要自定义配置时。

4. 生态系统

Vite:Vite 的生态系统正在快速发展,越来越多的插件和工具正在涌现,支持更多的功能和优化。

Vue CLI:Vue CLI 的生态系统相对成熟,但它的发展速度相对较慢,尤其是在 Vue 3 发布后,Vite 成为了更受关注的工具。

5. 未来趋势

Vite:Vite 被认为是未来前端构建工具的趋势,尤其是在 Vue 3 发布后,Vue 团队也推荐使用 Vite 作为默认的开发工具。

Vue CLI:虽然 Vue CLI 仍然是一个强大的工具,但随着 Vite 的崛起,越来越多的开发者开始转向 Vite。

通过vite脚手架创建项目

npm create vite@latest my-vue-app -- --template vue


然后通过

npm i

安装依赖 也就是install的缩写,其他的启动命令都可以在package.json找到

使用

npm run dev

启动项目 访问本地地址,项目初始化完成