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
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了在vite项目中使用@进行文件的引入方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
这篇文章介绍了使用vue-cli创建vue项目的方法，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-01-01
在现代Web应用中,步骤条作为一种常见的UI组件,广泛应用于表单提交、任务进度以及多步骤操作等场景,下面我们来看看如何利用Vue实现一个蛇形步骤条吧2024-11-11
这篇文章主要介绍了vue3将通用组件注册成全局组件的方法，本文通过示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2023-08-08
这篇文章主要介绍了vue实现滚动条到顶部或者到指定位置，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
这篇文章主要介绍了vue环境变量配置之process.env解读，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-03-03
本文主要介绍了Vue+tsx使用slot没有被替换的问题，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-08-08
Element通过v-for循环渲染的form表单校验的实现
日常业务开发中，form表单校验是一个很常见的问题，本文主要介绍了Element通过v-for循环渲染的form表单校验的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-04-04
uniapp小程序上传文件webapi后端项目asp.net完整代码
在uniapp中,实现文件上传功能也变得非常简单,下面这篇文章主要给大家介绍了关于uniapp小程序上传文件webapi后端项目asp.net的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下2024-07-07
这篇文章主要为大家详细介绍了Vue3中jsoneditor的使用相关知识,文中的示例代码讲解详细,具有一定的学习价值,感兴趣的小伙伴可以跟随小编一起了解下2024-01-01
最新评论