前言回顾之前，使用cube-ui实现公司售后部门方便查看公司产品状态及配置设备的一个移动端项目，其中有个小功能cube-ui实现搜索过滤、高亮功能。cube-ui实现搜索过滤、高亮功能地址，如何呢，售后开始搞事了，说这个功能不好用什么的，不能粘贴啥的（因为我设置了点击就弹让他选的），说要换个UI，说这UI不好用。一、需求流程需求还是一样，只是ui变了，逻辑也会变点实现效果原效果：现效果：差别：其实效果没多大变化，只是更换了UI和选择框标题修改为输入框功能实现概述：vant实现是通过输入框（van-field）事件触发弹出层（van-popup），弹出层（van-popup）中包括了选择器（va
前言回顾之前，使用cube-ui实现公司售后部门方便查看公司产品状态及配置设备的一个移动端项目，其中有个小功能cube-ui实现搜索过滤、高亮功能。cube-ui实现搜索过滤、高亮功能地址，如何呢，售后开始搞事了，说这个功能不好用什么的，不能粘贴啥的（因为我设置了点击就弹让他选的），说要换个UI，说这UI不好用。一、需求流程需求还是一样，只是ui变了，逻辑也会变点实现效果原效果：现效果：差别：其实效果没多大变化，只是更换了UI和选择框标题修改为输入框功能实现概述：vant实现是通过输入框（van-field）事件触发弹出层（van-popup），弹出层（van-popup）中包括了选择器（va
一、准备工作 1.下载HBuilder——uni-app（https://uniapp.dcloud.io/） 2.下载微信开发者工具： https://developers.weixin.qq.com/miniprogram/dev/devtools/devtools.html二、创建项目 1.在点击工具栏里的文件->新建->项目： 2.选择uni-app类型，输入工程名，选择模板，点击创建，即可成功创建。选择Vue对应的开发版本 3.运行到微信开发者工具，其他的运行方法可以参考官方文档注意：第一次运行的时候需要配置微信开发者工具所在位置：
下面推荐2款手机/移动端的UI框架。其实还有很多的框架，各个大厂都有UI框架。目前，找来找去，只有腾讯的移动端是setup语法写的TDesign，其他大厂，虽然都是VUE3写的，但是都还未改成setup的语法，而且，腾讯的版本也比较新，所以暂时不做案例了。我们使用成熟的UI框架Vant和NutUI来演示。其中京东的NutUI组件，还有小程序组件。目录一、Vant二、NutUI一、Vant官网，Vant4-Alightweight,customizableVueUIlibraryformobilewebapps.，多的不说了，可以看官网介绍，下面我们直接创建程序。1.我们使用HBuilderX创
一、项目介绍以及项目地址 项目介绍：vue2搭建。项目通过amfe-flexible与postcss-pxtorem实现移动端适配；通过Vantui作为项目的组件库；通过Vuex管理数据状态，进行模块化管理；通过VueRouter配置项目路由，进行模块化管理；封装axios进行数据的请求，以及一些页面逻辑的交互和简单的代码说明。 项目地址：h5-vant 联系博主：如有问题可联系博主=》QQ：1596892941 VX：weiyi1596892941 项目说明：如果项目需要直接拿去用，如果想研究一下就向下观看。如果有其他想法请留言或者联系我（期待大家提
theme:smartbluehighlight:dark创建项目创建后的项目此处插入一个坑亦可以使用uniappvue-cli创建项目vuecreate-pdcloudio/uni-preset-vuemy-project使用vue3/vite创建项目（如命令行创建失败，请直接访问gitee下载模板）npxdegitdcloudio/uni-preset-vue#vitemy-vue3-project创建后的目录如下（uview框架不支持vue3）运行项目使用yarndev:mp-weixin打开小程序开发工具引入打包后的dist包下weixin包即可在开发工具中使用，打包发布同样Hubil
theme:smartbluehighlight:dark创建项目创建后的项目此处插入一个坑亦可以使用uniappvue-cli创建项目vuecreate-pdcloudio/uni-preset-vuemy-project使用vue3/vite创建项目（如命令行创建失败，请直接访问gitee下载模板）npxdegitdcloudio/uni-preset-vue#vitemy-vue3-project创建后的目录如下（uview框架不支持vue3）运行项目使用yarndev:mp-weixin打开小程序开发工具引入打包后的dist包下weixin包即可在开发工具中使用，打包发布同样Hubil
1.先在根目录创建wxcomponents文件夹2.打开https://github.com/youzan/vant-weapp下载最新的vant-Weapp 3.把我们下好的文件vant-weapp里面只留下dist其余的可以全部删掉，然后把vant-weapp放到wxcomponents里面4.在App.vue引入vant样式@import'/wxcomponents/vant-weapp/dist/common/index.wxss'5.然后在pages.json引入（局部引入）"usingComponents":{ "van-button":"/wxcompon
1.先在根目录创建wxcomponents文件夹2.打开https://github.com/youzan/vant-weapp下载最新的vant-Weapp 3.把我们下好的文件vant-weapp里面只留下dist其余的可以全部删掉，然后把vant-weapp放到wxcomponents里面4.在App.vue引入vant样式@import'/wxcomponents/vant-weapp/dist/common/index.wxss'5.然后在pages.json引入（局部引入）"usingComponents":{ "van-button":"/wxcompon
前两天在做一个自定义页面的功能模块，中间涉及到预览组件的开发，我就在想中间预览组件能不能用开源的专门做H5端的组件UI库，这样就开发起来就方便很多，不用自己一个个地去写这些组件了，于是就找到了Vant组件，感觉用起来还挺方便的，记录一下使用方法。效果如下图：自定义页面一、安装Vant#如果安装有问题，使用cnpm试一试npmivant@latest-v2-S二、配置自动按需引入组件(推荐)1.根目录找到babel.config.js文件，在plugins数组中添加module.exports={presets:['@vue/cli-plugin-babel/preset'],plugins:[
