构建Vite + Vue 项目

如何使用Vite构建vue项目 由3部分组成:template 写html代码、script js脚本vue3+ setup语法方式、style css样式,scoped限定只在本片段中生效,每个组件都应该有一个清晰的职责和数据流,没有顺序关系。 阅读详情
  • 文档

Vite官方中文文档•开始icon-default.png?t=N7T8https://cn.vitejs.dev/guide/

  • 方法

搭建Vite 项目(pnpm create vite),通过附加的命令行选项直接指定项目名称和模板(模板:vue、vue-ts、react ......)

如:

pnpm create vite my-vue-app --template vue
  • 步骤

1.构建项目

pnpm create vite 项目名称 --template 模板

2.切换到项目目录

cd 项目目录

 3.安装依赖

pnpm install

4.运行

pnpm run dev
  • 示例

1.

pnpm create vite my-vue-app --template vue

根据提示,执行以下命令:

2.切换到项目目录

3.安装依赖

4.运行

5.打开链接(【Ctrl+单击链接】)

【vue3】Vue3 + Vite 项目搭建 Vue3 + Vite + Vant UI 阅读详情

相关推荐

【Vue3 + Vite】Vite搭建 项目解构 Vue快速学习 第一期

vue3+vite项目搭建,安装启动停止,项目目录解构,组件说明,CSS导入方式,Vue3实现计数器....

Orion 3393

vite构建vue项目

---------- 使用create-vue搭框架(可选router和pinia) ------------------------- 使用vite搭框架(没有router和pinia) -------------------------- 组件库element-plus ---------------------- 预处理器 Sass ---------------------- 配路由 ------------------------- 配代理 -------------

m0_73420146的博客 1258

vue项目webpack、vite、rollup、parcel四种构建工具对比

Vue项目构建工具对比摘要(150字) 主流构建工具在Vue项目中表现各异:Webpack适用于复杂应用,支持精细配置但速度较慢;Vite基于ESM实现秒级启动和热更新,推荐用于Vue3开发;Rollup专注输出精简代码,适合组件库开发;Parcel以零配置见长。性能测试显示Vite开发体验最优(冷启动0.3s),Webpack生产优化更成熟,Rollup产物体积最小。选型建议:新项目优先Vite,组件库选Rollup,遗留项目可保留Webpack。工具迁移需权衡生态兼容性与配置成本,Vite正逐渐成为现代

在全栈和前端徘徊的程序员 1544

创建基于vite的vue项目

3.验证是否安装好:打开Windows的cmd命令行,输入npm --version,输出版本信息则安装成功,如下图所示。在src下新建plugins/nutui.js,以后需要增加组件只需要在该文件中添加即可。2.检验是否安装好:在cmd命令行中输入yarn -version,若输出版本信息则表示安装成功,如下图所示。node.js自带npm包管理工具,yarn也是nodejs下的包管理工具,可以根据自身选择适合的工具。//export导出,只有导出了,才能让别的文件进行import。

m0_69298614的博客 6334

【Vue3】使用Vite构建工具构建Vue3项目

一、利用cmd和vscode创建 二、利用webstorm创建

早睡早起长头发的博客 7035

Vue3通透教程【十七】Vite构建TS版本Vue项目

本系列将带领大家学习Vue3+TS+vite构成的前端工程化内容,本篇文章重点带领大家搭建Vue3+Ts版本项目!

商务合作欢迎私信我 4万+

【vue3】使用vite构建vue3项目

使用vite构建vue3项目、vite介绍、vite对比webpack

嗨,朋友你好!我是前端领域的工作者 3万+

还在手敲LaTeX公式?用Rime小狼毫打造你的专属数学输入法(附完整配置包)

本文介绍如何利用Rime小狼毫输入法引擎打造专属数学公式输入方案,显著提升LaTeX公式输入效率。通过详细配置教程和智能补全技巧,帮助科研人员和学生实现3-5倍的输入速度提升,特别适合学术写作和技术文档创作场景。

weixin_32520601的博客 282

vite+vue3项目构建

Vite 是一个现代化的前端构建工具,特别适合构建 Vue.js 应用程序。通过预构建和懒加载等优化方式实现快速开发和热更新,同时内置了一些优化策略,可以提高应用程序的性能和用户体验。Vue Cli如何使用Vite 构建Vue应用程序,可参考官网,该网站提供包括安装Vite,创建Vue项目,配置Vite选项,以及Vite开发服务器的使用方法等。此外,还提供丰富的文档和示例代码,帮助我们更好地理解和使用Vite。

