新建 vue3 项目之 vite

297 阅读1分钟

1.查看 node 版本

vite需要node版本在12以上

// 查看 node 版本
node -v

2.创建 vue3 项目

在vite官网中我们可以看到有许多创建方式

image.png

个人推荐使用下面的方式创建,如果你不确定是否安装了npm、yarn或者不确定版本号,你可以输入 npm -v 进行检测

image.png

我的话,使用以下命令创建

/**
* 创建 vue3 项目:
* 1.my-vue-app: 项目名称; 2.template vue: 创建一个 vue 模板。
* 注意: 如果直接运行 npm init vite@latest, 会提示选择项目类型等选项,最后生成名称为
* vite-project 的项目。
*/
npm init vite@latest my-vue-app -- --template vue

依次选择 y, vue, vue 显示创建完成

1654864923775.png

1654864974536.png

按照提示,依次输入 cd my-vue-app,npm install,npm run dev,就可以正常启动我们的项目了。

1654865192462.png

1654865230665.png

3.vite 环境变量配置

拓展:
vite 环境变量配置
vite环境变量的配置
Vite多环境配置

拓展

Vite + Vue3 + TypeScript 项目搭建