在实际开发中，我们浏览网页，网页顶部的导航栏Header和侧边的菜单栏Aside，以及底部的footer等内容往往是不发生改变的，如果在每次页面跳转、提交表单后都去重写这部分是很麻烦的，而Element-Plus为我们提供了封装好的标签，让我们能够通过组件化来实现页面的布局。注意！将这些封装成组件后使用会出现错位的问题 出现这个问题的原因是封装成组件后，<el-container&
Vue-cli 3安装及使用vue-cli安装vue-cli创建项目自定义脚手架vue-cli3.0添加插件方法全局变量的使用vue-cli3.0独立运行.vue文件vue项目管理器vue-cli3.0配置基础的路径 vue-cli安装使用下面的命令安装vue-cli3npm install -g @vue/cli
# OR
yarn global add @vue/cli安装完成，检查vue版
本文简单介绍一下vue项目移动端的rem适配准备。首先移动端肯定用的是vant组件库，在开发移动端之前，通常要做好rem适配，当然也可以的vw适配，这里简单介绍一下rem适配。首先看一下vant官网上的介绍需要这两个插件：步骤一：安装 npm i amfe-flexible步骤二：引用 （在main.js里面引用一下下）import 'amfe-flexible'步骤三：看效
近日在项目完成时需要需要做到内容跟随屏幕可视窗口大小进行适配，然后想到用rem来实现适配问题 1.首先安装一个px转rem的插件npm install postcss-pxtorem --save2.新建一个rem.js文件// 设置 rem 函数
function setRem() {
const pageWidth = window.innerWidth;
//为了ie也能拿到
customRef 返回一个ref对象,可以显式地控制依赖追踪和触发响应示例<template>
<div>
<p>{{obj}}</p>
<button @click="inc">button</button>
</div>
</template>
<
兼容vue2、vue3项目，将vue文件中style里单位为px,编译时自动转换为vw、vh等单位安装依赖npm install postcss-px-to-viewport --save-devvue.config.js 常规配置module.exports = {
//module.exports暴露的最外层添加以下代码
css: {
requireModuleExtensio
需求：是实现全局页面中字体自适应。警告：下面实现主要是在Vue中进行配置的，把全局中的px转换成rem进行实现自适应窗口变化。一、实现方式：1、下载所需插件pnpm install lib-flexible-computer -S
pnpm i px2rem-loader -D
pnpm install postcss-px2rem-exclude -D2、在main.js进行全局引入impor
vue项目移动端、pc端适配方案lib-flexible 根据屏幕宽度，自动设置html的font-sizepostcss-px2rem 自动将px单位转换成rem一、第一步先安装 flexible和 postcss-px2rem（命令行安装）npm i lib-flexible -S
npm i postcss-px2rem -S简要介绍这两个包的用途：flexible会为页面根据屏幕自动添
介绍Vuetify 是一个基于 Vue.js 精心打造 UI 组件库，整套 UI 设计为 Material 风格。能够让没有任何设计技能的开发者创造出时尚的 Material 风格界面。为什么要使用Vuetify框架所有组件遵从 Material Design 设计规范，UI 体验非常优秀，能够媲美苹果但又完全不同的设计采用移动优先的设计，无论在手机、平板或 PC 电脑上都有完美的适配极其丰富的上
做移动端的适配我们就是要考虑，对于不同大小的手机屏幕，怎么动态改变页面布局中所有盒子的宽度高度、字体大小等。这个问题我们可以使用相对单位rem。那么什么是 rem？rem（font size of the root element）是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位。设置 html 的 font-size 属性，rem 是根据它的大小来动态变化整个项目中使用 rem 单位
如果要写的项目是一个移动端时，用户需要使用手机访问，手机屏幕大小不一，所以需要去适配各种大小不同的手机，这个时候就需要使用REM适配技术 (解决同一个元素在不同设备中大小的变化)。1.什么是REMrem是一个相对单位，它是相对于页面中根标签html中的文字大小 2.为什么要用REM因为不同的设备，像素密度不同，根标签文字大
vue 实现 rem 布局的 或者 vw 布局的方法一、实现 rem 布局移动端name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1"
/>
方法一、在 index.html 或者 main.js 中添加以下代码：
const setHtmlFontSize = () => {
let
Situation需求 项目中的一种题目 计算题需要配置特定运行指令，计算题的编辑和新增是同一个页面 基本信息提交、配置指令提交和配置文件上传各是一个接口，一共涉及3个接口 指令提交和文件上传均需要questionId，因此我们设计 第一页进行题目基本信息提交，请求成功后后端返回questionId，我们拿到questionId后 下一步 跳转至 第二页，进行指令的配置 问题 编辑计算题时，第一页
公司内部一直有大屏的需求，也一直再做，中途也踩了一些坑，但是没有认真的来总结下。首先项目中，做过移动端的适配，也有现在的大屏需求，中间都离不开不一个单位rem，自适应看起来就很麻烦，不过无惧困难，困难才会看到你说，哟，厉害了，我闪~，下面慢慢聊来。浅析rem首先rem是css单位，相比于px固定的像素单位，rem更加的灵活，还有现在也比较好的vm。如果从未了解过，可以先过过眼rem自适应。CSS3
MENU01、v-if和v-show指令02、Vue路由拦截03、Vue中父子组件生命周期钩子函数的执行顺序04、MVVM05、v-for和v-if06、Vue中的data07、v-model（双向绑定）08、route和router的区别09、vue-router10、computed（计算属性）和watch（监听）的区别及应用场景11、Proxy与Object.defineProperty优
vuejs实战——PC端一、项目使用资源整合1、使用vue-cli脚手架工具搭建2、使用UI框架——elementUI二、使用vue-cli创建项目全局安装 vue-cli（$ npm install –global vue-cli）创建一个基于webpack模板的新项目（$ vue init webpack 项目名称）进入项目目录（$ cd 项目名称）安装依赖（$ npm install）运行项
由于element-ui 未对 Vue3 兼容，导致官方提供的构建版本不能使用 下面手动进行迁移决定升级前请确保项目所有依赖都有替代方法 Vue特性变更，官网会给出解决方法 特别注意第三方UI相关依赖vue2 改为 vue3 以及 相应的依赖修改vue@next ， 组件 @vue/compiler-sfc （Vue2：vue-template-compiler）element-ui 换成 ele
一直以来，移动端适配问题都是我工作中的一大难题，经常会碰到各种坑，今天有时间，为了能在新项目中更完美的使用vw来做移动端的适配，使用了一下vw在vue中的适配，下面记录一下。 使用Vue-cli来构建项目 $ npm install -g vue-cli （注意这里是使用的vue 2 不是cli3）因为cli3要在
1问题描述我们使用vue做项目的时候，常常需要做到echarts图表的自适应，一般是根据页面的宽度做对应的适应。本文记录一下设置echarts图表的自适应的步骤。我们先看一下没有做echarts自适应的效果无自适应效果图
我们发现echarts图的宽度并没有随着页面宽度的变化而变化
有自适应效果图2 解决下载依赖：cnpm install echarts --save代码步骤echart图表
vue3新增知识点一、Setup1、参数(1)propssetup函数中的第一个参数是 props。正如在一个标准组件中所期望的那样，setup函数中的 props是响应式的，当传入新的 prop 时，它将被更新。// MyBook.vue
export default {
props: {
title: String
},
setup(props) {
console
