1、首先我们看示例图: h5: pc: 2、我们开始做第一步就是装依赖:yarn add vue3-qr-reader 或者 npm install vue3-qr-reader 我记得装完后还需要装一个 yarn add -D sass 3、封装一个组件公用:组件位置
--open 启动项目,在浏览器中自动打开 "scripts": {"dev":"vite --host 0.0.0.0 --open", }, 配置端口号,在‘vite.config.js’文件下,新增server配置 exportdefaultdefineConfig({plugins: [vue(),vueJsx(), ],// 配置ip地址访问server: {// host: '0.0.0.0', //这里也可以配置 ip地址// open: ...
"name": "vue-with-vite", "version": "0.0.0", "scripts": { "dev": "vite", "build": "vite build", "build-h5": "vite build --mode h5", "build-pc": "vite build --mode pc", "preview": "vite preview --port 4173" }, "dependencies": { "element-plus": "^2.7.3", "van...
如果需要构建 PWA,可以使用 Vite PWA 插件:npm install D vitepluginpwa。 在vite.config.js中配置 PWA:plugins: [vue()]。 9、打包部署 如果需要打包部署,可以使用 Vite Build 插件:npm install D vitepluginbuild。 在vite.config.js中配置打包部署:build: { outDir: 'dist', assetsDir: 'assets' } plu...
Vue3 Vite H5 手写一个横向展开的多级树列表 最近写h5要做那种稍微复杂一点的树,没找到现成的UI组件库可用,vant的树只有两级不满足,只能自己写 ps. 选框的选择/反选/半选对父子选项的影响还有bug,留到脑子好的时候再优化 效果 代码 框架是Vue3+Vite+Vant4。复选框用的vant的checkbox,应该也可以换别的或者...
vue3+vite项目配置适配H5主要安装一下两个插件: amfe-flexible(主要用于动态设置根元素字体大小(rem),以根据屏幕尺寸进行自适应布局) postcss-px-to-viewport-8-plugin(将px单位转换为rem) 开始配置: 第一步、安装amfe-flexible插件 cnpm install amfe-flexible--save ...
}constonTouchend= (e) => {constmoveY = e.changedTouches[0].clientY;emit("update:modelValue", startH.value);// 拖拽结束,先恢复稳定高度if(moveY - startY.value>=50) {// 向父组件传递down或up的动作。判断阈值50可自由修改emit("action","down"); ...
// vite.config.jsimport{defineConfig}from'vite'importunifrom'@dcloudio/vite-plugin-uni'exportdefaultdefineConfig({plugins:[uni()],server:{port:5178,proxy:{// 注意:项目中不要有文件夹名称和这个代理名称重复,不然会404错误'/request':{target:'这里填你要代理的接口地址',// 目标服务changeOrigin:tru...
vue3版本实现h5自适应布局 amfe-flexible 和 postcss-pxtorem 可以一起使用来实现移动端的适配效果。 参考的页面地址 vite.config.js配置 importpxtoremfrom'postcss-pxtorem';exportdefaultdefineConfig({plugins: [vue() ],css: {postcss: {plugins: [pxtorem({rootValue:75,// 这里写设计稿的宽度/10即可,例如...