您现在的位置是:首页 >技术杂谈 >15-Vue技术栈之创建Vue3.0工程网站首页技术杂谈

15-Vue技术栈之创建Vue3.0工程

东方青云、 2024-07-01 12:01:01
简介15-Vue技术栈之创建Vue3.0工程

1.使用 vue-cli 创建

官方文档:https://cli.vuejs.org/zh/guide/creating-a-project.html#vue-create

## 查看@vue/cli版本,确保@vue/cli版本在4.5.0以上
vue --version
## 安装或者升级你的@vue/cli
npm install -g @vue/cli
## 创建
vue create vue_test
## 启动
cd vue_test
npm run serve

2.使用 vite 创建

官方文档:https://v3.cn.vuejs.org/guide/installation.html#vite

vite官网:https://vitejs.cn

  • 什么是vite?—— 新一代前端构建工具。

优势如下:

  • 开发环境中,无需打包操作,可快速的冷启动。
  • 轻量快速的热重载(HMR)。
  • 真正的按需编译,不再等待整个应用编译完成。

传统构建 与 vite构建对比图:

在这里插入图片描述
在这里插入图片描述

传统构建:

  • 在传统构建中刚开始是空的,需要将所有文件进行打包完毕,才启动开发服务器。

  • 如果我们开始构建越来越大型的应用时,需要处理的 JavaScript 代码量也呈指数级增长。

  • 包含数千个模块的大型项目相当普遍。基于 JavaScript 开发的工具就会开始遇到性能瓶颈:通常需要很长时间(甚至是几分钟!)才能启动开发服务器。

  • 即使使用模块热替换(HMR),文件修改后的效果也需要几秒钟才能在浏览器中反映出来。如此循环往复,迟钝的反馈会极大地影响开发者的开发效率和幸福感。

vite构建:

  • Vite 旨在利用生态系统中的新进展解决上述问题:浏览器开始原生支持 ES 模块,且越来越多 JavaScript 工具使用编译型语言编写。

  • 在vite构建中刚开始就骗你这里已经打包完毕了(其实它根本就没有打包),然后在根据需求进行按需编译,大大提高了编译效率。

使用vite创建工程:

## 创建工程
npm init vite-app <project-name>
## 进入工程目录
cd <project-name>
## 安装依赖
npm install
## 运行
npm run dev
风语者!平时喜欢研究各种技术,目前在从事后端开发工作,热爱生活、热爱工作。