vite搭建vue3项目的搭建步骤
更新时间：2025年09月29日 09:27:58 作者：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内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了Vue选取本地图片，自定义裁切图片比例 vue-cropper,本文分步骤结合实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-07-07
vue2和el-input无法修改和写入并且不报错的解决方案
这篇文章主要介绍了vue2和el-input无法修改和写入并且不报错的解决方案,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧2024-07-07
这篇文章主要介绍了9102年webpack4搭建vue项目的方法步骤，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-02-02
这篇文章主要介绍了vue日历/日程提醒/html5本地缓存功能，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2019-09-09
在vue中当我们管理数据的时候比较乱，我们要用到下面的这个库，本文主要介绍了如何使用 Vuex的入门教程，具有一定的参考价值，感兴趣的可以了解一下2022-02-02
本篇文章主要介绍了浅谈vue中数据双向绑定的实现原理 ，主要使用v-model这个数据双向绑定，有兴趣的可以了解一下2017-09-09
这篇文章主要介绍了解决vue-cli中stylus无法使用的问题方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-06-06
这篇文章主要介绍了vue仿element实现分页器效果，实现思路是定一个值foldPage, 意为当前最多显示的标签数,当总页数超过即显示省略.省略分为左边省略(folder1)和右边省略(folder2)，具体实例代码大家参考下本文2018-09-09
在本篇文章中我们给大家总结了关于编写vue组件的方法知识点，有此需要的读者们跟着学习下。2019-02-02
本文主要介绍了element表格变化后自动刷新的两种方案，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-04-04
最新评论