一个认真生活的人，都值得被认
转载
2022-04-21 13:49:39
365阅读
在做移动端开发，我们希望px自动转成rem，有三种方法1JS计算 就是自己手动去算，在app.vue中，通过JavaScript读取屏幕宽度，然后根据宽度计算出对应的尺寸并设置根元素的font-size。const oHtml = document.getElementsByTagName('html')[0]
const width = oHtml.clientWidth;
// 320px的屏
前端开发中还原设计图的重要性毋庸置疑，目前来说应用最多的应该也还是使用rem。然而很多人依然还是处于刀耕火种的时代，要么自己去计算rem值，要么依靠编辑器安装插件转换。而本文的目标就是通过一系列的配置后，在开发中可以直接使用设计图的尺寸开发，项目为我们自动编译，转换成rem。技术栈vue-cli：使用脚手架工具创建项目。postcss-pxtorem：转换px为rem的插件。自动设置根节点html
一、父传子//父组件
<template>
<div id="app">
<Subassembly :Properties="Properties"/>//绑定一个属性挂载要传输的变量
</div>
</template>
<script>
import Subassembly from '组件路径';
expor
Vue读取网络路径Excel文件转换为Html预览，打印前言一、预览EXCEL文件1.获取网络路径Excel文件2.转换格式后的数据3.最终结果二、打印文件 前言我们需要对一些Excel文件进行预览，那么可以调用第三方的接口转到别的页面进行预览，可是这样比较花费时间，而且还受到网络网速的影响。因此我们可以将Exce文件转为html的table格式或者是json格式来达到我们获取信息的目的一、预览
转载
2024-04-09 13:20:41
62阅读
# 问题情景之前新拉取的vue项目，今天在更换背景图片的时候，发现，图片与顶部有缝隙，查看后发现，body属性中有margin:8px body { marg.
原创
2023-03-21 18:03:08
145阅读
目录一，进入/离开过渡效果二，过渡效果的钩子函数三，过渡效果+Animate.css四，列表过渡 一，进入/离开过渡效果进入/离开过渡效果：Vue在插入、更新或移除DOM时，可以设置一些动画效果；如何使用过渡效果：利用<transition></transition>组件将需要应用的过渡效果的DOM对象包裹住，然后书写对应的样式；过渡的类名：过渡效果的样式是类样式
如果是做 PC 端的网页，无需做 rem 适配，但是做 H5 开发，rem 是需要做一下的 方案一： Vant 官方也为我们提供了方案，如下图所示： 咱们就按照官方为我们提供的方案进行适配，安装它们： yarn add lib-flexible -S yarn add postcss-pxtorem ...
转载
2021-10-12 16:01:00
729阅读
点赞
插件安装npm install postcss-px2rem -Snpm install px2rem-loader -Snpm install lib-flexible -S使用build目录下vue
转载
2022-05-26 12:23:20
341阅读
vue项目与nuxt.js实在有着太多的不同，例如项目结构变化很大，router.js没了，vuex store写法有变化，router钩子没了等等。老项目毕竟也有一些体量，这么折腾我可接受不了，不过经过一番调查，我发现这些问题不是不可以解决。因此虽然迁移是要迁移的，但是要尽量保持vue-cli 3项目的风味，以最小的改动完成迁移。为此我做了很多调查，本文的目的就在于此。1、重建项目没啥可说的，直
vue有自己的脚手架构建工具vue-cli,使用起来非常方便，使用webpack来集成各种开发便捷工具，比如：代码热更新，修改代码之后网页无刷新改变，对前端开发来说非常的方便PostCss，再也不用去管兼容性的问题了，只针对chrome写css代码，会自动编译生成支持多款浏览器的css代码Eslint，统一代码风格，规避低级错误，对于有代码洁癖的人来说是绝对的好东西，不过有些地方的代码校验有时候也
转载
2024-07-26 13:32:10
27阅读
安装npm install px2rem-loader lib-flexible --save 入口文件main.js加上import 'lib-flexible
原创
2022-03-08 14:40:36
435阅读
安装npm install px2rem-loader lib-flexible --save 入口文件main.js加上import 'lib-flexible/flexible.js'在index.html加上 <meta name="viewport" content="width=device-width,initial-scale=1.0"> <met...
原创
2021-08-26 11:21:26
512阅读
这应该是vue项目在适配移动端时候，最简单的方法之一下面是基本步骤（使用cnpm）1.下载并引入lib flexible 在main.js中 ：import 'lib flexible/flexible'2.引入px2rem loader 3.将px2rem loader添加到cssLoaders
转载
2018-12-13 13:37:00
162阅读
2评论
Wepy项目转移到uniapp项目 （经过上网百度以及官网的学习、大概解决了、还有一些和服务端连接的问题没处理好） 一、 （vscode条件下实现的在hbuilderX也可以正常运行） 1.1 全局安装：npm install -g @vue/cli 1.2 通过cl创建uni-app项目：vue create -p dcloudio/uni-preset-vue my-project 后面可以选
作者 | 陈龙Vue SSR概述什么是SSRServer Side Rendering(服务端渲染)SSR的优点更好的 SEO更快的内容到达时间SSR方案的权衡之处开发条件所限涉及构建设置和部署的更多要求更多的服务器端负载Vue SSR基本使用一个最简单的示例（官方）const Vue = require('vue')
const server = require('express')()
con
vue项目移动端、pc端适配方案vue项目移动端、pc端适配方案lib-flexible 根据屏幕宽度，自动设置html的font-size
postcss-px2rem 自动将px单位转换成rem
一、安装 lib-flexible和 postcss-px2remnpm i lib-flexible -S
npm i postcss-px2rem -S简要介绍这两个包的用途：lib-flexi
转载
2024-04-04 11:38:14
1547阅读
目录1、创建一个项目并启动2、设置根字体大小和单位转化3、去掉边框距离4、css的嵌套使用5、连接到手机上显示6、vant ui 库的使用6.1 基础用法6.2 底部导航栏7、模拟锤子商城7.1 请求数据7.2 解决跨越7.3 组件切换7.4 轮播图的实现 1、创建一个项目并启动npm init vue@latestcd demonpm installcode .npm run dev2、设置根
自适应是每个开发者必走的路，该篇掘文是前者踩过一些坑 而踏出来的几条路，希望这些经验能在开发的过程中帮助到大家！！！1.传统布局 => rem
方式一
const deviceWidth = document.documentElement.clientWidth || document.body.clientWidth;
document.querySelector(‘html’).
计算属性和侦听器计算属性模板内的表达式虽然方便，但是如果在进行复杂运算的时候，在模板中放入太多的逻辑会让模板难以维护。例如：<div id = "a">
{{ messgae.split('').reverse().join('') }}
</div>这段代码用于反转字符，当你想多次使用的时候整段代码的可读性就会变得非常差。所以，对于任何复杂一点的逻辑都应该使用计算
转载
2024-09-27 08:07:29
259阅读
