创建一个vite+vue3项目详细教程

7月前作者：smallmww 分类：Toy博客阅读(33) 违法举报

这篇具有很好参考价值的文章主要介绍了创建一个vite+vue3项目详细教程。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

一、首先打开本地磁盘，找到一个存放路径

这里我选择将新建项目放置在E盘的demo->vitedemo路径下

二、在该路径处打开命令行cmd

vite创建vue3项目,前端,vue.js,前端,javascript

三、在打开的命令行中输入创建命令

注意在搭建之前要安装node.js环境依赖，并且确认你的版本

Vite 需要Node.js版本 14.18+，16+。然而，有些模板需要依赖更高的 Node 版本才能正常运行，当你的包管理器发出警告时，请注意升级你的 Node 版本。

执行命令：

$ npm create vite@latest

起项目名称：这里我起了一个Vite，根据需求起名字即可。

选择你需要的框架类型，由于我这里创建的是一个vue项目，所以选择了vue。

选择语言，这里选择javaScript.

vite创建vue3项目,前端,vue.js,前端,javascript

四、这样一个vite+vue3项目就创建完毕了，打开你刚才创建位置对应的文件夹在编译器中即可看到创建好的文档。具体的配置可以参考vite官方教程。

文章来源地址https://www.toymoban.com/news/detail-609161.html

到了这里，关于创建一个vite+vue3项目详细教程的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：如若内容造成侵权/违法违规/事实不符，请点击违法举报进行投诉反馈，一经查实，立即删除！

分享到：

领支付宝红包赞助服务器费用

前端 vite+vue3——写一个随机抽奖组件

大家好，我是yma16，本文分享关于前端 vite+vue3——写一个抽奖随机组件。 vue3系列相关文章：前端vue2、vue3去掉url路由“ # ”号——nginx配置 csdn新星计划vue3+ts+antd赛道——利用inscode搭建vue3(ts)+antd前端模板认识vite_vue3 初始化项目到打包 python_selenuim获取csdn新星赛道选手所在城

2024年02月08日
浏览(25)
vue3+vite+ts+elementplus创建项目

# vue3+vite+ts+pinia 学习笔记 ## 1、创建项目: npm init vite@latest 选择: vue、ts ## 2、进入项目目录后：npm install 安装 ## 3、运行项目: npm run dev ## 4、安装常用插件： 1、安装 npm install vue-router@latest 配置:在src目录下新建router目录，创建index.ts文件代码如下: ```javascript 创建

2024年02月09日
浏览(41)
使用vite创建vue3的Cesium基础项目

使用vite创建vue3项目：可以参考官方文档Vite官方中文文档 1.1 在指定文件夹路径下使用npm（前提是已经安装好了node）： 1.2 cd到创建的项目文件夹：安装并使用Cesium; 2.1 找到插件：vue插件，找到社区插件， ctrl+F搜索“Cesium”，找到Cesium的插件使用教程：Cesium插件就能找到C

2024年02月13日
浏览(32)
如何使用Vite创建Vue3的uniapp项目

Vue3/Vite 版要求 node 版本^14.18.0 || =16.0.0 如果使用 HBuilderX（3.6.7 以下版本）运行 Vue3/Vite 创建的最新的 cli 工程，需要在 HBuilderX 运行配置最底部设置 node 路径为自己本机高版本 node 路径（注意需要重启 HBuilderX 才可以生效） HBuilderX Mac 版本菜单栏左上角 HBuilderX-偏好设置-运行配

2024年02月09日
浏览(50)
基于Vue3+TS+Vite+Cesium创建项目

随着近几年社会的发展，人们对三维可视化的需求也是越来越多，三维GIS如今真的越来越火了，对于做GIS前端开发的人员来说，Cesium开发是绝对绕不开的一门技术，所以今天来说说如何利用当下最火的 Vue3+TS+Vite 来搭建一个基于Cesium的项目开发环境。 1.使用 yarn create vite 创建

2024年02月05日
浏览(44)
Vite + Vue3 实现前端项目工程化

Vue3 发布至今，周边的生态、技术方案已足够成熟，个人认为新项目是时候切换到 Vite + Vue3 了。今天就给大家操作一下这种技术方案实现前端工程化。数字化管理平台 Vue3+Vite+VueRouter+Pinia+Axios+ElementPlus Vue权限系统案例个人博客通过官方脚手架初始化项目第一种方式，这是使

2024年02月03日
浏览(39)
基于vscode开发vue3项目的详细步骤教程 3 前端路由vue-router

1、Vue下载安装步骤的详细教程(亲测有效) 1_水w的博客-CSDN博客 2、Vue下载安装步骤的详细教程(亲测有效) 2 安装与创建默认项目_水w的博客-CSDN博客 3、基于vscode开发vue项目的详细步骤教程_水w的博客-CSDN博客 4、基于vscode开发vue项目的详细步骤教程 2 第三方图标库FontAwesome_水w的

2024年02月02日
浏览(50)
Vue+vite创建项目关于vite.config.js文件的配置

Vue项目创建时，我们见过vue-cli 创建项目和webpack 创建项目等方式。现在Vue 3版本使用npm/pnpm create vue@latest 创建项目，是搭配使用vite工具构建的。创建完成的项目，最明显的去别就是，项目配置文件命名不同，当然，配置语法也有不同。 vue-cli 创建的项目，项目配置文件文件

2024年02月12日
浏览(38)
vue3之vite创建h5项目1（创建vite项目、配置IP访问项目、配置多环境变量与预览打包生产效果、配置别名）

初始化项目模块添加环境变量文件，每个文件写入配置，定义 env 环境变量前面必须加 VITE_ dev环境 test环境 prod环境在项目根目录下创建 03-1：配置多环境变量之dev环境 .env.development 03-2：配置多环境变量之test环境 .env.test 03-3：配置多环境变量之prod环境 .env.production 03-4 修改

2024年02月02日
浏览(41)
Uni-app + Vue3 + TS +Vite 创建项目

npm 都很熟，可是与 npm 如此相似的 npx 是干嘛的呢？我们为甚要介绍 npx ? 由于 uni-app 官方提供创建命令使用的是 npx，所以我们先来了解下 npx 是干什么的？它与 npm 的区别。 npx 是 npm 的高级版本，它从 npm v5.2 版本开始引入的，与 npm 绑定在一起，无需额外安装，具有更大的功

2023年04月15日
浏览(49)