vue3.0+vite初体验

已于 2022-04-18 14:14:31 修改
阅读量1.1k 收藏
点赞数
文章标签： css3 css html
于 2022-03-29 09:24:17 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/MrGuange_/article/details/123811918
版权

1、准备工作

node版本要求在12.0.0以上

2、创建项目

npm init vite@latest
...
cd myproject
npm install
npm run dev

  • 输入项目名称 输入项目名称

  • 选择框架 选择框架

  • 是否选择ts是否选择ts

  • 创建成功
    在这里插入图片描述

  • 根据提示安装依赖，第一次使用Vite的同学想必会被这种秒启动的速度震惊到
    在这里插入图片描述

Mr不懂
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vite和Vue3：Vite是一种新的开发服务器和构建工具，它利用了现代浏览器支持的原生ES模块导入，为开发者提供了极速的冷启动和即时热更新
哎 你看的博客
06-22 901
I. Vite 的概述 Vite 的定义和功能 Vite 的主要特点和优势 II. Vite 的工作原理 原生 ESModule 冷启动和即时热更新 依赖预构建 III. Vue3 与 Vite Vue3 的新特性和优化 如何在 Vite 中使用 Vue 3 IV. Vite 在项目中的应用 安装和配置 Vite 在 Vite 项目中使用 Vue 3 Vite 的插件系统 V. Vite 对前端开发的影响 开发过程中的提升 构建速度和效率 Vite 对未来前端开发的影响和价值
vue3-element-plus-typescript：基于vue-cli vite + vue3.0 + element-plus + typescript +模拟数据的后台管理系统列表页增删改查功能
02-14
实践vue3.0的新特性以及vite打包工具，采用的是vue3.0的组成API，体验vue3和typescript以及打包工具vite等页面功能列表页列表页增删改改查采用vue3 composition api typescript在项目中运用，提供类型检查 模拟数据...
Vue3+TS+Vite中 vConsole 插件的使用
前端菜菜DayDayUp的博客
08-29 2112
Vue3+TS+Vite中 vConsole 插件的使用
Vue3+Vite快速搭建vue项目
无痕坚守本心的博客
12-22 2128
Vue3+Vite快速搭建vue项目webpack的特点Vite较webpack不同与改进之处Vite缺点安装node.js(正文开始，已安装的可以跳过此步骤)npm镜像设置及cnpm安装使用vite快速搭建vue项目 webpack的特点 webpack打包过程 1.识别入口文件 2.通过逐层识别模块依赖。（Commonjs、amd或者es6的import，webpack都会对其进行分析。来获取代码的依赖 3.webpack做的就是分析代码。转换代码，编译代码，输出代码 4.最终形成打包后的代码
从零搭建vite + vue3.0 + vuex + router + sass/less + naive
秋来九月八
07-12 2696
Vite官网安装vue的介绍 Vite 是一个 web 开发构建工具，由于其原生 ES 模块导入方式，可以实现闪电般的冷服务器启动。 通过在终端中运行以下命令，可以使用 Vite 快速构建 Vue 项目。 使用 npm： $ npm init @vitejs/app <project-name> $ cd <project-name> $ npm install $ npm run dev 或者 yarn： $ yarn create @vitejs/app <project
这是一份保姆级Vue3+Vite实战教程
热门推荐
很多时候犯错都是在不知情的情况下发生的
02-12 1万+
ESLint 不仅能够检测代码中的错误，而且在许多情况下，可以为我们自动纠正错误。如上，这是我电脑 nrm 管理的镜像源列表，最后一个是我公司内网的所以打码了，除了最后一个都是安装 nrm 自带的，你可以使用 nrm use 命令很方便的去切换源，npm 默认就是列表中名为 npm 的源，如果你下载不下来一些工具，可以切换为 taobao 源，当然安装完成后最好切回来，因为除了 npm 源，其他源在下载某些包时，都可能会出现一些莫名的问题。
vue3.0 + vite + ts 完成自动导入 vue API 和 自动导入组件及 element loading 指令无法正常使用解决方法
weixin_43191327的博客
04-06 9542
插件(两个组件, 都是 antfu( vite 核心团队成员 ) 写的) npm i unplugin-auto-import unplugin-vue-components -D 使用, 下面是最简单的使用方法 vue component 文档 auto-import 文档很简单, 还需自行探索, 大佬一贯思想, 他很懒, 不想写文档, 看源码就够了 // https://vitejs.dev/config/ export default defineConfig({ plugins: [ .
基于vue-cli / vite + vue3.0 + antd2.0 + ts4.0 的后台管理系统模板
10-15
总之，"基于vue-cli / vite + vue3.0 + antd2.0 + ts4.0 的后台管理系统模板"是一个结合了前沿技术的项目，它集成了前端开发的最佳实践，为开发者提供了一个高效、稳定且美观的开发起点。通过深入理解和运用这些技术...
drag-demo:基于vue3.0 + ts的可视化组件拖拽demo
03-10
通过这个项目，开发者可以学习到如何在Vue 3中结合TypeScript实现组件的拖放功能，以及如何利用Vite优化开发流程，并使用Vant UI提升用户体验。这是一个很好的实践案例，适合对前端框架和工具链有一定了解的开发者...
Vue3.0+Vant3.0+Vue-Router4.0高仿微信记账本H5项目。.zip
10-21
Vue3.0、Vant3.0 和 Vue-Router4.0 是当前前端开发领域中的热门技术栈，它们被广泛应用于构建高效、响应式的Web应用。在这个“Vue3.0+Vant3.0+Vue-Router4.0高仿微信记账本H5项目”中，开发者利用这些技术来实现一个...
Vue3.0 + Vite + Typescript + Sass + ElementUI plus , 后台系统 .zip
最新发布
01-02
Vue3.0、Vite、Typescript、Sass以及ElementUI Plus是现代前端开发中一组强大的技术栈，常用于构建高效、可维护的后台管理系统。本文将深入探讨这些技术及其在构建后台系统中的应用。 首先，Vue3.0是Vue.js框架的...
安装配置vue3+vite
weixin_44523517的博客
04-24 1万+
安装配置vue3+vite
UEFI 基础教程 （二）：UEFI工程模块文件
weixin_41028621的博客
01-13 2648
1.概述   介绍EDK2的两个概念模块(Module)和包(Package)。 “包”是一组模块及平台描述文件(.dsc文件)、包声明文件(.dec文件)组成的集合，多在以*pkg命名的文件夹中，一般也称这样的文件夹为一个包。 模块是UEFI系统的一个特色。模块(可执行文件，即.efi文件)像插件一样可以动态地加载到UEFI内核中。对应到源文件，EDK2中的每个工程模块由元数据文件(.inf)和源文件(有些情况也可以包含.efi文件)组成。   主要介绍3种应用程序模块、UEFI驱动模块和库模
Vue3.0快速使用 vite创建Vue3.0
qq_37167086的博客
04-17 3073
vue3.0 API文档地址：https://vue-composition-api-rfc.netlify.app/ 1.vue/cli 3以上 2.新建一个项目 vue create vue3-2020-4-17（该项目仍然是2.0） 3.使用vue add vue-next命令，将项目升级为3.0（如果报错可以尝试将vuecli升级到最新版本） ...
Vue3 + Vite2 + TypeScript 开发复盘总结
我本可以容忍阳光，如果我不曾见过太阳，然而阳光已使我荒凉，成为更新的荒凉。
05-02 873
点击上方前端瓶子君，关注公众号回复算法，加入前端编程面试算法每日一题群来源：代码与野兽https://juejin.cn/post/6950487211368251399背景近期在研发一...
vue3.0+vite根据开发和生产的全局环境变量配置和使用
sinat_39305013的博客
03-23 2214
首先是默认package.json中 "scripts": { "dev": "vite", // 默认mode为development "build": "vue-tsc --noEmit && vite build", // 默认mode为production "preview": "vite preview" } 指定默认则使用vite --mode test 在项目跟路径下创建 .env.development .env.production 其中.en
关于uniapp的真机调试
qq_43505774的博客
12-27 2069
下载360安全卫士 安装360手机助手（其他软件助手也可以） 将数据线插入电脑连接USB，把手机的开发者模式打开 魅族为例 点击设置 打开关于手机 多次点击版号 打开开发者模式 然后重回设置 点击辅助功能 下拉 就会看见 开发者选项 打开USB调试 用手机助手连接手机成功之后 打开HBuilderX使用运行 就可以看见真机型号， 会提示安装真机插件大概一百多m 然后360会自行安装手机360助手 然后就安装App在手机上面运行 ...
使用Vue3.0 beta4与Vite0.6.0制作一个todoList
干巴爹兔的博客
04-28 1106
安装 Vite的Github地址：Vite npx create-vite-app <project-name> 目录结构（README和Licence是自己加的） 可以看到vue版本是最新beta版4.0 { "name": "vite6", "version": "0.0.0", "scripts": { "dev": "vite", "build"...
vue3和vite
qq_34200636的博客
12-30 2097
新建vue3项目，并使用vite
vue3.0+vite路由
05-01
Vue3.0和vite都是JavaScript技术领域的热门话题，而在Vue3.0中，vite路由也是一个备受关注的新特性。vite是一个构建工具，旨在优化开发流程和生产时的编译速度。它与Vue3.0集成非常紧密，可以轻松地创建新项目并使用其路由功能。 在Vue3.0应用中，vite路由通过Router API来实现。Router API包含了一系列函数和属性，使得路由的配置变得非常简单。使用Router API，开发者们可以轻松地定义路由、导航、路由加载以及路由转换等功能，同时还能够享受到vite带来的高效建设体验。 vite路由的另一个显著特点是它支持懒加载。懒加载是一种非常流行的技术，因为它可以缩短首次加载的时间和减少资源的消耗。在vite路由中，可以定义多个不同的懒加载方式，例如按需加载、按分块加载等。这样一来，开发者们可以根据具体需求选择最适合的懒加载方法，提高应用的性能和用户体验。 总的来说，vite路由是Vue3.0生态系统中的一部分，它提供了一种新的、高效的路由处理方式，能够使开发者们更快速地构建出复杂的Web应用。如果你正在开发Vue3.0应用，不妨试试vite路由，相信它一定会带来不少惊喜。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值