vite如何实现构建vue3新项目

更新时间：2025年05月31日 18:53:48 作者：weixin_45658815

这篇文章主要介绍了vite如何实现构建vue3新项目方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

vite构建vue3新项目

Vite 是新一代前端构建工具，速度极快，是创建 Vue 3 项目的推荐方式。

一、环境准备

确保你本地已安装：

Node.js（推荐版本 ≥ 16）
npm 或 yarn 或 pnpm

检查命令：

node -v
pnpm -v

二、项目创建

1.使用命令快速创建

pnpm create vite kaishu-vue-ui
# 或者使用 yarn
# yarn create vite kaishu-vue-ui
# 或者使用 pnpm
#  npm create vite@latest kaishu-vue-ui

2.选择框架

命令行会提示选择框架：选择vue+ts(TypeScript)

①:Select a framework（选择框架）

|
*  Select a framework:
|    Vanilla
|  > Vue
|    React
|    Preact
|    Lit
|    Svelte
|    Solid
|    Qwik
|    Angular
|    Marko
|    Others
—

②Select a variant（选择变体/版本）

|
o  Select a framework:
|  Vue
|
*  Select a variant:
|  > TypeScript
|    JavaScript
|    Official Vue Starter ↗
|    Nuxt ↗

3.安装依赖

vscode等开发软件打开项目，执行命令：

pnpm i
# 或者使用
# pnpm install

4.项目启动

同上，执行命令：\

pnpm run dev

我这里有个报错，同样情况的小伙伴可以关注一下，报错如下：

TypeError: crypto$2.getRandomValues is not a function

好像是因为vite版本过高，将vite版本从^6.3.5降为4.5.11(该版本是安全版本，部分版本如果开放外网的话有漏洞）即可正常启动，默认运行在 http://localhost:5173

在这里贴出具体的依赖版本，供大家参考：

{
    "name": "kaishu-vue-ui",
    "private": true,
    "version": "0.0.0",
    "type": "module",
    "scripts": {
        "dev": "vite",
        "build": "vue-tsc -b && vite build",
        "preview": "vite preview"
    },
    "dependencies": {
        "vue": "^3.5.13"
    },
    "devDependencies": {
        "@vitejs/plugin-vue": "^5.2.3",
        "@vue/tsconfig": "^0.7.0",
        "typescript": "~5.8.3",
        "vite": "4.5.11",
        "vue-tsc": "^2.2.8"
    }
}

ps：博主nodejs与pnpm版本如下，大家可以用以参考

node -v
v16.19.1

pnpm -v
8.6.6

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

vue封装TabBar组件的完整步骤记录
组件封装是为了复用,换成大白话就是,同样的事情我不想做第二遍,节省出来的时间用来看动漫不香吗,下面这篇文章主要给大家介绍了关于vue封装TabBar组件的完整步骤,需要的朋友可以参考下
2021-10-10
Vue写一个简单的倒计时按钮功能
这篇文章主要介绍了基于Vue写一个简单的倒计时按钮功能，在项目开发的过程，经常会遇到发送验证码，点击之后有60秒倒计时的按钮，今天小编就给大家分享实例代码，需要的朋友参考下吧
2018-04-04
vuejs手把手教你写一个完整的购物车实例代码
这篇文章主要介绍了vuejs-手把手教你写一个完整的购物车实例代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-07-07
手把手教你拿捏vue cale()计算函数使用
这篇文章手把手教你拿捏vue cale()计算函数使用，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-04-04
Vue+element-ui 实现表格的分页功能示例
这篇文章主要介绍了Vue+element-ui 实现表格的分页功能示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-08-08
vue项目中路径使用@和~的区别及说明
这篇文章主要介绍了vue项目中路径使用@和~的区别及说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-12-12
详解Nuxt.js部署及踩过的坑
这篇文章主要介绍了详解Nuxt.js部署及踩过的坑，Nuxt.js 提供了两种发布部署应用的方式：服务端渲染应用部署和静态应用部署。本文主要说说服务端渲染应用部署，感兴趣的小伙伴们可以参考一下
2018-08-08
vue实现双向绑定和依赖收集遇到的坑
这篇文章主要介绍了vue的双向绑定和依赖收集，主要是通过Object.defineProperty() 实现双向绑定，具体思路代码大家跟随小编一起看看吧
2018-11-11
解决vue 按钮多次点击重复提交数据问题
这篇文章主要介绍了vue 按钮多次点击重复提交数据的问题,本文通过实例结合的形式给大家介绍的非常详细，需要的朋友可以参考下
2018-05-05
Vuejs 用$emit与$on来进行兄弟组件之间的数据传输通信
本篇文章主要介绍了Vuejs 用$emit 与 $on 来进行兄弟组件之间的数据传输示例，非常具有实用价值，需要的朋友可以参考下。
2017-02-02