用最新Vite+Vue3+TypeScript构建前端项目

211 阅读1分钟

前言

为什么选择Vite? 一个字快,快速构建,快速看到效果。Vite官网(cn.vitejs.dev/)。 当我们开始构建越来越大型的应用时,需要处理的 JavaScript 代码量也呈指数级增长。包含数千个模块的大型项目相当普遍。基于 JavaScript 开发的工具就会开始遇到性能瓶颈:通常需要很长时间(甚至是几分钟!)才能启动开发服务器,即使使用模块热替换(HMR),文件修改后的效果也需要几秒钟才能在浏览器中反映出来。如此循环往复,迟钝的反馈会极大地影响开发者的开发效率和幸福感。

1,开发环境****

Windows10,node版本v17.9.1

2,用npm命令新创建项目****

在文件夹中打开cmd控制台输入:npm create vite@latest@latest表示vite最新的版本。
cmd控制台显示下面的信息。参考下面详细图片。

image.png

3,如果显示下面信息,证明项目创建成功了。****

image.png

4,进入项目,安装包。****

在cmd控制台输入cd jc_admin,按anter键进入项目,再输入npm install,按anter键就会安装包。如果安装包后没显示错误信息,证明成功了。

image.png

5,运行项目****

在控制台输入npm run dev,按anter键,就运行了。如图显示就证明项目成功运行了:

image.png

6,在浏览器输入访问连接http://localhost:5173/,如图显示。****

image.png