vite创建vue项目

已于 2022-06-08 10:33:53 修改
阅读量1.2k 收藏 2
点赞数
分类专栏： vue 前端 文章标签： vue.js vscode javascript
于 2022-06-08 10:32:20 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40178497/article/details/125179115
版权
前端 同时被 2 个专栏收录
45 篇文章 1 订阅
订阅专栏
vue
12 篇文章 1 订阅
订阅专栏

1、根据vite官网在命令行输入命令npm create vite@latest
输入项目名

选择模板
在这里插入图片描述
选择vue语言
在这里插入图片描述
安装命令行提示的操作：
在这里插入图片描述
运行：
在这里插入图片描述

当前node版本为v16.15.1，若vite安装提示需要升级node版本，windows系统升级直接下载压缩包解压缩到node安装目录，node下载官网
在这里插入图片描述
选择对应压缩包下载，查看node安装目录：在命令行where node （需要在cmd命令行界面操作，VSCode终端操作无效）
在这里插入图片描述
将下载的安装包解压缩到node安装目录，node -v查看版本已经变过来了

qq_40178497
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
（1）vite+ts+vue3项目搭建完整项目
IAmNotChangAn的博客
03-30 241
在app.vue页面写入 ，接管app页面。在src路径创建router文件夹 index页面。安装less 、sass、scss （修改后缀）在main.ts页面引入router。在vite.cofig.ts配置。
使用Vite快速构建Vue项目
m0_68932924的博客
02-17 468
使用Vite可以快速创建Vue项目，希望本篇教程可以帮助到你。
【详细步骤】使用Vite创建Vue3项目
最新发布
HQC66666的博客
05-09 1536
Vite是一个轻量级、运行速度快的前端构建工具，它支持模块热替换（Hot Module Replacement，HMR），可以即时、准确地更新模块，当代码修改时无须重新加载页面或清除应用程序状态。Vite默认安装的插件比较少，随着开发过程中依赖的增多，需要额外进行配置。Vite不需要以命令的方式安装和卸载，只要安装了npm或yarn，就可使用Vite的相关命令创建项目。Vite会作为项目的开发依赖保存在项目的node_modules目录中。
使用 Vite 创建 Vue 3 项目
qq_43313093的博客
06-13 4073
以上就是使用 Vite 创建 Vue 3 项目的基本流程。需要注意的是，Vite 的开发服务器采用了快速的 HMR（热更新）方案，相比于传统的打包工具开发效率更高，但在生产环境中需要使用打包工具打包部署。另外，Vite 还有很多其他的特性和插件，可以根据实际需要进行使用和配置。等待片刻后，Vite 就会在浏览器中打开一个新的窗口，你就可以开始开发 Vue 3 项目了。其中，my-vue3-app 是项目的名称，你可以根据实际需要进行修改。
vite构建vue项目
m0_73420146的博客
07-03 1116
---------- 使用create-vue搭框架(可选router和pinia) ------------------------- 使用vite搭框架(没有router和pinia) -------------------------- 组件库element-plus ---------------------- 预处理器 Sass ---------------------- 配路由 ------------------------- 配代理 -------------
五分钟利用Vite创建Vue项目
Whit3ZzT的博客
11-13 507
Vite是尤雨溪团队开发的，官方称是下一代新型前端构建工具，能够显著提升前端开发体验。上面称是下一代，当前一代当然是我们熟悉的webpackVite 优势。
vite+vue+cesium项目搭建
03-13
1. **创建Vue模板**：首先，你需要通过npm或yarn创建一个基于Vue的Vite项目。对于npm 6.x，命令是`npm init vite@latest my-vue-app --template vue`；对于npm 7+，由于命令行语法变化，需要添加额外的双破折号，即`...
通过脚手架Vite创建Vue 3项目（主页分栏：Web实验练习）
01-20
（Web实验练习）通过脚手架Vite创建Vue 3项目【实验二】
通过命令行创建vue项目的方法
08-29
主要介绍了通过命令创建vue项目的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue3+vite创建项目-（傻瓜式教程）
01-19
vue3+vite创建项目-（傻瓜式教程）
个Vite+Vue3+TypeScript+Cesium.js集成模板是一个开箱即用的项目模板
04-01
这个Vite+Vue3+TypeScript+Cesium.js集成模板是一个开箱即用的项目模板，旨在帮助开发者快速搭建基于Cesium.js的Vue3应用程序。该模板使用了最新的Vite构建工具和Vue3框架，并集成了TypeScript和Cesium.js技术栈。 ...
【Vue3 + Vite】Vite搭建 项目解构 Vue快速学习 第一期
Orion
01-28 1800
vue3+vite项目搭建，安装启动停止，项目目录解构，组件说明，CSS导入方式，Vue3实现计数器....
Vue3+Vite+Ts(手把手教你创建项目)
唯见青山不见君
11-08 1347
手把手教你用Vue3+Vite+Ts搭建vue3项目
使用vite构建一个vue项目
06-02 665
你还可以通过附加的命令行选项直接指定项目名称和你想要使用的模板。例如：我想构建一个vue+ts的项目。
Vue+vite创建项目关于vite.config.js文件的配置
start_sea的博客
06-27 4101
vue-cli 创建的项目，项目配置文件文件名为vue.config.js,webpack 创建项目的项目配置文件文件名为webpack.config.js，而vite工具构建完成的项目，项目配置文件文件名为vite.config.js。Vue项目创建时，我们见过vue-cli 创建项目和webpack 创建项目等方式。创建完成的项目，最明显的去别就是，项目配置文件命名不同，当然，配置语法也有不同。根据需要添加自定义配置，比如项目运行时的配置及项目打包输出的打包配置。
Vue3 - Vite 安装与创建 vue3 项目（使用 vite 创建 vue 项目）
热门推荐
王佳斌
08-24 1万+
前言 为什么使用 vite（官方解释）：https://vitejs.cn/guide/why.html 它是一款由 尤雨溪 开发的新工具，旨在代替 webpack ，利用浏览器现已支持 ES6 的基础，遇到 import 会发送一个请求去加载文件，vite 拦截这些请求做一些预编译，省去了冗长的打包时间，从而提升开发体验，具体详见官方网站。 第一步：安装vite 也可使用 yarn 进行安装，本篇基于 npm 进行。 在任意位置终端执行如下代码： npm install -g create-vit
利用Vite或者webpack创建Vue项目，并启动Vue项目
杜晓帅~的博客
09-04 6184
一篇文章带你了解如何使用Vite或者webpack打包Vue项目，并成功启动
vite搭建vue2项目
Th_rob的博客
07-28 1万+
使用vite搭建一个vue2项目,包含了vue-router、vuex、axios、组件库等等的引入
使用vite从开始搭建vue项目
weixin_64608867的博客
04-01 1494
一、创建项目 这里根据vite的兼容性说明，要求node.js版本>=12.0.0 提供了npm,yarn,两种包管理工具的创建方式 用NPM： npm init @vitejs/app 使用yarn： yarn create @vitejs/app 然后按照提示进行操作！ 这里我们使用yarn来创建一个vue项目（这里我使用的Mac，与PC步骤基本一致） 在我们想要创建的项目都目录下打开终端（命令行工具） 输入如下命令 // Mac 其中sudo是获取
vite 创建 vue 项目
06-12
以下是使用 Vite 创建 Vue 项目的基本步骤： 1. 安装 Node.js 环境（建议使用 LTS 版本），可以从官网下载并安装。 2. 使用 npm 安装 Vite： ``` npm install -g vite ``` 3. 在项目目录下创建一个新的项目，...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值