uni-app加入vant ui组件,并修改引用时的报错

uni-app加入vant ui

1 下载vant包,这里去github下载

Vant - Mobile UI Components built on VueMobile UI Components built on Vuehttps://youzan.github.io/vant/#/zh-CN/

https://github.com/youzan/vanthttps://github.com/youzan/vant

2 解压vant包,并把【dist】文件夹复制

 3 在你的uni-app目录下创建文件夹【wxcomponents】,再创建【vant】文件夹,并把vant的dist文件夹拷贝至此,此方法类似微信小程序,且不需要NPM安装

4 配置vant

4.1 App.vue,style中增加引用

@import "/wxcomponents/vant/dist/common/index.wxss";

4.2 pages.json,globalStyle中全局引入某个组件,如下图引入的是BUTTON

"usingComponents":{
            "van-button": "/wxcomponents/vant/dist/button/index"
 } 

此时,如果你运行时,它会报错,如下图

4.3 修改上面错误

4.3.1修改common/index.wxss文件,查找【url】,并在url前增加一个空格,此部步骤有三处。 

4.3.2 同上步,再修改common/index.vue文件,查找【url】,并在url前增加一个空格,此部步骤有三处。

 4.3.3 修改common/index.vue文件,修改第3,4行处代码

v1 = v1?v1.split('.'):[];
v2 = v2?v2.split('.'):[];

5 在页面中增加van-button组件

<van-button type="info">hello</van-button>

最后一步,运行你的程序即可。

此时,你的uni-app就引入了vant-ui了。没有经验,如果有更好方法,欢迎讨论!

### 集成Vant UI库到Uni-app项目 为了在uni-app项目中集成使用Vant的sidebar组件,需遵循特定步骤来确保兼容性和功能性。 #### 安装依赖包 首先,在命令行工具中进入项目的根目录执行npm安装命令以引入Vant库: ```bash npm install @vant/weapp -S --production ``` 此操作会下载必要的文件至`node_modules`文件夹内[^1]。 #### 引入组件 接着修改`pages.json`配置文件,注册所需使用的Vant组件。对于sidebar及其关联项而言,则添加如下代码片段于适当位置: ```json { "usingComponents": { "van-sidebar": "@vant/weapp/sidebar/index", "van-sidebar-item": "@vant/weapp/sidebar-item/index" } } ``` 上述设置使得可以在页面模板里通过自定义标签形式调用这些UI部件[^2]。 #### 编写页面结构与样式 创建一个新的`.vue`文件作为承载sidebar逻辑和平铺内容展示区域的基础单元。在此处利用之前声明过的组件标签构建布局框架,绑定相应的数据模型属性给它们控制显示状态变化。 ```html <template> <view class="container"> <!-- 左侧导航栏 --> <van-sidebar v-model="activeKey" @change="onChange"> <van-sidebar-item title="选项一"/> <van-sidebar-item title="选项二"/> <van-sidebar-item title="选项三"/> </van-sidebar> <!-- 右侧主要内容区 --> <view :class="{hideSidebar:!opened,openSidebar:opened}"> 主要内容... </view> </view> </template> <script> export default { data(){ return { activeKey:0, opened:true }; }, methods:{ onChange(event){ console.log('切换到了第', event.detail,'页'); // 更新打开关闭标志位 this.opened=!this.opened; } } }; </script> <style scoped lang="scss"> .container{ display:flex; .hideSidebar{ /* 当隐藏 */ transform:translateX(-75%); } .openSidebar{/* 显示状态下 */ transition:.3s ease-out; } } </style> ``` 这段示例展示了如何组合运用Vue语法特性以及CSS类名动态切换机制达成交互效果,同保持良好的用户体验[^3]。
评论 9
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值