作者 | 陈龙Vue SSR概述什么是SSRServer Side Rendering(服务端渲染)SSR的优点更好的 SEO更快的内容到达时间SSR方案的权衡之处开发条件所限涉及构建设置和部署的更多要求更多的服务器端负载Vue SSR基本使用一个最简单的示例（官方）const Vue = require('vue')
const server = require('express')()
con
适配思路 设计稿（750*1334） ---> 开发 ---> 适配不同的手机屏幕，使其显得合理原则开发时方便，写代码时设置的值要和标注的 160px 相关方案要适配大多数手机屏幕，并且无 BUG用户体验要好，页面看着没有不适感思路写页面时，按照设计稿写固定宽度，最后再统一缩放处理，在不同手机上都能用按照设计稿的标准开发页面，在手机上部分内容根据屏幕宽度等比缩放，部分内容按
目录一，进入/离开过渡效果二，过渡效果的钩子函数三，过渡效果+Animate.css四，列表过渡 一，进入/离开过渡效果进入/离开过渡效果：Vue在插入、更新或移除DOM时，可以设置一些动画效果；如何使用过渡效果：利用<transition></transition>组件将需要应用的过渡效果的DOM对象包裹住，然后书写对应的样式；过渡的类名：过渡效果的样式是类样式
效果图因为开发完了才写的，效果图不能展示全，效果不是很全
大屏 前言在实际开发过程中，我们经常需要一个大屏进行一些常规数据的展示。在Vue中也是提供了这样的容器组件我们可以使用基于Vue的 Datav组件 + Vue-Baidu-Map地图组件 + Echarts图表组件 + 时间戳就实现基本布局在Vue中配置大屏路由的时候，我们注意不要让大屏的路由出现在侧边栏的地方，让他点击或者输入地址出
文章目录开始之前正文一、Options Api二、Composition Api三、对比逻辑组织Options APICompostion API逻辑复用小结
开始之前Composition API 可以说是Vue3的最大特点，那么为什么要推出Composition Api，解决了什么问题？通常使用Vue2开发的项目，普遍会存在以下问题：代码的可读性随着组件变大而变差每一种代码复用的方式
react学习文档由vue3转学react，之前从未接触过react，自学了一遍感觉还好，容易上手。 期间的一些笔记，后续有更深的见解持续更新。组件（类组件，函数组件） 组件名称首字母要大写，必须有返回值，没有写null组件通信父传子父组件通过state传递值。state里设置要传递的值给子组件标签添加属性，msg={this.state.msg1}子组件通过props接受父组件传来的数据(类组件
一个认真生活的人，都值得被认
转载
2022-04-21 13:49:39
365阅读
// 支持es6语法，但并不意味着同时支持新的 ES6 全局变量或类型（比如 Set 等新类型）
‘ecmaVersion’: 6,
// 指定来源的类型，‘script’ (默认) 或 ‘module’（如果你的代码是 ECMAScript 模块)
‘sourceType’: ‘module’
},
‘plugins’: [‘vue’, ‘html’],
‘rules’: {
//
一、父传子//父组件
<template>
<div id="app">
<Subassembly :Properties="Properties"/>//绑定一个属性挂载要传输的变量
</div>
</template>
<script>
import Subassembly from '组件路径';
expor
在这个谁掌握的数据多谁就是强者的时代，如何快速理解数据想要表达的信息是我们提升生活质量和提高工作效率的一大杀手锏。以往我们使用的最多的数据展示软件多是Excel或PPT，但Excel只能整理数据，PPT往往只能简单的做一些简单平面展示，当我们想要表达数据三维的变化或数据时间的变化PPT就不能满足我们的需求了，因此市面上各种数据可视化大屏软件层出不穷。但作为刚接触可视化大屏的我们，甚至不知道有哪些软
转载
2024-03-25 07:04:27
90阅读
Vue2.x学习记录(1)1. 安装Vue，安装vue-cli,webpack,webpack-cli,element-ui,router.2. 了解文件之间的耦合关系。在脚手架中用export暴露接口，在main.js中import使用接口。 程序主入口为new Vue();3.数据与方法 当一个 Vue 实例被创建时，它将 data 对象中的所有的 property 加入到 Vue 的响应式系
本文将介绍如何实现一个注册全局指令的插件，可以自动判断vue版本，并进行差异消除的处理。本文示例源码github、npm地址，欢迎start哦。前置介绍-出发点最近写了个vue3的自定义指令，用来拖动元素。为了不影响元素的布局，选用了transform:translate()变换，来实现拖动。实现并不难，思路大概是：监听元素mousedown事件，点击时记录开始坐标。并监听元素mousemove事
vue中使用rem布局解析+大屏自适应 公司内部一直有大屏的需求，也一直再做，中途也踩了一些坑，但是没有认真的来总结下。首先项目中，做过移动端的适配，也有现在的大屏需求，中间都离不开不一个单位rem，自适应看起来就很麻烦，不过无惧困难，困难才会看到你说，哟，厉害了，我闪~，下面慢慢聊来。浅析rem首先rem是css单位，相比于px固定的像素单位，rem更加的灵活，还有现在也比较好的vm。如果从未了
实现效果：关于天气的实现可以看我之前的文章代码实现js<script>
export default {
props: {},
data () {
return {
date: '',
weekDay: '',
time: ''
}
},
mounted () {
this.getWeather()
t
配置前言 项目构建：基于vue-cli3构建，使用postcss-px2rem px2rem-loader进行rem适配实现原理：每次打包，webpack通过使用插件postcss-px2rem，帮我们自动将px单位转换成rem单位前方有坑：UI框架部分组件使用JavaScript将css作为内联样 ...
转载
2021-07-30 10:54:00
893阅读
2评论
前端开发中还原设计图的重要性毋庸置疑，目前来说应用最多的应该也还是使用rem。然而很多人依然还是处于刀耕火种的时代，要么自己去计算rem值，要么依靠编辑器安装插件转换。而本文的目标就是通过一系列的配置后，在开发中可以直接使用设计图的尺寸开发，项目为我们自动编译，转换成rem。技术栈vue-cli：使用脚手架工具创建项目。postcss-pxtorem：转换px为rem的插件。自动设置根节点html
转载
2024-02-26 12:46:39
280阅读
大屏自适应之前有用过postcss-pxtorem之类的插件，但是插件只针对css样式，在js和vue模板中的样式，还有echarts的属性值都不能经过插件直接转换。要手动分装方法再次调用，就会比较麻烦，而且有时候写着写着就忘加了，开发就一个分辨率的显示器，最多就是f12打开挤兑挤兑测测。解决方案 ------- 缩放 + scrollbar（非全屏）可以使用transform: scale(${
1.什么是rem来自于鹅厂ISUX团队的解释如下： rem（font size of the root element）是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位。看到rem大家一定会想起em单位，em（font size of the element）是指相对于父元素的字体大小的
一、rem介绍rem是什么？它的全称是 font size of the root element （根元素的字体大小）它是CSS3中新增加的一个尺寸（度量）单位，根节点（html）的font-size决定了rem的尺寸，也就是说它是一个相对单位，相对于(html)。浏览器的默认字体？浏览器的默认的font-size是16px，1rem默认就等于16px。（chrome最小字体为12px）rem可
转载
2024-06-18 20:31:53
188阅读
作者：OmniDebug基于Vue.js开发移动端工程时，一些特定的问题和场景下，只能在移动端运行工程复现、追踪问题（比如在微信端内，在App容器内），桌面端的Devtools就没法用了。数次安装Electron版本devtools后，觉得调试起来太麻烦了，所以我决定把devtools搬进vConsole里如果不知道什么是vConsole，可以看这里vConsole Readme最终效
