使用Rsbuild构建基于Vue3+Vant4开发h5应用

目录

一、介绍

1.1 Vant介绍

1.2 Rsbuild介绍

1.3 Vue介绍

 二、构建应用

1.第一步

2.第二步

3.第三步

4.第四步

5.第五步

6.在项目中使用 Vant4 组件

7.移动端适配Rem  

8. 执行 cnpm run dev 启动项目 


一、介绍

1.1 Vant介绍

Vant 是一个轻量、可定制的移动端组件库,于 2017 年开源。

目前 Vant 官方提供了 Vue 2 版本、Vue 3 版本和微信小程序版本,并由社区团队维护 React 版本和支付宝小程序版本。

使用文档:快速上手 - Vant 4 (vant-ui.github.io) 

1.2 Rsbuild介绍

Rsbuild 是基于 Rspack 的构建工具,由 Vant 作者开发,具备一流的构建速度和开发体验,对 Vant 提供第一优先级支持。

使用文档: 快速上手 - Rsbuild

你可以通过以下命令创建一个 Rsbuild 项目:

npm create rsbuild@latest

1.3 Vue介绍

Vue (发音为 /vjuː/,类似 view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建,并提供了一套声明式的、组件化的编程模型,帮助你高效地开发用户界面。无论是简单还是复杂的界面,Vue 都可以胜任。 

使用文档:快速上手 | Vue.js (vuejs.org)

 二、构建应用

此前提是你已经安装了Node.js,并配置了环境。

使用命令 cnpm create rsbuild@latest 构建,然后根据提示一步步操作

1.第一步

键入上述命令后,第一步会让你填写创建的项目目录,默认给的是my-project ,按Tab键,再按Enter进入下一步;如果想自定义项目名字,就直接打上项目名字,然后按Enter键进入下一步。

2.第二步

第二步让你选择模板,提供的模板有

 按上下键选择,然后按Enter进入下一步。我选择Vue3

3.第三步

第三步让你选择开发语言,有JavaScript、TypeScript,按上下键选择,按Enter进入下一步。

4.第四步

第四步选择可用工具

◆  Select additional tools (press enter to continue)
│  ◻ Add Biome for code linting and formatting
│  ◻ Add ESLint for code linting
│  ◻ Add Prettier for code formatting
└

包括 Biome、ESLint 和 prettier,你可以使用上下箭头和空格进行选择。如果你不需要这些工具,可以直接按回车跳过。

5.第五步

第五步进入项目目录,执行 cnpm install 命令  

6.在项目中使用 Vant4 组件

6.1 Vue 3 项目,安装最新版 Vant,执行命令 cnpm i vant 

6.2 引入Vant 组件

import { createApp } from 'vue';
// 1. 引入你需要的组件
import { Button } from 'vant';
// 2. 引入组件样式
import 'vant/lib/index.css';

const app = createApp();

// 3. 注册你需要的组件
app.use(Button);

7.移动端适配Rem  

7.1 执行命令安装插件

cnpm i @rsbuild/plugin-rem

7.2 在 rsbuild.config.ts 文件中

import { pluginRem } from '@rsbuild/plugin-rem';

export default {
  plugins: [pluginRem()],
};

更多使用事项参考:Rem 插件 - Rsbuild 

8. 执行 cnpm run dev 启动项目 

启动后的项目主页

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/731881.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Python连接Redis(简单连接、连接池连接、存取数据示例)

天行健,君子以自强不息;地势坤,君子以厚德载物。 每个人都有惰性,但不断学习是好好生活的根本,共勉! 文章均为学习整理笔记,分享记录为主,如有错误请指正,共同学习进步。…

C语言王国——深入自定义类型(联合体、枚举)

目录 一、引言 二、联合体 2.1 联合体类型的声明 2.2 联合体大小的计算 2.3 联合体的实践运用 2.4 用联合体测试大小端字节序 三、枚举 3.1 枚举类型的声明 3.2 枚举类型的特点 四、总结 一、引言 我们刚学完了结构体,相信大家对自定义类型也有了些许了解&…

【Mac】FxFactory 8 Pro for Mac(视觉特效处理包)及同类型软件介绍

软件介绍 FxFactory Pro 是一款功能强大的插件管理和创作工具,专为视频编辑器和特效艺术家设计,适用于 macOS 系统。它集成了大量的视频特效插件,并与多种主流视频编辑软件无缝兼容,如 Final Cut Pro、Premiere Pro、After Effec…

第二十七篇——通信趋势:5G和IOT的商机在哪里?

目录 一、背景介绍二、思路&方案三、过程1.思维导图2.文章中经典的句子理解3.学习之后对于投资市场的理解4.通过这篇文章结合我知道的东西我能想到什么? 四、总结五、升华 一、背景介绍 借势的重要性,但是要做到借势,得先看到&#xff0…

文章解读与仿真程序复现思路——电力自动化设备EI\CSCD\北大核心《含氢综合能源系统多目标最优折中分布鲁棒低碳调度》

本专栏栏目提供文章与程序复现思路,具体已有的论文与论文源程序可翻阅本博主免费的专栏栏目《论文与完整程序》 论文与完整源程序_电网论文源程序的博客-CSDN博客https://blog.csdn.net/liang674027206/category_12531414.html 电网论文源程序-CSDN博客电网论文源…

vue3爷孙组件通信——provide和inject

父组件中提供数据&#xff0c;并在子组件中注入这些数据&#xff0c;从而实现了组件之间的数据传递。可用于兄弟组件通信&#xff0c;爷孙组件通信&#xff0c;父子通信。 provide( ‘注入名’, 注入值" ) 和 inject(‘注入名’) 第一代组件&#xff1a; <template>…

节能减排如何替电子行业巨头降低成本

尖端科技与环境之间的矛盾&#xff0c;已经不再是科幻小说家笔下的虚构。 先进芯片制造从熔化硅开始&#xff0c;到使用大功率激光进行光刻&#xff0c;再到创造和维护真空状态&#xff0c;以及持续清洁工作&#xff0c;每一个环节都需要大量的电力支持。据统计&#xff0c;半…

高精度乘法的实现

这是C算法基础-基础算法专栏的第九篇文章&#xff0c;专栏详情请见此处。 引入 上次我们学习了高精度加法的实现&#xff0c;这次我们要学习高精度减法的实现。 高精度乘法与高精度加法的定义、前置过程都是大致相同的&#xff0c;如果想了解具体内容&#xff0c;可以移步至我的…

IKVM.net调用Jar包实现SM4解密

近期&#xff0c;我深入学习了如何使用IKVM.net来调用Jar包&#xff0c;这次的学习经历让我对Java与.NET之间的互操作性有了更深刻的理解。IKVM.net作为一款强大的工具&#xff0c;为我们打通了Java与.NET之间的桥梁&#xff0c;使得在.NET环境中调用Java库变得简单而高效。 在…

VB.net实战(VSTO):VSTOwpf体验框架打包教程

如果是考虑到Wps用户较多&#xff0c;就不建议采用侧边栏的形式 只是个体验框架&#xff0c;界面未作美化&#xff0c;office的用户可以用任意一种窗体&#xff0c;喜欢那个界面就写那个界面&#xff0c;wps的侧边栏只能弹出一部分&#xff0c;每次需要的手动拖动。 打包了案例…

Spring Bean 生命周期详解

Spring Bean 生命周期详解 在 Spring 框架中&#xff0c;Bean 的生命周期由 Spring 容器全权管理。了解和掌握 Bean 的生命周期对于使用 Spring 开发稳定且高效的应用程序至关重要。本文将详细介绍 Spring Bean 生命周期的五个主要阶段&#xff1a;实例化、属性注入、初始化、…

如何基于Redis实现分布式锁?

分布式锁介绍 对于单机多线程来说&#xff0c;在 Java 中&#xff0c;我们通常使用 ReetrantLock 类、synchronized 关键字这类 JDK 自带的 本地锁 来控制一个 JVM 进程内的多个线程对本地共享资源的访问。 下面是我对本地锁画的一张示意图。 本地锁 从图中可以看出&#xf…

NetSuite Non-Inventory Item 公司内外采购总账影响

上篇文章提到&#xff0c;Non-Inventory Item的科目维护会根据各个企业的实际情况而有所不同&#xff0c;通常情况下都涉及外部交易&#xff0c;即对外采购与销售&#xff1b;另外也涉及到公司内部的相关交易&#xff0c;本篇以采购为例&#xff0c;来看看公司内外采购交易所对…

【分布式系列】分布式锁timeout了怎么办?

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学…

Apache IoTDB vs InfluxDB 开源版,架构性能全面对比!

分布式、端边云同步、读写查询性能&#xff0c;Apache IoTDB 与 InfluxDB 开源版的详尽对照&#xff01; 在物联网&#xff08;IoT&#xff09;领域&#xff0c;数据的采集、存储和分析是确保系统高效运行和决策准确的重要环节。随着物联网设备数量的增加和数据量的爆炸式增长&…

Mysql安装 /lib64/libc.so.6: version `GLIBC_2.28‘ not found 缺少 glibc-2.28.tar.gz

问题&#xff1a;安装Mysql出现 Error mysql/bin/mysqld: /lib64/libm.so.6: version GLIBC_2.27 not found (required by mysql/bin/mysqld) mysql/bin/mysqld: /lib64/libc.so.6: version GLIBC_2.28 not found (required by mysql/bin/mysqld) mysql/bin/mysqld: /lib64/lib…

【仿真建模-anylogic】INetwork相关接口说明

Author&#xff1a;赵志乾 Date&#xff1a;2024-06-22 Declaration&#xff1a;All Right Reserved&#xff01;&#xff01;&#xff01; 1. 类图 2. 说明 INetwork为辊道网络、路线网路的顶层接口&#xff0c;其组成元素有节点和路径两种&#xff0c;对应的接口为INode、IP…

Android-Android Studio-FAQ

1 需求 2 接口 3 Android Studio xml布局代码补全功能失效问题 最终解决方案就是尝试修改compileSdk 为不同SDK版本来解决问题&#xff0c;将原本34修改为32测试会发现xml代码补全功能有效了&#xff01; 参考资料 Android Studio xml布局代码补全功能失效问题_android studi…

10.华为路由器使用ospf动态路由连通两个部门网络

目的&#xff1a;实验ospf动态路由协议连通A与B部门 AR1配置 [Huawei]int g0/0/0 [Huawei-GigabitEthernet0/0/0]ip add 1.1.1.1 24 [Huawei]vlan batch 10 [Huawei]int Vlanif 10 [Huawei]int e0/0/0 [Huawei-Ethernet0/0/0]port link-type access [Huawei-Ethernet0/0/0]por…

CubeFS - 新一代云原生存储系统

CubeFS 是一种新一代云原生存储系统,支持 S3、HDFS 和 POSIX 等访问协议,支持多副本与纠删码两种存储引擎,为用户提供多租户、 多 AZ 部署以及跨区域复制等多种特性。 官方文档 CubeFS 作为一个云原生的分布式存储平台,提供了多种访问协议,因此其应用场景也非常广泛,下面…