vue3+vant4 vant4主题色配置（简单快捷）

最新推荐文章于 2024-03-15 15:33:08 发布
最新推荐文章于 2024-03-15 15:33:08 发布
阅读量3.5k 收藏 3
点赞数 3
分类专栏： vue 自定义主题色 文章标签： vue3 vant4 移动端适配
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhang__ao/article/details/128285250
版权

我是pc端的项目，vue3+vite+Element Plus，现在硬是要兼容移动端，想了想为了以后的功能拓展，只好又引入了vant，因为移动端项目很久不做了 ，发现现在都是vant4了，开局第一步自然就是主题定制～搞起～

直接上截图吧～照着搞就行了还直观～

1.如图创建 vant.scss或者less 

2.修改主题色或其他样式

 把默认色改为 #4f41d6

3.修改配置

打开vite.config

@use '/@/assets/css/vant.scss'as *;   便于复制我粘贴出来，这是我的路径，根据实际情况修改

 4.重启项目，记得重启！

5.效果展示

okok～就这样，很简单吧～ 

z__a
关注
  • 3
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
vue3:基于vue3+vue-router4+webpack4+vant搭建的手机端基础框架
05-08
vue3 基于vue3+vue-router4+webpack4+vant搭建的手机端基础框架 1、可以自适应手机屏幕 2、HttpRequest文件夹主要是axios基础配置配置、Http请求封装，可根据自己需求进行修改（暂未测试） 3、styles文件件主要是公共的css样式（本项目基于less），入口文件是index.less,自定义的css问津需要导入到index.less才会生效 4、util文件夹主要是以下常用的工具类（待完善） 5、router.js是路由配置文件 6、env.* 三个文件是根据不同环境的配置，主要是配置VUE_APP_BASE_URL这个参数加（接口地址）。VUE_APP_STATISTICS_URL是自定义的接口地址可不用 最后在config/properties.js中配置引用。config文件夹 主要放一些配置信息文件 7、vue.config
vant 4 正式发布，支持暗黑主题，那么是如何实现的呢
u012384510的博客
02-13 1573
2022年10月25日首发于掘金，现在同步到公众号。11. 前言大家好，我是若川。我倾力持续组织了一年多源码共读，感兴趣的可以加我微信 lxchuan12 参与。另外，想学源码，极力推荐关注我写的专栏《学习源码整体架构系列》，目前是掘金关注人数（4.6k+人）第一的专栏，写有20余篇源码文章。我们开发业务时经常会使用到组件库，一般来说，很多时候我们不需要关心内部实现。但是如果希望学习和深究里面的原...
Vue3+Vant4 电商平台-首页面详细教程
majingbobo的博客
12-25 1246
4.3.1 商品模块组件（src/components/GoodsItem.vue）4.3.2 首页面具体代码（src/views/Index.vue）4.3.3 路由配置（src/router/index.js）如果不会创建，之前文章有详细讲解，请查看。4.2. 安装Vue-Router / Vant。使用Vue3+Vant4 实现首页面的制作。4.3.4 主文件（main.js）4.3.5 主页面（App.vue）4.1. 创建Vue3 项目。到此，整个案例整理完毕！
vite基础概述+搭建vue项目基础框架+Vant组件库
最新发布
LB_bei的博客
03-15 875
Vite" 是一个构建工具和开发服务器，专为现代 JavaScript 应用程序而设计。它旨在提供快速的开发和构建速度，并通过利用浏览器原生支持的 ES 模块特性来实现。Vite 使用了一种新的开发服务器架构，可以实现快速的冷启动时间，加速开发过程。Vite 支持模块热更新，可以在不刷新整个页面的情况下实时更新代码，提高开发效率。Vite 利用 ES 模块的特性，可以按需导入模块，避免不必要的资源加载，减小构建体积。
日间、夜间模式切换
云淡风轻的博客
07-15 903
MainActivity代码：import android.support.v7.app.AppCompatActivity; import android.os.Bundle;public class MainActivity extends AppCompatActivity { @Override protected void onCreate(Bundle savedInsta
Vant 4 可制定的移动端组件库
weixin_58091723的博客
08-04 1527
Vant 4 - 轻量、可定制的移动端组件库 (gitee.io)在现有项目中使用 Vant 时，可以通过。
vant4的基础用法
m0_58002043的博客
10-30 2万+
这篇文章会手把手的教你如何用vant开发h5
项目实战：《智慧线上购物商城》：基于vue3+vite+vant4组件(一)
qq_52264068的博客
02-11 3350
《智慧线上购物商城》：基于vue3+vite+vant4组件(一)
简单小众电商购物项目模板：基于 Vue 3 和 Vant 4 的纯前端开发方案
你若盛开，清风自来
02-02 2838
开发者可以根据自身需求创建自定义主题、添加新的组件或修改现有组件的样式和行为。
分析 vant4 源码，学会用 vue3 + ts 开发毫秒级渲染的倒计时组件，真是妙啊
u012384510的博客
02-17 2109
2022年11月23日首发于掘金，现在同步到公众号。11. 前言大家好，我是若川。推荐点右上方蓝字若川视野把我的公众号设为星标。我倾力持续组织了一年多源码共读，感兴趣的可以加我微信 lxchuan12 参与。另外，想学源码，极力推荐关注我写的专栏《学习源码整体架构系列》，目前是掘金关注人数（4.6k+人）第一的专栏，写有20余篇源码文章。我们开发业务时经常会使用到组件库，一般来说，很多时候我们不需...
vant官网-vant ui 首页-移动端Vue组件库
热门推荐
超人不会飞
07-16 5万+
Vant 是有赞前端团队开源的移动端vue组件库，适用于手机端h5页面。 鉴于百度搜索不到vant官方网址，分享一下vant组件库官网地址，方便新手使用 vant官网地址https://vant-contrib.gitee.io/vant/#/zh-CN/ 通过 npm 安装 在现有项目中使用 Vant 时，可以通过npm或yarn进行安装： # Vue 2 项目，安装 Vant 2： npm i vant -S # Vue 3 项目，安装 Vant 3： npm i vant@ne...
基于vue-cli4和vant搭建的移动端开发模板
02-19
基于vue-cli4和vant搭建的移动端开发模板
vue-cli4-vant：基于vue-cli4和vant的移动端开发模板
02-06
vue-cli4-vant 简介 这是基于vue-cli4实现的移动端H5开发模板，其中包含项目常用的配置及组件封装，可以快速开发使用。 技术栈：vue-cli4 + webpack4 + vant + axios +更少+ postcss-px2rem // 安装依赖 npm install // 本地启动 npm run dev // 生产打包 npm run build 配置优势 vant是一套轻量，可靠的移动端Vue组件库，非常适合基于vue技术栈的移动端开发。在过去很长的投放内，本人用的移动端UI框架都是vux。后来由于vux不支持vue-cli3，就转用了vant，必须说，无论是
vant侧边导航栏SideBar
07-03
vant侧边导航栏SideBar
vue3+vite2+ts+vant3 项目demo
04-16
此项目 按照大佬文章 一步步学习搭建 https://juejin.cn/post/7036745610954801166?share_token=5dd94aae-bed2-4733-93ac-306118376443；感谢大佬
Java毕业设计：外卖点餐系统（springboot+vue+vant+element-ui）.zip
05-03
Java毕业设计：外卖点餐系统（springboot+vue+vant+element-ui） Java毕业设计：外卖点餐系统（springboot+vue+vant+element-ui） Java毕业设计：外卖点餐系统（springboot+vue+vant+element-ui） Java毕业设计：...
vue3移动端项目搭建，vue3+vant+vite+axios+pinia+sass
02-08
在使用项目前请确保已安装node、yarn工具，node版本18+，此项目构建主要集成：axios、pinia、vant、sass、vite和vue3，其中还会介绍到如何跨页面传递数据、国际化配置、rem适配、状态管理持久化储存等功能 vue3：...
vue3-vite-ts-Vant：vue3 + vite + ts + Vant + vuex +路由器
03-04
vue3-vite-ts-Vant vue3 + vite + ts + Vant + vuex +路由器 项目详细介绍 项目预览
vue请求拦截器获取当前请求路径及相关信息
小不点的博客
03-10 5620
vue请求拦截器获取当前请求路径及相关信息
vue3+vant4 登录注册页代码
03-28
抱歉，作为AI语言模型，我无法提供完整的代码。以下是一个简单的登录/注册页面的Vue3和Vant 4示例。 ```vue <template> <van-form ref="loginForm" v-model="loginForm" label-width="80px" :rules="loginRules" > <van-field v-model="loginForm.username" name="username" label="用户名" placeholder="请输入用户名" :rules="[{ required: true, message: '请输入用户名' }]" /> <van-field v-model="loginForm.password" name="password" label="密码" placeholder="请输入密码" type="password" :rules="[{ required: true, message: '请输入密码' }]" /> <van-button type="primary" @click="login">登录</van-button> </van-form> <van-divider /> <van-form ref="registerForm" v-model="registerForm" label-width="80px" :rules="registerRules" > <van-field v-model="registerForm.username" name="username" label="用户名" placeholder="请输入用户名" :rules="[{ required: true, message: '请输入用户名' }]" /> <van-field v-model="registerForm.password" name="password" label="密码" placeholder="请输入密码" type="password" :rules="[{ required: true, message: '请输入密码' }]" /> <van-field v-model="registerForm.confirmPassword" name="confirmPassword" label="确认密码" placeholder="请再次输入密码" type="password" :rules="[ { required: true, message: '请再次输入密码' }, { validator: (rule, value, callback) => { if (value !== this.registerForm.password) { callback(new Error('两次输入的密码不一致')); } else { callback(); } }, }, ]" /> <van-button type="primary" @click="register">注册</van-button> </van-form> </template> <script> export default { name: 'LoginRegisterPage', data() { return { loginForm: { username: '', password: '', }, registerForm: { username: '', password: '', confirmPassword: '', }, loginRules: { username: [{ required: true, message: '请输入用户名' }], password: [{ required: true, message: '请输入密码' }], }, registerRules: { username: [{ required: true, message: '请输入用户名' }], password: [{ required: true, message: '请输入密码' }], confirmPassword: [ { required: true, message: '请再次输入密码' }, { validator: (rule, value, callback) => { if (value !== this.registerForm.password) { callback(new Error('两次输入的密码不一致')); } else { callback(); } }, }, ], }, }; }, methods: { login() { this.$refs.loginForm.validate((valid) => { if (valid) { // TODO: 登录逻辑 } }); }, register() { this.$refs.registerForm.validate((valid) => { if (valid) { // TODO: 注册逻辑 } }); }, }, }; </script> ```

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值