xaudin的博客 1633

数字电子时钟——数字电路课设

本文设计了一种基于中小规模集成电路的数字电子时钟系统,采用模块化设计方法,包含晶振电路(CD4060+D触发器)、计时电路(74HC161计数器)、数码管驱动(CD4511)和整点报时功能。系统实现了60进制秒/分、24进制小时、7进制星期的计时显示,支持手动校时功能,并具备整点报时特性(59分54-58秒5次500Hz低音,59秒1次1000Hz高音)。通过分模块调试与整合,最终实物电路满足设计要求,获得优秀评价。

来自FZU——电子科学与技术专业 1488

开源滑翔伞升降速度表:基于STM32与传感器融合的DIY飞行仪表

传感器融合是现代嵌入式系统与物联网设备中的核心技术,它通过整合多个传感器的数据,利用滤波与估计算法,获得比单一传感器更精确、更可靠的环境感知能力。其技术价值在于提升系统的鲁棒性、精度和上下文理解能力,广泛应用于无人机导航、可穿戴设备、工业监测及智能驾驶等领域。本文聚焦于一个具体的工程实践案例——开源多功能滑翔伞升降速度表(Open-Vario),该项目巧妙地运用了**卡尔曼滤波器**进行气压与GNSS数据的融合,以精确计算升降率,并基于**FreeRTOS**实时操作系统构建了一个稳定、可扩展的嵌入式平台,

weixin_33657398的博客 176

vite构建vue3项目

使用vite创建vue3项目环境准备创建项目 环境准备 安装最新版本 @vuejs/app yarn global add @vue/cli # OR npm install -g @vue/cli 升级到最新版本 @vitejs/app yarn global upgrade @vue/cli # OR npm update -g @vue/cli 查看 vue 版本 vue -V @vitejs/app 依赖的 node 版本大于等于 12 故切换 node 版本,可查看该文章:使用

harmsworth的博客 1362

从《视觉SLAM十四讲》到项目实战:一文读懂拓扑地图与语义地图为何是服务机器人的未来

本文探讨了服务机器人地图技术的演进,从传统几何地图到拓扑地图与语义地图的跨越。通过分析栅格地图的局限性和拓扑地图、语义地图的优势,揭示了它们在动态开放环境中的智能应用。文章还介绍了多模态语义融合架构和动态语义更新技术,为服务机器人的未来发展提供了技术路线图。

weixin_30292843的博客 478

如何使用 Vue 3 中的 vite 进行项目构建?

在进入具体内容之前,了解一下 Vite 是什么是必要的。Vite 是由 Vue 的创建者尤雨溪所开发的一个新型前端构建工具。Vite 以其快得惊人的冷启动速度和即时热更新而备受关注,并且无缝支持现代 JavaScript 特性,比如 ES 模块。此外,Vite 的配置简单且灵活,这让开发者能够快速启动项目并自定义各种构建细节。有时,我们需要对 Vite 的默认配置进行一些自定义设置,比如配置别名或者代理。我们可以打开文件,在这个文件中,我们可以进行各种配置。

有我更精彩的博客 1242

通达信源码-金牛暴起

趋势1:=3*SMA((CLOSE-LLV(LOW,27))/(HHV(HIGH,27)-LLV(LOW,27))*100,5,1)-2*SMA(SMA((CLOSE-LLV(LOW,27))/(HHV(HIGH,27)-LLV(LOW,27))*100,5,1),3,1) AND SJTJ,DOTLINE,COLORGRAY;谷:=(((DD-LLV(DD,21))/(HHV(DD,21)-LLV(DD,21)))*(4))*(25);{0,25指高度};

qq_57222058的博客 3520

unity打包流程整理-Windows/Mac/Linux平台

1.Platform(平台)功能: 选择目标构建的目标平台选项PC, Mac & Linux Standalone: 适用于 Windows、Mac 和 Linux 平台2.Target Platform(目标平台)功能: 选择具体的操作系统版本选项Windows: 针对 Windows 操作系统Mac: 针对 macOS 操作系统Linux: 针对 Linux 操作系统3.Architecture(架构)功能: 选择应用程序的目标处理器架构选项x86: 针对 32 位系统。

