vite搭建vue3项目的搭建步骤
作者：lmryBC49
本文主要介绍了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 > npx > create-vite # 输入项目名称 ? Project name: › vue-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 ✔ Select 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项目在搭建时没有下载依赖，所以需要进入项目下载依赖。
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内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！