脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → vite搭建vue3

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内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • ElementUI日期选择器时间选择范围限制的实现

    ElementUI日期选择器时间选择范围限制的实现

    在日常开发中，我们会遇到一些情况，限制日期的范围的选择，本文就详细的介绍了ElementUI日期选择器时间选择范围限制的实现，文中通过示例代码介绍的非常详细，感兴趣的可以了解一下
    2022-04-04
  • Vue3项目中预览并打印PDF的两种方法

    Vue3项目中预览并打印PDF的两种方法

    最近在项目开发中碰到一个需求是在页面中展示pdf预览功能,下面这篇文章主要给大家介绍了关于Vue3项目中预览并打印PDF的两种方法,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2023-05-05
  • Vue 2源码解析Parse函数定义

    Vue 2源码解析Parse函数定义

    这篇文章主要为大家介绍了Vue 2源码解析Parse函数定义，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-08-08
  • vue中defineProperty和Proxy的区别详解

    vue中defineProperty和Proxy的区别详解

    这篇文章主要介绍了vue中defineProperty和Proxy的区别详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2020-11-11
  • Vue PostCSS的使用介绍

    Vue PostCSS的使用介绍

    postcss一种对css编译的工具，类似babel对js的处理，postcss只是一个工具，本身不会对css一顿操作，它通过插件实现功能，autoprefixer就是其一
    2023-02-02
  • Vue实现背景更换颜色操作

    Vue实现背景更换颜色操作

    这篇文章主要介绍了Vue实现背景更换颜色操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2020-07-07
  • Vue中的el-date-picker时间选择器的使用实例详解

    Vue中的el-date-picker时间选择器的使用实例详解

    el-date-picker是Element UI框架中提供的日期选择器组件,它支持单个日期、日期范围、时间、日期时间等多种选择方式,本文给大家介绍Vue中的el-date-picker时间选择器的使用,感兴趣的朋友一起看看吧
    2023-10-10
  • Vue函数式组件专篇深入分析

    Vue函数式组件专篇深入分析

    Vue提供了一种称为函数式组件的组件类型,用来定义那些没有响应数据,也不需要有任何生命周期的场景,它只接受一些props来显示组件,下面这篇文章主要给大家介绍了关于Vue高级组件之函数式组件的使用场景与源码分析的相关资料,需要的朋友可以参考下
    2023-01-01
  • 利用Vue实现将图片转换为Base64编码的方法

    利用Vue实现将图片转换为Base64编码的方法

    这篇文章主要介绍了利用Vue实现将图片转换为Base64编码的方法,Base64是一种编码方式,用于将二进制数据转换成64个基于ASCII的可打印字符,这种编码可嵌入图像到HTML或CSS中,减少加载时间,解决跨域问题,并支持离线应用开发,需要的朋友可以参考下
    2024-10-10
  • vue中混入mixins的使用方法

    vue中混入mixins的使用方法

    mixins（混入）官方的描述是一种分发 Vue 组件中可复用功能的非常灵活的方式,这篇文章主要给大家介绍了关于vue中混入 mixins使用的相关资料,需要的朋友可以参考下
    2021-10-10

最新评论