transition过渡属性属性描述值举例transition简写，包含4个过度属性transition:width 1s linear 1s;transition-propertycss属性的名称all:所有属性都将获得过渡效果。transition-property:height;transition-duration过渡效果花费的时间，默认0transit
vue-cli3.0实现移动端自适应，亲测有效项目使用vue3.0编写代码，说要打包成apk文件，在安卓上看，现在需要适配移动端的样式，记录一下，亲测有效。安装插件vue脚手架略过lib-flexible : 会自动在html的head中添加一个<meta name="viewport">的标签，同时会自动设置html的font-size为屏幕宽度除以10，也就是1rem等于html根
转载
2024-09-12 06:54:09
153阅读
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
1538阅读
之前主流移动端适配方案是lib-flexible+postcss-pxtorem，但是这样的方案会存在一定的问题：两个插件需要配套使用，而且rootValue设置的值不好理解rem是相对于html元素字体单位的一个相对单位，从本质上来说，它属于一个字体单位，用字体单位来布局，并不是太合适另一种流行的移动端适配方案：安装： npm install postcss-px-to-viewport --s
文章目录先用官方的命令，新建一个nuxt项目改造目录在根目录新建src文件夹，将文件夹都剪切到src中，配置nuxt.config.js配置router.js配置eslint项目迁移安装插件配置别名文件迁移配置插件（我们自己封装的install插件）配置环境，以及不同的环境下打包到不同的目录修改package.josn里面的命令修改nuxt.config.jsnuxtjs中使用高德地图nuxt.
转载
2024-10-11 14:08:16
247阅读
背景在一pc端的web项目里，由于某些特性需要由动态语言处理，所以只在有需要使用vue来处理数据的页面，直接引入vue.js来处理。由于刚开始并没有打算使用前端来渲染数据和处理交互，所以使用了一些非vue的ui和插件，导致后来冲突坑点不少。非vue模块化下使用vue，虽然不能import vue文件，使用组件方式也有点恶心，但处理一些事情还是不错的。使用formdata提交表单数据先上代码&nbs
目录1. 安装下载nuxtjs2. 配置路由3. 配置路由重定向4. 配置一些全局的css5. 使用sass6. 编写公共头部布局模板7. 改写组件8. 改写请求接口9. 改写vuex10. 引入第三方插件11. 配置meta12. 开启gzip、brotli压缩13. 部署 这个项目之前也是想用nuxt做的，但是当时还不会，就用了预渲染，最近刚学了nuxt，顺便练习一下 原项目是基于 vu
转载
2024-10-21 09:32:42
50阅读
（注：本文适用于有一定Vue基础或开发经验的读者，文章就知识点的讲解不一定全面，但却是开发过程中很实用的） 首先介绍一下混入mixin的概念：官方文档：混入提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。个人理解：混入就是用来对vue组件中的公共部分，包括
目录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、设置根
前言因为移动端设备屏幕尺寸非常多，碎片化严重。为了兼容市面上的不同手机，我们要给我们的项目中去进行响应式布局。rem适配方案原生rem写法注意： 1rem 的大小 = 根元素html的font-size的字体大小<script>
// 页面重置事件
get()
window.onresize = function() {
get()
}
vue移动端模板tip：1、ui我们使用的是vux，庆幸的是，解决了打包过大的问题，2、这里使用的是rem布局，移动端还是要使用ipad和不同尺寸的手机3、版本：webpack:3.6.0 vue:2.5.2 vue-loader:13.3.0 vux:2.8.1 vux-loader:1.2.7 版本很重要，版本很重要，版本很重要，vue及生态更新太快，控制好
vue项目移动端、pc端适配方案lib-flexible 根据屏幕宽度，自动设置html的font-sizepostcss-px2rem 自动将px单位转换成rem一、第一步先安装 flexible和 postcss-px2rem（命令行安装）npm i lib-flexible -S
npm i postcss-px2rem -S简要介绍这两个包的用途：flexible会为页面根据屏幕自动添
转载
2024-10-08 19:47:09
751阅读
一，原因既然看到这篇博客，说明各位已经知道为啥要做rem适配，以及rem适配的原理。 写这篇博客的原因在于，网上很多postcss-pxtorem 插件的配置都无法生效（原因在于创建项目的工具如vue-cli版本等的不同），生生地浪费了很多时间。于是重新整理下，套用下个神棍点地说法，就是亲测有效~~哈哈。二，使用postcss-pxtorem 的方法0，无效原因我的项目是使用vue-cli3创建的
文章目录Vue项目打包成exe可执行文件需要工具执行步骤跨域失效解决方案 Vue项目打包成exe可执行文件一篇好文章 如何用electron技术将Vue项目打包成exe可执行文件需要工具1. node版本>12
2. vue版本>2.x
3. 魔法上网工具不满足条件的先去升一下,再继续下边的操作执行步骤进入Vue项目的根目录,打开命令行,注意项目所在路径不能有中文,否则会报错的哦
v
作者：清风皓月一.涉及技术点vite版本vue3ts集成路由集成vuex集成axios配置Vant3移动端适配请求代理二.步骤vite+ts+vue3只需要一行命令npm init @vitejs/app my-vue-app --template vue-ts配置路由npm install vue-router@4 --save在src下新建router目录，新建index.ts文件import
升级版本通常情况下，把版本升级到最新不仅可以提高编译速度也可以避免一些出现过的问题( 惨遭打脸选用的 Ant Design of Vue 就重大更新了一次，又重新写的 )。按需加载比如常见的 lodash 库，我们显然不需要全部都用到，所以要采用按需加载的方式来引用，对一些常见的方法进行提取统一进行处理，一般来说如果支持的话，文档都会标注，如果没有又不想要体积太大就自己写一个，这方面不在过
最近为移动端使用rem雪碧图小图标自适应困扰，想了半天终于找到解决方案！难点在于雪碧图要跟随屏幕缩小，下面我们进入正题！ 大家先要明白rem是什么，我给大家个新的理解，rem的本质就是百分比转换，不明白的童鞋可以具体去恶补下rem相关知识！既然rem的本质是百分比转换，那么我们也可以通过同样的方法转换雪碧图，下面上案例！  
至今除了小程序没怎么接触过移动端，问了下朋友移动端都是怎么做适配的 1.rem，这个单位转换比较麻烦，特意问了下有没有什么可以自动转的，这里给出一个叫px2rem-loader的工具，和lib-flexible一起使用的 2.boots tarp这个框架，，已经很久没用了，留个标记需要的时候去捡起来 ...
转载
2021-08-19 16:02:00
229阅读
2评论
原文: https://www.jb51.net/article/251371.htm
超级详细的Vue安装与配置教程 Vue web前端三大主流框架之一,是一套用于构建用户界面的渐进式框架,下面这篇文章主要给大家介绍了关于Vue安装与配置教程的相关资料,文中通过图文介绍的非常详细,需要的朋友可以参考下+
目录一、下载和安装Vue官网下载地址Download | No
转载
2024-04-25 15:19:06
41阅读
安装lib-flexible1、npm install lib-flexible --save2、import 'lib-flexible' 在 main.js中引入 通过以上两步，就完成了在vue项目使用lib-flexible来解决移动端适配问题了。lib-flexible会自动在html的head中添加一个meta name="viewport"的标签，同时会自动设置html的font-si
