1.简单了解vite首先我们需要了解一下什么是vite。vite是一款前端构建工具除了可以创建vue3工程vite还可以创建react工程。构建工具的作用是什么呢构建工具可以将开发者编写的源代码和资源经过转换、打包、优化等处理最终生成生产环境可部署的高效、兼容的静态文件。2.使用vite创建vue3工程2.1 检查Node.js和npm的安装使用cmd进入命令提示符窗口输入以下两条命令:node -vnpm -v确保你的Node.js的版本大于等于16.0.0npm版本大于等于7.0.0。2.2 淘宝镜像要想在后续的项目开发过程中下载一些依赖但是如果不使用镜像的话下载就会很慢因此这里推荐使用淘宝镜像。npm config set registry https://registry.npmmirror.com2.3 创建vue3工程下载并执行create-vue脚手架通过脚手架创建项目。注意:create-vue是vite提供的脚手架而不是vite本身。在执行代码中可以观察到初始化项目在磁盘中的位置为:C:\Users\33946\vue-project01如果想要改变项目的位置可以直接剪辑粘贴。2.4 进入项目目录并安装依赖在项目对应的目录中输入cmd进入命令行窗口。输入安装依赖的代码可能需要等待30秒到1分钟左右。npm install在项目目录中可以看见一个名为node_mudules的目录。说明安装依赖成功了。2.5 启动开发服务器在安装好依赖之后我们可以尝试打开开发服务器。在命令行窗口输入:npm run dev在浏览器访问http://localhost:5173,即可访问初始页面。回到命令行窗口ctrlc终止服务器运行。2.6 构建生产版本当准备部署的时候输入:npm run build构建的文件会生成在dist/目录下。这篇文章主要讲解了官方推荐的构建vue项目的方法。另外还有一种通过vue-cli构建的方法不过不太推荐。
