随着Vue3 和 Vite 版本的不断更新完善，开发体验有了质的飞跃。因此，越来越多的大厂也逐步拥抱 Vue3。 利用Vite 脚手架工具可以很轻松生成以 Vue3 为模板的项目，但是作为Vue全家桶的 vue-router、vuex、axios等成员，需要自己一个一个去配置。于是便自行开发了本文讲到的 tive-cli 脚手
import axios from "axios"; import { Toast, Notify } from "vant"; /* base config */ const serve = axios.create( { baseURL: `https://cnodejs.org/api/v1`, timeout: 10*1000, headers: { "Cache-C
之前移动端需要筛选公司名字，就用了vant cascader，结果界面上就是第一个值object Object, 如下图： 以为是数据从子组件穿给父组件出现了什么问题，就将数据在控制台输出： 因为本人太菜了，看到这就以为是数据的问题，对数据进行了一系列问题，还找了好几个朋友问 最后发现是v-model ="opt
一、index页面引入在线js数据 //在index.html中引入省市区的json文件 <script src="https://sucai.suoluomei.cn/sucai_zs/file/20191217145416-area.js"></script> 二、引入vant组件 import Vue from 'vue'; import { Area } from 'vant'; Vue.use(Area);
h5页面使用全屏预览 最近需要在微信小程序中跳转到h5页面 在h5页面中需要进行图片预览展示 由于没有使用第三方的组件库。 只能手写，但是时间很紧张。 所以只能够寻找第三方的插件 vue-photo-preview的使用 <!-- 引入这个插件 --> <script src="vue-photo-preview.js"></script> <
一、创建项目 使用微信开发者工具创建小程序项目 二、初始化npm 在此目录下打开命令行工具，输入npm 命令，然后一路回车，会发现目录下多了一个 package.json文件 npm init 三、引入vant微信小程序包 1.npm安装 vant 包 # 通过 npm 安装 npm i @vant/weapp -S --production
vue 插件：postcss-px-to-viewport （布局换算插件） postcss.config.js module.exports = { plugins: { // ... 'postcss-px-to-viewport': { unitToConvert: 'px', viewportWidth: 750, unitPrecision: 5,
使用Vant3做移动端的感受 最近在使用Vant3做移动端。 感觉还可以，使用起来也简单，但是也遇见一些坑。 图片预览ImagePreview的使用 在使用图片预览的时候， 我们在main.js中进行了全局注册 import { ImagePreview } from 'vant'; app.use(ImagePreview); 但是在需要使用的页面，无法进
1. 前期准备 安装node，vue3，vscode 1.1 安装更新脚手架 npm install -g @vue/cli npm update -g @vue/cli 1.2 vscode 插件 Volar ，Vue 3 Snippets 开发vue3时需要关闭vetur插件 2. vue3官网 https://v3.cn.vuejs.org/ vant 官网https://vant-contrib
插件：postcss-px-to-viewporthttps://www.npmjs.com/package/postcss-px-to-viewport 简介 将px单位转换为视口单位的 (vw, vh, vmin, vmax) 的 PostCSS 插件. 如果你的样式需要做根据视口大小来调整宽度，这个脚本可以将你CSS中的px单位转化为vw，1vw等于1/100视口宽度。 PC、移动
<div class=""> <div class="">图片预览 禁止上传</div> <van-uploader preview-size="60px" v-model="fileList" readonly :show-upload="false" :deletable="false" multip
Vant 中的样式默认使用 px 作为单位，如果需要使用 rem 单位，推荐使用以下两个工具： postcss-pxtorem 是一款 postcss 插件，用于将 px 单位转化为 rem lib-flexible 用于设置 rem 基准值 1.安装依赖 yarn add amfe-flexible 或者使用 npm i amfe-flexible 复制区： yarn add amf
最近开发复盘项目时遇到这么一个问题 原先dialog自带的取消和确定按钮要隐藏掉 写自定义按钮并且要求有三个按钮 查vant官网只有俩按钮的 找了一些资料实现了隐藏原先按钮并多个自定义按钮 首先来看普通的dialog的使用 官网Vant - Mobile UI Components built on Vue 这样的写
这里以vant中的轮播图组件为例 <template> <div id="app"> <van-swipe class="my-swipe" ref="box" @change="changeEvent" :autoplay="3000" indicator-color="white" :vertical="fals
Vue_UI与Vuex UI库 element-ui 官网：https://element.eleme.cn/#/zh-CN/component/installationhttps://element.eleme.cn/#/zh-CN/component/installation Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库 element-ui是基于vue框的一个第三方的PC端组
首先附上微信小程序自定义tabbar开发文档地址：传送门 一直使用的都是微信原生的tabbar组件，这一次想给小程序加一个功能，实现首页弹窗轮播图全屏覆盖（弹窗遮罩层盖住小程序原生的头部和底部导航组件），小程序原生的底部tabbar组件默认层级是最高的，无法被其余组件和标签遮盖，要实现遮
<div class="company_info" v-for="(item, index) in corpList" :key="index"> <van-uploader class="uploader_wrapper" :after-read="afterRead(index)"> <div class="uploader upl
1. 设置动态根字号大小，/public/phone-adapt.js，在index.html中引入 (function (doc, win) { const docEl = win.document.documentElement; const resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize'; const resize
css .van-cell { ::v-deep .van-icon { display: flex; align-items: center; } }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=
一、vue-用vant实现下拉刷新 补充知识：合并数组 举例：
上篇文章推荐了 linui组件库，基本使用完全满足了。如果要做电商类小程序，还是用【有赞团队】开发和维护的vant-weapp组件库。该库提供了丰富的电商相关的组件，可以节省很多开发工作量。 更多使用请看官方文档：vant-weapp 官方文档
<van-pull-refresh v-model="isRefreshLoading" success-text="刷新成功" @refresh="onRefresh" > <van-list v-if=List.length > 0" v-mode
在mpvue中引用vant weapp 使用mpvue作为框架，引入第三方的ui框架 vant-weapp vant-weapp: https://github.com/youzan/vant-weapp 下载vant-weapp的资源:https://github.com/youzan/vant-weapp.git 1、 2、 3、 4、全选复制 5、进入自己的项目的static文件夹 6、新建一个v
最近工作中有一个老项目，是后端人员用公司pc端框架写的移动端项目，最近项目的使用量上来了，经常出现资源加载过慢卡死情况，排查了代码一看发现了使用了一堆依赖，还有pc端无用的组件代码，导致打包后的vendor.js文件达到5m多)：，最意外的是public文件有个叫做cdn的本地文件夹？？？通过npm ru
