本文主要是介绍vite搭建vue3项目的搭建步骤，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
《vite搭建vue3项目的搭建步骤》本文主要介绍了vite搭建vue3项目的搭建步骤,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学...
1.确保Nodejs环境
在终端输入如下命令来查看node环境，
node -v
如果使用的是nvm管理node版本，可以输入如下命令查看:
nvm ls
运行结果为
v16.20.2
v17.0.1
v18.20.4
v20.18.0
--> v22.12.0
其中箭头所指就是当前版本。
2.使用vite-cli工具
1.直接使用vite-cli工具创建项目
# npm 模板 npm create vite@latest # yarn yarn create vite@latest # pnpm pnpm create vite@latest
也可以在项目搭建好后切换,因为vite项目的依赖是搭建好后再下载的。
2.输入项目名称
upsilon@upsilon:~/workplace$ npm create vite@latest &www.chinasem.cngt; npx > create-vite # 输入项目名称 ? Project name: › vuephp-vite-project
3.选择项目框架，选择Vue
上下键进行选择，enter键进行选取
upsilon@upsilon:~/workplace$ npm create vite@latest
> npx
> create-vite
✔ Project name: … vue-vite-project
# 选择项目框架
? Select a framework: › - Use arrow-keys. Return to submit.
Vanilla
❯ Vue
React
Preact
Lit
Svelte
Solid
Qwik
Angular
Others
4.选择项目语言，一般选择typescript
upsilon@upsilon:~/workplace$ npm create vite@latest
> npx
> create-vite
✔ Project name: … vue-vite-project
✔ Select a framework: › Vue
# 选择项目语言
? Select a variant: › - Use arrow-keys. Return to submit.
❯ TypeScript
JavaScript
Official Vue Starter
Nuxt ↗
5.完成后的结果为
upsilon@upsilon:~/workplace$ npm create vite@latest > npx > create-vite ✔ Project name: … vue-vite-project ✔ Select a framework: › Vue ✔ SeleChina编程ct a variant: › TypeScript Scaffolding project in /home/upsilon/workplace/vue-vite-project... Done. Now run: cd vue-vite-project npm install npm run dev
3.进入项目安装依赖
和webpack不同，Vite项目在搭建时没有下载依赖，所以需要进入项目aXFiyhLlQJ下载依赖。
1.npm依赖
npm i
2.使用pnpm
# 如果没有安装pnpm可以运行 npm i -g pnpm # 下载依赖 pnpm i
3.使用yarn
# 如果没有安装yarn npm i -g yarn # 下载依赖 yarn
到此这篇关于vite搭建vue3项目的搭建步骤的文章就介绍到这了,更多相关vite搭建vue3内容请搜索China编程(www.cppwww.chinasem.cncns.com)以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程China编程(www.chinasem.cn)！
这篇关于vite搭建vue3项目的搭建步骤的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
