vite的简单使用

已于 2022-06-30 22:20:56 修改
阅读量9.8k 收藏 4
点赞数
分类专栏： webpack相关 文章标签： vue.js 前端框架 前端
于 2022-03-12 11:29:41 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/youhebuke225/article/details/123440657
版权

文章目录

官网

官网

下载

需要注意的是vite需要你的node的版本在12以上，输入node -v查看node版本

  1. 打开终端在终端中输入，依据命令行进行操作就可以了
npm create vite@latest
  1. 在这里插入图片描述选择项目名称，按回车就是使用默认的
  2. 在这里插入图片描述选择使用vite搭建的框架，这些都是前端的框架，这里我们点击react，或者你选择vue也是可以的
  3. 在这里插入图片描述选择是js版本还是ts版本，这里我们选择了ts版本
  4. 回车之后，我们会发现项目创建的非常快在这里插入图片描述
  5. 然后我们按照命令启动项目，同时，我们也会发现，项目启动的也非常快在这里插入图片描述

其他说明

  1. 如果新建的是ts项目，那么他可能会有env.d.ts的文件，他的作用点击
youhebuke225
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
如何使用vite-svg-loader
02-23
* 易于使用：使用 Vite-SVG-Loader 只需要几个简单的步骤，就可以轻松地引入 SVG 图像。 * 高性能：Vite-SVG-Loader 可以大大提高应用程序的性能，特别是在需要频繁地引入 SVG 图像的情况下。 Vite-SVG-Loader 是一...
vite-plugin-handlebars:Vite对车把的支持
03-19
虽然可以使用像React或Vue这样的JS框架来解决此问题，但是对于一个简单的站点而言，它是繁重的工作，它可以完全预先呈现而无需任何类型的JS运行时。把手提供了我们需要的功能，这些功能可以将多个HTML文件缝合在一起...
Vite 使用学习指南
qq_34185872的博客
05-29 2586
支持的框架不同：Vite 支持多种前端框架，包括 Vue、React、Angular 等，而 webpack 则需要通过相应的 loader 和 plugin 来支持不同的框架。构建方式不同：Vite 采用了基于浏览器原生 ES 模块的开发模式，可以在开发时快速启动应用，减少了冷启动时间，而 webpack 则是将所有模块打包到一个文件中。插件开发：Vite 提供了丰富的插件 API，可以通过编写插件来扩展 Vite 的功能，例如添加自定义的文件类型、自定义处理器、自定义中间件等。
vue3+vite 实现版本更新监控
weixin_42860683的博客
05-28 293
vite+vue3实现前端部署版本更新
使用 vue3+vite 完成项目版本控制，正式环境无缝更新
牛马程序员进阶之路
05-10 356
使用 vue3+vite 完成项目版本控制，正式环境无缝更新
前端开发与构建工具Vite
Lifelong learning
07-12 6803
vite的特性vite 主要由两部分组成：浏览器支持默认的构建目标浏览器是能 在 script 标签上支持原生 ESM 和 原生 ESM 动态导入。传统浏览器可以通过官方插件 @vitejs/plugin-legacy 支持 —— 查看 构建生产版本 章节获取更多细节。搭建第一个 Vite 项目使用 NPM: 使用 Yarn: 使用 PNPM: 还可以通过附加的命令行选项直接指定项目名称和你想要使用的模板。例如，要构建一个 Vite + Vue 项目，运行: 查看 以获取每个模板的更多细节：，，，，，，，
Vue及其构建工具安装
weixin_43791013的博客
11-27 1万+
Vue相关构建工具安装
vue项目实战经验，相关库的安装【笔记】
z2000ky的博客
12-28 4116
最近在系统学习vue3的项目实战，这里是对学习过程中的总结，包括一些库，框架的网站。本项目基于Vue3 + ElementPlus + Vite实战开发商城后台管理系统，其中包括Vite的使用，Vue3全新的Vite 需要 Node.js 版本 >= 12.0.0。，通过npm init vite@latest //查看版本号。
Vite+Vue3实现版本更新检查，实现页面自动刷新
weixin_44624120的博客
02-10 7531
Vite+Vue3实现版本发布更新检查，实现页面自动更新，增加自动修改package.json的version，两种方式可选择
Vue前端开发常用命令
shi450561200的博客
10-30 707
安装指定版本(V5.0.7) ： npm install -g @vue/cli@5.0.7。安装最新版本(V2.9.6)：npm install -g vue-cli@latest。安装指定版本(V2.9.5)：npm install -g vue-cli@2.9.5。查看可安装的版本：npm view vue-cli versions --json。安装最新版本(V5.0.8)： npm install -g @vue/cli。卸载已安装的版本：npm uninstall -g vue-cli。
vue3+vite+qiankun+monorepo框架
08-03
vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+...
vite-plugin-linaria
05-03
Vite-plugin-linaria 使用Vite虚拟文件进行开发的linaria Vite插件 安装（纱线或npm） 节点版本： > = 12.0.0 版本号： > = 2.0.0 yarn add vite-plugin-linaria -D 或者 npm i vite-plugin-linaria -D 用法 在vite.config中添加插件 // vite.config.js import VitePluginLinaria from 'vite-plugin-linaria' export default { plugins : [ // other plugins VitePluginLinaria ( ) ] , } 执照 麻省理工学院
vite-react-rollthedice:使用Vite和Reactjs演示简单的应用程序
05-25
Vitejs和React 文章： ：
vite2.0+react17+mobx+antd带登录，tabs多开窗口的应用系统框架
03-21
1.采用vite搭建，支持图片压缩，兼容ie11，包名自定义，proxy代理请求，less语法，自动生成压缩包框架，框架主题色定制和公用样式开发 2.请求api接口方法采用axios封装，带响应拦截以及请求拦截事件 3.模拟登录页...
如何查看vue版本号
unique_sir的博客
02-28 2773
如何查看vue版本号
不同的vite命令建vue，是不同的vite版本，一个是vite1，一个是vite2.0
weixin_40945354的博客
03-11 3998
npm init vite-app daily-cost 这个1，是培训的，写教程的时候vite还没更新，过年前的教程，过年了，就升2.0了。 npm init @vitejs/app 这个是2.0，是官网的
vue项目如何查看vue版本号
热门推荐
qq_44165157的博客
04-26 1万+
vue -V或者是vue --version查询的是vue-cli的版本,也就是vue脚手架的版本,如果想要查看vue的版本,直接去项目中,找到package.json文件夹 找"dependencies"然后就可以看到你装的vue的版本了 "dependencies": { "axios": "^0.21.1", "core-js": "^3.6.5", "element-ui": "^2.14.1", "vue": "^2.6.11", "vue-resource": "^
Vue.js 项目查看 vue版本号
LlanyW的专栏
10-25 1万+
如果想要查看vue的版本,直接去项目中,在根目录下，找到package.json文件夹 找"dependencies"，然后就可以看到你装的vue的版本了。vue -V或者是vue --version查询的是vue-cli的版本,也就是。这个项目是：2.6.11版本。
Vue + SpringBoot 实现文件的断点上传、秒传，存储到Minio
最新发布
m0_73179389的博客
06-19 559
前端页面使用的elment-plus的el-upload组件。当上传文件后，会调用handleChange 方法，可以在这里进行文件相关的操作。计算文件的MD5值。
vite使用terser
05-20
Vite 默认使用 Terser 进行代码压缩和混淆。Terser 是一个高效的 JavaScript 压缩工具，它可以将 JavaScript 代码压缩成尽可能小的体积，并且可以进行变量名混淆、死代码删除等优化操作，从而提高代码的执行效率和加载速度。 在 Vite 中使用 Terser 非常简单，只需要在配置文件中设置 `build.terserOptions` 选项即可，例如： ```javascript // vite.config.js export default { build: { terserOptions: { compress: { drop_console: true, drop_debugger: true } } } } ``` 上面的配置中，我们将 `drop_console` 和 `drop_debugger` 选项都设置为 `true`，这样 Terser 在压缩代码时会自动删除所有的 `console` 和 `debugger` 语句，从而减小代码体积。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值