weixin_42333247的博客 5135

Vue-cli 与Vite 环境搭建与项目构建

官网地址:https://cli.vuejs.org/zh/Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统,提供:通过@vue/cli实现的交互式的项目脚手架。通过@vue/cli实现的零配置原型开发。一个运行时依赖 (@vue/cli-service),该依赖:3.1 可升级;3.2 基于 webpack 构建,并带有合理的默认配置;3.3 可以通过项目内的配置文件进行配置;3.4 可以通过插件进行扩展。一个丰富的官方插件集合,集成了前端生态中最好的工具。

淘小欣的博客 2791

电力现货市场出清机制解析:从理论到实践(附节点电价计算实例)

本文深入解析电力现货市场的核心出清机制,重点阐述了节点边际电价的计算原理与实践方法。通过对比系统边际电价、节点边际电价和分区边际电价三种模式,揭示了市场出清价格如何反映电力供需与网络阻塞。文章结合IEEE 30节点系统,提供了基于MATLAB和最优潮流模型的计算实例,详细展示了从构建模型到求解对偶变量以获取节点电价的全过程,为理解电力市场定价机制提供了从理论到实践的完整路径。

whisky的博客 756

用 vite 构建 vue3 + TS 项目实战

1、项目初始化 npm install create-vite@2.9.0 -g // 全局安装 create-vite npm init @vitejs/app shop-admin // 初始化项目(shop-admin 项目名) cd shop-admin npm install npm run dev 2、eslint 基础配置 npm install eslint --save-dev npm install@eslint/create-confi...

weixin_37883657的博客 1万+

【YOLO部署Android安卓手机APP】YOLOv8部署到安卓实时目标检测识别——官方/自训练模型YOLOv8人脸/车辆等目标检测(可自定义更换其他目标)

本文首先讲解如何直接使用官方训练好的模型部署到手机APP进行人脸检测,然后讲解如何修改其他目标进行检测,以车辆检测为例进行讲解如何训练自己的模型部署到手机APP。本文为详细设计/配置文档,包含完整所需的环境配置搭建,项目工程配置步骤等,手把手记录使用pycharm和Android studio的工程开发过程,实现YOLO部署到安卓。实战开发,亲测无误。本项目实现了人脸检测和车辆检测,当然,以此你可以按照本项目开发步骤扩展更换为其他目标进行检测,例如更换为车牌、手势、人脸面部活动、人脸表情、火焰烟雾、行人等

嵌入式阿齐Archie 1万+

LinePhone3.2.7(android端最新版本) sip客户端

SIP客户端For android:LinePhone3.2.7(最新版本),官网地址:http://www.linphone.org/

vite+vue3构建vite项目

vite+vue3构建vite项目

weixin_42116704的博客 160

android 蓝牙通讯demo

android 下蓝牙通讯demo,实现了发现蓝牙,使能蓝牙,通过蓝牙发送消息。

vscode构建Vue3.0项目(vite,vue-cli)

vscode构建Vue3.0项目(vite,vue-cli)

cai_4的博客 6794

ssm框架搭建

这个是一个在idea上成功跑起来的ssm框架项目,保存在这里方便以后使用直接下载

OV9734 DATASHEET,完整规格书

OV9734完整规格书,包括电气参数,尺寸规格,寄存器配置表等

【vue3】vite构建vue3新项目

Vite 是新一代前端构建工具,速度极快,是创建 Vue 3 项目的推荐方式。命令行会提示选择框架:选择vue+ts(TypeScript)①:Select a framework(选择框架)②Select a variant(选择变体/版本)(该版本是安全版本,部分版本如果开放外网的话有漏洞,好像是因为vite版本过高,将vite版本从。)即可正常启动,默认运行在。

weixin_45658815的博客 758

vite+vue3项目空壳的构建

vite-vue3项目空壳的详细构建+vue3模板配置

weixin_51938803的博客 722

手把手教你用Vite构建第一个Vue3项目

今天就来说说怎么创建第一个Vue3项目。并安装Element Plus 及一些常用配置,最终实现一个简单增删改查页面

再小的帆也能远航,把分享变成一种习惯 1万+
上一篇: 此模块是使用 “export =” 声明的,只能在使用“allowSyntheticDefaultImports”标志时用于默认导入
下一篇: vscode快捷键
云海洋和天
博客等级 码龄7年 402粉丝 43原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明:

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

余额充值